Каскадность таблиц стилей

Иногда может возникнуть конфликт правил CSS, который непременно отразится на отображении документа. Разрешить этот конфликт можно зная о том, что каждое стилевое правило имеет свой вес. По умолчанию вес пользовательских правил меньше, чем вес правил разработчика документа. То есть при возникновении конфликта между таблицей стилей полученного документа и собственной таблицы стилей пользователя, будут применяться правила, поступившие с документом. Большинство правил разработчика и пользователя перекрывают значения, установленные в браузере по умолчанию. Рассмотрим порядок применения правил в CSS.

В CSS несколько таблиц стилей могут применяться к документу одновременно. Две основных черты этой особенности: модульность и баланс разработчик/пользователь.

Модульность:
Разработчик таблицы стилей может комбинировать несколько таблиц с целью уменьшения их избыточности:


	@import url(http://www.xhtml.ru/style1.css);
	@import url(http://www.xhtml.ru/style2.css);
	H1 { color: red } /* перекроет импортированные стили */

Баланс разработчик/пользователь:
В большинстве случаев и пользователи и разработчики могут оказывать влияние на отображение документа с помощью таблиц стилей. Для этого они используют одинаковый язык таблиц стилей, таким образом отражая основную особенность web: все могут что-то публиковать. Браузеры дают пользователю возможность использовать собственные таблицы стилей.

Иногда может возникнуть конфликт правил CSS, который непременно отразится на отображении документа. Разрешить этот конфликт можно зная о том, что каждое стилевое правило имеет свой вес. По умолчанию вес пользовательских правил меньше, чем вес правил разработчика документа. То есть при возникновении конфликта между таблицей стилей полученного документа и собственной таблицы стилей пользователя, будут применяться правила, поступившие с документом. Большинство правил разработчика и пользователя перекрывают значения, установленные в браузере по умолчанию. Рассмотрим порядок применения правил в CSS.

Импортированные таблицы стилей определяют правила в том порядке, в котором они импортируются, таким образом правила описанные ниже перекрывают правила описанные ранее. Любые правила, описанные в самой таблице стилей перекрывают правила из импортированной таблицы, то есть они имеют больший вес по сравнению с импортированными. Импортированные таблицы стилей могут также и сами импортировать таблицы стилей, правила которых при этом сами же будут перекрывать.

В CSS все заявления "@import" должны размещаться в самом начале таблицы стилей до объявлений стилевых правил. Это сделано для того, чтобы было легче понять какие правила внутри таблицы стилей перекрывают правила из импортированной таблицы.

Каскадный порядок

Пересекающиеся правила свойственны механизму CSS. Для поиска значения для комбинации элемент/свойство можно применить следующий алгоритм:

1. Поиск всех объявлений правил, применяемых к паре элемент/свойство.
Объявление применяется если селектор сопоставлен элементу. Если нет объявления, используется наследуемое значение. Если нет наследуемого значения, используется начальное для элемента значение.

2. Сортировка объявлений правил по весомости.
Правила могут быть обозначены как более важные, это можно установить с помощью "! important".

Например: H1 { color: black ! important; background: white ! important }

Объявления, отмеченные "! important" имеют больший вес по сравнению с такими же, но не отмеченными объявлениями.

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

4. Сортировка по специфичности селектора.
Более специфичные селекторы будут перекрывать общие селекторы.
Специфичность определяется следующим образом:

  1. Вычисление атрибута ID в селекторе.
  2. Вычисление атрибута CLASSв селекторе.
  3. Вычисление HTML-тэга в селекторе.

Собираются три числа, получается число из трех цифр, которое и определяет специфичность.
Например:



        LI            {...}  /* a=0 b=0 c=1 -> специфичность = 001 */
        UL LI         {...}  /* a=0 b=0 c=2 -> специфичность = 002 */
        UL OL LI      {...}  /* a=0 b=0 c=3 -> специфичность = 003 */
        LI.red        {...}  /* a=0 b=1 c=1 -> специфичность = 011 */
        UL OL LI.red  {...}  /* a=0 b=1 c=3 -> специфичность = 013 */ 
        #Content      {...}  /* a=1 b=0 c=0 -> специфичность = 100 */ 

Псевдо-элементы и псевдо-классы считаются как нормальные элементы и классы соответственно.

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



Много комментариев (3) к “Каскадность таблиц стилей”

  1. Владимир :

    Немного заумно…


  2. Adamov Boris :

    Плохо, что не упомянуто про наследование. Там ситуация немного сложнее и, если я не ошибаюсь, отличается в зависимости от браузера.


  3. Алексей :

    Пытался проследовать поэтапности изложения… запутался окончательно. А можено прочитать где-нибудь тоже самое, но в более… подробном виде?



22 queries 0.178 seconds.