Лекция 9 Тема «Каскадные таблицы стилей » Преподаватель: Халелова Е. Н. - презентация

1 Лекция 9 Тема «Каскадные таблицы стилей » Преподаватель: Халелова Е. Н.

2 1.Назначение CSS 2.Селекторы 3.Способы определения стилей 4. Свойства элементов Вопросы темы:

3 1.Назначение CSS Каскадные таблицы стилей (CSS) представляют собой описания различных элементов Web-страницы и являются альтернативным способом форматирования Web-документа. Основная задача CSS состоит в отделении формата Web-страницы от ее содержимого. Каскадные таблицы стилей были предложены W3С в рамках спецификации HTML 3.0

4 Практическое назначение CSS заключается в том, что процесс создания Web-узла может быть представлен следующим образом : Все страницы проектируемого Web-узла разбить на типы: домашняя страница, навигационные страницы, информационные страницы и т. д. Для каждого типа страниц требуется разработать логическую структуру (стандартный набор компонентов страницы) Следует создать навигационную карту узла и форму ее реализации на страницах;

5 Для каждого стандартного компонента страницы нужно разработать стиль его отображения (CSS-описатель) Теперь можно рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графику или генерировать содержимое страниц автоматически при обращении к ним.

6 2.Селекторы Параметры и директивы CSS описываются по принятым в данном стандарте правилам в специальном файле с расширением *.сss Общий синтаксис записи стилей всех элементов HTML в таком файле выглядит следующим образом: НАЗВАНИЕ ЭЛЕМЕНТА {свойство: значение} Например, H1 {color: blue; font-size: 20pt;}

7 Группировка селекторов Если в нескольких разных селекторах используются одни и те же определения, с помощью языка CSS их можно сгруппировать между собой. Группировка селекторов в единую директиву осуществляется следующим образом: сначала идет перечисление через запятую всех элементов, использующих одинаковое определение, затем в фигурных скобках указываются их свойства и значения. НАЗВАНИЕ ЭЛЕМЕНТА-1, НАЗВАНИЕ ЭЛЕМЕНТА-2,... НАЗВАНИЕ ЭЛЕМЕНТА-N {свойство: значение;}

8 Например, H1, Н2, НЗ, Н4 {font-family: Helvetica; color: red; font-size: 30pt;} Аналогичным образом можно группировать между собой определения: НАЗВАНИЕ ЭЛЕМЕНТА {Определение-1: Определение-2: Определение-N;} 1.Htm 1.css

9 Принцип наследования Для элементов HTML, описанных в файле CSS, справедлив принцип наследования. Все элементы web-страниц по умолчанию являются дочерними директивами тега, а значит, они будут автоматически наследовать его свойства. Cуществуют свойства, не наследуемые теми или иными элементами. Например, тег

10 Принцип наследования стилей CSS

11 При использовании стилей действуют следующие правила: Сначала применяют стили по умолчанию; Стили браузера по умолчанию переопределяются стилями, указанными элементом заголовка LINK ; Стили LINK переопределяются описаниями стилей STYLE; Стили STYLE переопределяются атрибутом STYLE в любом из элементов разметки.

12 3.Способы определения стилей Существует несколько способов определения стилей: 1.Определение в контейнере 2.Переопределение стиля внутри какого-либо тега с использованием параметра style=…

13 3.Импортирование из стилевого файла. styles_outtable.htm stls.css 4.Определение стилей через классы и идентификаторы. Если необходимо для одного и того же тега определить несколько видов начертания символов, нужно использовать классы тегов НАЗВАНИЕ ЭЛЕМЕНТА. имя класса {свойство: значение;} 2.htm2.htm

14 Если требуется создать класс, который не принадлежит ни одному из тегов, необходимо в описании класса опускать определение тега..имя класса{свойство: значение;} 3.htm Идентификаторы В отличие от селекторов и классов, идентификаторы представляют собой кодовые объекты CSS, которые позволяют назначать свойства отдельным компонентам HTML. В файле CSS идентификатор обозначается знаком #, а в документе HTML атрибутом ID. Он имеет собственное имя, состоящее из цифр и символов латинского алфавита. Общий синтаксис записи идентификаторов можно представить в следующем виде: НАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора {свойство: значение;} 4.htm4.htm

15 4.Свойства элементов Свойства шрифта Свойства шрифта могут описывать элементы, содержащие текст. Среди них можно перечислить такие, как А, В, BODY, CAPTION, DD, DL, DT, EM,H1-H6, I, LI, P, SMALL, STRIKE, STRONG, TD, TH, U и некоторые другие.

16 Свойства шрифта font-family; font-size; font-weight; font-variant font-style Например, H1 {font-size: 30pt;} STRIKE {font-weight: bold:} CAPTION {font-variant: small-caps:} ЕМ {font-style: italic:}

17 Свойства текста Свойства текста применяются практически ко всем элементам CSS, которые могут включать в себя или описывать текст text-align; text-decoration; text-indent; line-height; letter-spacing; vertical-align; text-transform; Например, Р {text-align: justify;} A {text-decoration: none:} A: visited{color:2F4F4F;} Р {text-indent: 30pt;} Р { line-height: 5px;} Р { letter-spacing: Зрх:} IMG {vertical-align: top- text;} CAPTION {text- transform: capitalize;}

18 Свойства цвета и фона Color; background-color; background-image; background-repeat; background-position; background-attachment Например, SMALL {color: red:} H1 { background-color: #f00000;} BODY {background-image: URL(/images/picture.gif):} BODY {background-repeat: no-repeat:} BODY {background-position: 30cm 0cm;} TD {background-position: middle:}

19 Свойства границ Свойства margin-left, margin-right, margin-top и margin- bottom определяют значения отступов вокруг содержащего их элемента в пикселах, сантиметрах или миллиметрах соответственно слева, справа, сверху и снизу. Данные свойства могут применяться совместно с элементами изображений, абзацев, таблиц, любых других компонентов Свойства padding-left, padding-right, padding-top и padding- bottom описывают значения отступов от видимых рамок объектов HTML, например таблиц. Свойства border-top-width, border-bottom-width, border- right-width и border-left-width определяют толщину видимого обрамления объектов, например таблиц и их ячеек,

20 Свойства списков Свойства списков применяются для настройки отображения элементов нумерованных и маркированных списков, определяемых в коде HTML тегом. list-style-type; list-style-image; list-style-position; Например, LI {list-style-type: square:} LI {list-style-image: URL(/images/marker.gif);} LI { list-style-position: inside:}

21 Вспомогательные свойства элементов Width; height ; float clear white-space display Например, IMG { height: 80%; width: 120px: } TD {float: left;} IMG {clear: both;} Р {white-space: рrе;} IMG {display: block;}

22 Контрольные вопросы: 1.Что такое CSS? Назначение CSS. 2.Каков общий синтаксис записи стилей? 3.Что называется селектором, а что определением при описании CSS? 4. Поясните принцип наследования в CSS. 5.Каковы способы определения стилей в CSS? 6.Поясните свойства элементов CSS.