Урок 3. Каскадирование.

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

модульная структура

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

  @import url(http://www.style.org/pastoral);
  @import url(http://www.style.org/marine);

  H1 { color: red }     /* переопределить
             импортированные таблицы */

баланс автор/читатель

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

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

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

В CSS1 все определения '@import' должны помещаться в начало таблицы стилей перед всеми определениями. Это создает наглядность в переопределении правил в импортированных таблицах стилей.

'important'

Дизайнеры таблиц стилей могут увеличить веса определений:

  H1 { color: black ! important; background:
                         white ! important }
  P  { font-size: 12pt ! important; 
                         font-style: italic }

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

Читательское правило с повышенным с помощью 'important' весом определения переопределяет правило автора с нормальным весом. А авторское правило с повышенным весом определения переопределяет читательское правило с повышенным весом определения.

Порядок каскадирования

Наличие конфликтов правил присуще механизму CSS. Чтобы найти значение комбинации элемент/свойство, необходимо следовать следующему алгоритму:

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

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

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

4. Отсортировать по специфичности селектора: более специфичные селекторы переопределяют менее специфичные. Для определения значения специфичности необходимо сосчитать количество атрибутов ID в селекторе (a), количество атрибутов с классом в селекторе (b) и количество имен тэгов в селекторе (c). Объединение трех чисел (по системе счисления с большим основанием) дает искомое значение специфичности. Некоторые примеры:

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. Отсортировать в порядке определения: если два правила имеют одинаковый вес, указанное позднее побеждает. Правила в импортированной таблице стилей считаются предшествующими любому правилу внутри самой таблицы стилей.

Поиск значения свойства может быть прекращен, если одно правило имеет больший вес чем остальные правила, соответствующие той же паре элемент/свойство.

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

Определение в атрибуте 'STYLE' элемента (см. раздел 1.1) имеет тот же вес, что и определение через ID селектор, определенный в таблице стилей:

<STYLE TYPE="text/css">
  #x97z { color: blue }
</STYLE>

<P ID=x97z STYLE="color: red">

Но в данном примере элемент 'P' будет красным. Так как специфичность обоих определений одинакова, определение в атрибуте 'STYLE' переопределит определение через ID согласно правилу 5.

UA могут по-прежнему поддерживать стилистические атрибуты HTML, например 'ALIGN'. Если так, то эти атрибуты должны переводиться в соответствующее правило CSS со специфичностью равной 1. Должно считаться, что такие правила описаны в начале авторской таблицы стилей и могут быть переопределены нижеследующими правилами в таблице стилей. В переходный период такая политика позволит стилистическим атрибутам сосуществовать с таблицей стилей.