К одному документу можно присоединить несколько таблиц стилей, которые одновременно будут влиять на представление документа в окне браузера.
Этот принцип является основополагающим принципом применения каскадных таблиц стилей, и можно указать на две причины, по которым он рекомендован группой разработчиков Консорциума W3:
1. Реализация модульности — разработчики таблиц стилей могут комбинировать таблицы стилей, каждая из которых отвечает за определенный этап форматирования документа. Например, в одной таблице можно определить все правила форматирования шрифтов, во второй – правила позиционирования элементов и т. д.
2. Соблюдение равновесия между авторской разработкой и пристрастиями читателя — и авторы страниц, и читатели могут влиять на представление страницы через таблицы стилей. Пользователь может определить собственные правила отображения элементов документа в своих личных таблицах стилей, а браузер, на основании механизма приоритетности, будет использовать те или иные правила из таблиц пользователя или автора страницы.
Но как взаимодействуют правила, определяющие форматирование одинаковых элементов и заданные в разных таблицах? Может, например, оказаться, что в связанной таблице цвет шрифта определен как черный, в импортируемой как красный, а во встроенной как синий, — какой цвет шрифта будет иметь документ, отображаемый в браузере? Подобные конфликты разрешаются с использованием принципа приоритетности разных таблиц стилей. Таблицы выстраиваются в цепочку приоритетности (от низшего к наивысшему), образуют каскад, по которому документ "прокатывается" и постепенно форматируется на основе правил таблиц стилей, образующих каскад.
Говорят, что правила, определенные в таблице с большим приоритетом, имеют больший вес. По умолчанию веса правил читателя всегда меньше весов правил, определенных в таблицах разработчика документа. То есть, если возникает конфликт между правилами, определенными в документе, и правилами, определенными в личных таблицах стилей пользователя, применяться будут первые. Правила читателя и автора всегда перекрывают установки по умолчанию значений свойств используемого браузера.
Приоритетность импортируемых таблиц стилей зависит от порядка их импортирования в документ. В таблице стилей можно использовать несколько операторов @import. Каждый последующий оператор импортирует таблицу стилей с более высоким приоритетом по отношению к предыдущим, и поэтому ее правила имеют больший вес. Импортируемые таблицы стилей сами могут импортировать и перекрывать другие таблицы.
Любые правила, определенные непосредственно в самом документе, перекрывают правила импортируемых таблиц стилей. Обычно все операторы @import задаются в таблице стилей до определений правил, а это как раз и показывает, что правила самой таблицы перекрывают правила импортируемых таблиц.
Можно увеличить вес правила с помощью значения important, которое задается после значения свойства, вес которого необходимо увеличить:
HI {color: red ! important; background: white ! important}
В приведенном примере оба свойства имеют увеличенный вес.
Правило читателя со значением important перекрывает аналогичное правило автора, заданное без увеличения веса. Авторское правило со значением important перекрывает аналогичное правило читателя с увеличенным весом.
Разрешение конфликтов осуществляется на основе внутреннего механизма, реализованного в каскадных таблицах стилей. Для определения значения комбинации элемент-свойство используется следующий механизм:
1. Ищутся все определения, применяемые к рассматриваемой комбинации элемент-свойство. Определения применяются, только если селектор соответствует рассматриваемому элементу. Если невозможно применить ни одно определение, используется наследуемое значение свойства. Если не определено наследуемое значение (это справедливо в случае элементов HTML и свойств, которые не могут наследоваться), используется начальное значение.
2. Определения сортируются по явно заданным весам: определения со значением important имеют больший вес по сравнению с нормальным (без увеличения веса) определением.
3. Определения сортируются по своему происхождению: авторские таблицы стилей перекрывают таблицы стилей читателя, которые, в свою очередь, перекрывают установки значений свойств по умолчанию браузера. Импортируемая таблица стилей имеет одинаковое происхождение с таблицей, из которой она импортирована.
4. Определения сортируются по специфичности селектора: селектор с большим числом специфичности перекрывает селектор с меньшим числом специфичности. Для определения числа специфичности селектора определения подсчитывают количество параметров ID (а), параметров CLASS (b) и названий тэгов (с) в селекторе. Составляется число abc, которое и определяет специфичность данного определения; Несколько примеров, взятых из рекомендаций REC-CSS1-19990111, приведено ниже:
LI {...}/* а=0 b=0 с=1 —> специфичность = 1 */
UL LI (...}/* а=0 b =0 с=2 —> специфичность = 2 */
UL OL LI {...}/* а=0 b =0 с=3 —> специфичность = 3 */
Псевдоклассы и псевдоэлементы считаются как нормальные элементы и классы, соответственно.
5. Определения сортируются по порядку их задания в таблице стилей: если два правила имеют одинаковый вес, заданное позже правило имеет приоритет. Правила в импортированных таблицах стилей считаются задаваемыми до любого правила в таблице стилей, из которой она импортируется.
При определенном навыке применение алгоритма приоритетности правил не представляет труда. Для новичков можно просто запомнить следующую приоритетность правил (от низшего к высшему): связанная таблица стилей, импортируемая таблица стилей, правило с элементом HTML в качестве селектора, правило с параметром CLASS в качестве селектора, правило с параметром ID в качестве селектора, встроенное в тэг HTML правило.
