Правила каскадности и приоритет стилей

Правила каскадности и приоритет стилей

Как мы уже выяснили, на один и тот же элемент Web-страницы могут действовать сразу несколько стилей. Это могут быть стили разных видов (стиль переопределения тега, стилевой класс, комбинированный стиль, встроенный стиль) или определенные в разных таблицах стилей (внешних и внутренней). Такое встречается сплошь и рядом, особенно на Web-страницах со сложным оформлением.

Но как Web-обозреватель определяет, какой именно стиль применить к тому или иному элементу Web-страницы? Мы уже знаем, что в таких случаях действие стилей как бы складывается. Но по каким правилам?

Предположим, что мы создали внешнюю таблицу стилей (листинг 7.8).

Листинг 7.8

redtext { color: #FF0000 }

#bigtext { font-size: large }

EM { color: #00FF00; font-weight: bold }

После этого мы изготовили Web-страницу, содержащую внутреннюю таблицу стилей (листинг 7.9).

Листинг 7.9

<STYLE>

redtext { color: #0000FF } EM { font-size: smaller }

</STYLE>

А в самой Web-странице написали вот такой фрагмент HTML-кода:

<P CLASS="redtext">Это красный текст.</P>

<P ID="bigtext" STYLE="color: #FFFF00">Это большой текст.<P>

<P><EM>Это курсив.</EM></P>

Хорошо видно, что на элементы этой Web-страницы действуют сразу по нескольку стилей. Так, во второй строке кода к тегу <P> привязаны и именованный стиль bigtext, и встроенный стиль. Но этого мало — и внешняя, и внутренняя таблицы стилей содержат определение двух одинаковых стилей — стилевого класса redtext и стиля переопределения тега <EM>!

Так что же мы получим в результате?

Рассмотрим сначала последнюю строку приведенного HTML-кода с тегом <EM>. Сначала Web-обозреватель загрузит, обработает и сохранит в памяти внешнюю таблицу стилей. Затем он обработает внутреннюю таблицу стилей и добавит все содержащиеся в ней определения стилей к уже хранящимся во внешней таблице стилей. Это значит, что стили переопределения тега <EM>, заданные в разных таблицах стилей, будут сложены, и результирующий стиль, написанный на языке CSS, станет таким:

EM { color: #00FF00; font-size: smaller; font-weight: bold }

Именно его и применит Web-обозреватель ко всем тегам <EM>, что присутствуют на Web-странице.

Вторая строка HTML-кода, что содержит тег со встроенным стилем, будет обработана так же. Web-обозреватель добавит к считанному из внешней таблицы стилей определению именованного стиля bigtext определение встроенного стиля. Результирующий стиль, если записать его на языке CSS, будет таким:

#bigtext { color: $FFFF00; font-size: large }

И, наконец, самая трудная задача — первая строка HTML-кода. Поскольку оба определения стилевого класса redtext задают один и тот же параметр — цвет текста (атрибут стиля color) — Web-обозреватель поступит так. Он отменит значение этого атрибута, заданное в стиле из внешней таблицы стилей, и заменит его тем, что задано в стиле из внутренней таблицы стилей. Поскольку, с его точки зрения и с точки зрения стандартов CSS, внутренняя таблица стилей — это та рубашка, что "ближе к телу". И тогда результирующий стиль будет таким:

redtext { color: #0000FF }

Здесь мы столкнулись с тем, что стили разных видов и заданные в разных таблицах стилей имеют разный приоритет. Web-обозреватель руководствуется этим приоритетом, когда формирует в своей памяти окончательные определения стилей.

Теперь познакомимся с правилами, описывающими поведение Web-обозревателя при формировании окончательных стилей. Их еще называют правилами каскадности.

— Внешняя таблица стилей, ссылка на которую (тег <LINK>) встречается в HTML- коде страницы позже, имеет приоритет перед той, ссылка на которую встретилась раньше.

— Внутренняя таблица стилей имеет приоритет перед внешними.

— Встроенные стили имеют приоритет перед любыми стилями, заданными в таблицах стилей.

— Более конкретные стили имеют приоритет перед менее конкретными. Это значит, например, что стилевой класс имеет приоритет перед стилем переопределения тега, поскольку стилевой класс привязывается к конкретным тегам. Точно так же комбинированный стиль имеет приоритет перед стилевым классом.

— Если к тегу привязаны несколько стилевых классов, то те, что указаны правее, имеют приоритет перед указанными левее.