Применение таблиц стилей

Как взаимодействуют правила, определяющие форматирование одинаковых элементов и заданные в разных таблицах? Может, например, оказаться, что в связанной таблице цвет шрифта определен как черный, в импортируемой как красный, а во встроенной как синий, – какой цвет шрифта будет иметь документ, отображаемый в браузере? Подобные конфликты разрешаются с использованием принципа приоритетности разных таблиц стилей. Таблицы выстраиваются в цепочку приоритетности (от низшего к наивысшему), образуют "каскад", по которому документ "прокатывается" и постепенно форматируется на основе правил таблиц стилей, образующих "каскад".

Говорят, что правила, определенные в таблице с большим приоритетом, имеют больший вес.

Приоритетность импортируемых таблиц стилей зависит от порядка их импортирования в документ. В таблице стилей можно использовать несколько операторов @import. Каждый последующий оператор импортирует таблицу стилей с более высоким приоритетом по отношению к предыдущим, и поэтому ее правила имеют больший вес.

Любые правила, определенные непосредственно в самом документе, перекрывают правила импортируемых таблиц стилей.

Можно увеличить вес правила с помощью значения important, которое задается после значения свойства, вес которого необходимо увеличить:

H1 {color: red! important; background: white! important}

Для определения значения комбинации элемент-свойство используется следующий механизм:

1. Ищутся все определения, применяемые к рассматриваемой комбинации элемент-свойство. Определения применяются, только если селектор соответствует рассматриваемому элементу. Если невозможно применить ни одно определение, используется наследуемое значение свойства. Если не определено наследуемое значение (это справедливо в случае элементов HTML и свойств, которые не могут наследоваться), используется начальное значение.

2. Определения сортируются по явно заданным весам: определения со значением 'important' имеют больший вес по сравнению с нормальным (без увеличения веса) определением.

3. Определения сортируются по своему происхождению: авторские таблицы стилей перекрывают таблицы стилей читателя, которые, в свою очередь, перекрывают установки значений свойств по умолчанию браузера. Импортируемая таблица стилей имеет одинаковое происхождение с таблицей, из которой она импортирована.

4. Определения сортируются по специфичности селектора: селектор с большим числом специфичности перекрывает селектор с меньшим числом специфичности. Для определения числа специфичности селектора определения подсчитывают количество атрибутов ID (a), атрибутов CLASS (b) и названий тегов (c) в селекторе. Составляется число 'abc', которое и определяет специфичность данного определения. Несколько примеров, взятых из рекомендаций REC-CSS1-19990111, приведено ниже:

LI {...} /* a=0 b=0 c=1 --> специфичность = 1 */

UL LI {...} /* a=0 b=0 c=2 --> специфичность = 2 */

UL OL LI {...} /* a=0 b=0 c=3 --> специфичность = 3 */

LI.red {...} /* a=0 b=1 c=1 --> специфичность = 11 */

UL OL LI.red {...} /* a=0 b=1 c=3 --> специфичность = 13 */

#x34y {...} /* a=1 b=0 c=0 --> специфичность = 100 */

5. Определения сортируются по порядку их задания в таблице стилей: если два правила имеют одинаковый вес, заданное позже правило имеет приоритет. Правила в импортированных таблицах стилей считаются задаваемыми до любого правила в таблице стилей, из которой она импортируется.

Можно просто запомнить следующую приоритетность правил (от низшего к высшему): связанная таблица стилей, импортируемая таблица стилей, правило с элементом HTML в качестве селектора, правило с атрибутом CLASS в качестве селектора, правило с атрибутом ID в качестве селектора, встроенное в тег HTML правило.