Принцип наследования

Применение CSS к отображению HTML-документов основано на правилах наследования и каскадирования. HTML-документ имеет иерархическую структуру. В вершине этой структуры стоит элемент HTML, который содержит дочерние элементы HEAD и BODY. Те, в свою очередь, включают элементы следующего уровня. Например, элемент HEADсодержит TITLEи STYLE, а элемент BODY включает Hx, P, DIV, IMG и многие другие. Отметим, что дочерние элементы наследуют свойства, установленные для родительского элемента. Для всех HTML-элементов родительским является элемент BODY. Поэтому можно назначать стили, начиная с родительских элементов, постепенно опускаясь к вложенным элементам более низких уровней.

Ниже представлен пример наследования свойств и его отображение в браузере (рис. 5.2).

< HTML>

< HEAD>

< TITLE> Наследование < /TITLE>

< STYLE type=" text/css" >

BODY {

background: white;

color: black;

font-family: sans-serif;

font-size: 10 pt;

}

H1, H2 {

color: green;

}

< /STYLE>

< /HEAD>

< BODY>

< H1> Каскадные таблицы стилей – это < I> Круто! < /I >

< /H1>

< H2> Каскады стилей< /H2>

< H3> Приоритеты стилей< /H3>

< /BODY>

< /HTML>

Рис. 5.2. Результат отображения в браузере примера с наследованием свойств

В данном примере заголовки первого (Н1) и второго (Н2) уровней отобразятся зеленым цветом, как указано в таблице стилей. Причем слово «Круто!» отобразится курсивом зеленого цвета, так как элемент < I> унаследовал присвоенный тэгу < H1 > свойства, потому что для < I> никакой цветовой спецификации не было задано. Заголовок третьего уровня унаследовал свойства элемента BODYи отобразился черным цветом, так как в элементе BODYбыл указан черный цвет.

Применение правил наследования стилей может быть проблематичным в некоторых моделях браузеров и в случае HTML-документов со сложной структурой. Поэтому для надежного отображения вложенных элементов лучше задать точное применение стилевых свойств. Это осуществляется с помощью селекторов потомков, называемых также контекстными селекторами. Дочерние элементы называются потомками, а родительские элементы – предками. Селекторы потомков предназначены для сопоставления стилевых правил HTML-элементам соответственно порядку их вложения в родительские элементы. То есть селектор потомков присваивает стиль элементов с учетом их размещения в структуре документа.

Селектор потомков состоит из нескольких селекторов, отделенных друг от друга пробелом. CSS-правило с селектором потомков применяется к элементу, который записан последним (самый правый) в селекторе.

< STYLE type =" text/css" >

TABLE TH BIG {color: blue; }

< /STYLE>

В данном примере синим цветом отобразится шрифт элементов BIG, которые расположены в ячейках заголовков (TH) таблицы (TABLE).

Может возникнуть и ситуация конфликта значений, в которых браузеру нужно выбрать одно из множества значений свойств, определяемое несколькими таблицами стилей. Чтобы разрешить конфликты между стилями, вводятся определенные правила каскадирования, или приоритета. Каждый уровень свойств характеризуется своим приоритетом. Наиболее низким приоритетом обладает стиль браузера. За ним в порядке возрастания следует стиль, заданный пользователем. Наиболее высоким приоритетом является тот, который задается разработчиком web-страниц.

Кроме того, существует схема приоритетов внутри самого web-документа. Свойства, присваиваемые атрибутом STYLE, имеют самый высокий приоритет. На одну ступень ниже идут селекторы потомков. Еще ниже идут селекторы. За ними следуют наследуемые свойства. Самым низким приоритетом обладают начальные значения (принимаемые по умолчанию) (рис. 5.3).

< HTML>

< HEAD>

< TITLE> Приоритеты стилей < /TITLE>

< STYLE TYPE=" text/css" >

BODY H2{

font-family: Arial;

font-size: 10pt;

text-align: right;

color: red;

}

< /STYLE> < /HEAD> < BODY>

< H2> Каскадные таблицы стилей – это Круто! < /H2>

< H2 STYLE=" font-family: Courier New; font-size: 17pt;

text-align: center; color: green; " >

Каскады стилей< /H2>

< H3> Приоритеты стилей< /H3>

< /BODY> < /HTML>

Рис. 5.3. Результат отображения примера

с применением приоритета стилей

В данном примере свойство текста верхнего заголовка Н2 задается селектором потомков (значение шрифта Arialразмером 10 пунктов с выравниванием по правому краю). А нижний заголовок Н2 будет отцентрирован и отображен шрифтом Courier New, зеленым цветом и размером в 17 пунктов, так как заданное селектором потомков свойство отменяется атрибутом STYLEнижнего заголовка.