Содержание
После того, как ПА разобрал документ и сконструировал дерево документа, он обязан назначить каждому элементу дерева значение для каждого свойства, применимое для целевого типа носителя.
Конечное значение свойства является результатом трёхступенчатого процесса вычисления: значение определяется по спецификации ("специфицированное значение"), затем, если необходимо, выводится абсолютное значение ("вычисленное значение") и наконец - трансформируется в соответствии с ограничениями локальной среды ("реальное значение").
ПА обязаны сначала назначить свойству специфицированное значение на основе следующих механизмов (по приоритету):
Не имея предков, корневой элемент дерева документа не может использовать значения, унаследованные от элемента-предка; в этом случае используется, если необходимо, начальное значение.
Специфицированные значения могут быть абсолютными (т.е. не специфицированными относительно других значений: 'red' или '2mm') или относительными (т.е. специфицированными относительно других значений: 'auto', '2em', '12%'). Для абсолютных значений не требуется никаких вычислений, чтобы найти вычисленное значение.
Относительные значения, с другой стороны, обязаны быть трансформированы в вычисленные значения: процентные рассчитываются относительно данного значения-ссылки (каждое свойство определяет соответствующее значение), значения с указанием единиц измерения (em, ex, px) должны быть сделаны абсолютными путём применения подходящих по размеру шрифтов или в пикселах, значения 'auto' должны высчитываться по формулам, данным для каждого свойства, ключевые слова ('smaller', 'bolder', 'inherit') должны быть замещены в соответствии со своими определениями.
В большинстве случаев элементы наследуют вычисленные значения. Однако есть некоторые свойства, чьи специфицированные значения могут наследоваться (например, числовое значение свойства 'line-height'). В тех случаях , когда дочерние элементы не наследуют вычисленные значения, это описывается в определении свойства.
Вычисленное значение в принципе готово для использования, но ПА могут не иметь возможности использовать такое значение в имеющемся окружении. Например, ПА могут иметь возможность представлять рамки лишь размером в целое число пикселов и, следовательно, должны сделать приближение до вычисленной ширины. Реальное значение - это вычисленное значение после выполнения некоторого приближения.
Некоторые значения наследуются потомками элемента в дереве документа. Каждое свойство определяет, наследуется оно или нет.
Предположим, имеется элемент H1 с выделенным элементом (EM) внутри:
<H1>The headline <EM>is</EM> important!</H1>
Если цвет элементу EM не назначен, выделенное "is" будет наследовать цвет элемента-предка, и, поскольку H1 имеет голубой цвет, элемент EM будет, соответственно, голубым.
Чтобы установить свойство стиля "по умолчанию" в документе, авторы могут установить это свойство в корне дерева документа. В HTML, например, эту функцию могут выполнить элементы HTML или BODY. Заметьте, что это будет работать, даже если автор опустит тэг BODY в тексте HTML, поскольку разборщик HTML вставит отсутствующие тэги.
Например, поскольку свойство 'color' наследуется, все потомки элемента BODY будут наследовать цвет 'black':
BODY { color: black; }
Специфицированные процентные значения не наследуются, а вычисленные значения - наследуются.
В данной таблице:
BODY { font-size: 10pt }
H1 { font-size: 120% }
и в этом фрагменте документа:
<BODY> <H1>A <EM>large</EM> heading</H1> </BODY>
свойство 'font-size' элемента H1 будет иметь вычисленное значение'12pt' (120% от 10pt, значения-предка). Поскольку значение свойства 'font-size' наследуется, элемент EM также получит вычисленное значение '12pt'. Если ПА не имеет доступного шрифта в 12pt, реальное значение 'font-size' и для H1, и для EM может быть, например, '11pt'.
Каждое свойство может иметь специфицированное значение 'inherit', которое означает, что для данного элемента свойство принимает то же самое вычисленное значение, что и свойство элемента-предка. Наследуемое значение, которое как правило используется только как возвращаемое значение, может быть усилено путём явной установки 'inherit'.
В следующем примере свойства 'color' и 'background' установлены в элементе BODY. Во всех других элементах значение 'color' будет наследоваться, а фон будет прозрачным. Если эти правила являются частью пользовательской таблицы стилей, чёрный текст на белом фоне будет форсирован по всему документу.
BODY {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent;
}
Правило '@import' даёт пользователям возможность импортировать правила стиля из других таблиц стилей. Любое правило @import обязано предшествовать всем наборам правил в таблице стилей. После ключевого слова '@import' обязан следовать URI подключаемой таблицы стилей. Допустима также строка; она будет интерпретироваться так, как будто имеет вокруг себя url(...).
Следующие строки эквивалентны по значению и обе иллюстрируют синтаксис '@import' (одно с "url()", а другое - с простой строкой):
@import "mystyle.css";
@import url("mystyle.css");
Поскольку ПА могут исключать запрос ресурсов неподдерживаемых типов носителя, авторы могут специфицировать медиа-зависимые правила @import. Эти условные @import специфицируют список разделённых запятыми типов носителя после URI.
Следующие правила имеют такой же эффект, как если бы импортированная таблица стилей была перенесена в правило @media для того же типа, но данные правила позволят исключить бесполезную нагрузку на ПА.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
При отсутствии любых типов носителя, импорт является безусловным. Спецификация 'all' для носителя имеет тот же эффект.
Таблицы стилей могут иметь три независимых источника: автор, пользователь и ПА.
Учтите, что таблица стилей по умолчанию может быть изменена, если системные настройки изменены пользователем (например, системные цвета). Однако, из-за ограничений конкретной реализации ПА, может оказаться невозможным изменить значения в таблице стилей по умолчанию.
Области видимости таблиц стилей из этих трёх источников будут перекрываться и взаимодействовать в соответствии с каскадом.
Каскад CSS назначает вес каждому правилу стиля. Если применяются несколько правил, одно, имеющее больший вес, будет иметь приоритет.
По умолчанию правила авторской таблицы стилей имеют больший вес, чем правила таблицы стилей пользователя. Преимущество зарезервировано, однако, для правил "!important". Все правила пользователя и автора имеют больший вес, чем правила таблицы стилей по умолчанию в ПА.
Импортируемы таблицы стилей также каскадируются, и их вес зависит от порядка импортирования. Правила, специфицированные в имеющейся таблице стилей, переопределяют правила, импортируемые из других таблиц. Импортированные таблицы стилей сами могут импортировать и переопределять другие таблицы стилей рекурсивно, и тогда применяются те же правила приоритета.
Чтобы найти значение для комбинации элемент/свойство, ПА обязаны применять следующий порядок сортировки:
Независимо от установок "!important" индивидуальных объявлений, эта стратегия даёт авторским таблицам стилей больший вес, чем таблицам читателя. Это тем более важно, поскольку ПА предоставляют пользователю возможность отключить влияние определённых таблиц стилей, например, в выпадающих меню.
CSS пытается создать баланс между авторскими и пользовательскими таблицами стилей. По умолчанию правила авторской таблицы стилей переопределяют правила пользовательской таблицы (см. каскадное правило 3).
Однако, для баланса, объявление "!important" (ключевое слово "!" и "important" следуют за объявлением) имеет преимущество перед нормальной декларацией. И авторские, и пользовательские таблицы стилей могут содержать объявление "!important", и пользовательские правила "!important" переопределяют авторские "!important". Это свойство CSS улучшает доступность документов путём предоставления пользователям со специфическими требованиями (крупные шрифты, комбинации цветов и т.п.) контроля над представлением.
Примечание. Это семантическое изменение в сравнении с CSS1. В CSS1 авторские правила "!important" имели приоритет перед пользовательскими правилами "!important".
Объявление сокращённого свойства (например, 'background') как "!important" эквивалентно объявлению всех его подсвойств как "!important".
Первое правило пользовательской таблицы стилей в данном примере содержит объявление "!important", которое переопределяет соответствующее объявление в авторской таблице стилей. Второе объявление также будет иметь приоритет как помеченное "!important". Однако третье правило пользовательской таблицы стилей - не "!important" - и поэтому будет отброшено в пользу второго правила авторской таблицы стилей (которое устанавливает стиль сокращённого свойства). Таким образом, третье авторское правило будет отброшено в пользу второго авторского правила, поскольку второе правило - "!important". Это показывает, что объявления "!important" имеют действие также и внутри авторских таблиц стилей.
/* Из пользовательской таблицы стилей */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }
/* Из авторской таблицы стилей */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
Специфика селектора высчитывается так:
Конкатенация трёх чисел a-b-c (в числовой системе с большой базой) дают специфику.
* {} /* a=0 b=0 c=0 -> специфика = 0 */
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 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> специфика = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> специфика = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> специфика = 21 */
#x34y {} /* a=1 b=0 c=0 -> специфика = 100 */
В HTML значения атрибута "style" элемента являются правилами таблицы стилей. Эти правила не имеют селекторов, но для целей шага 3 каскадного алгоритма они рассматриваются как имеющие селектор ID (специфика: a=1, b=0, c=0). Для целей шага 4 они рассматриваются после всех других правил.
<HEAD>
<STYLE type="text/css">
#x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>
В данном примере цвет элемента P будет красным. Хотя специфика - одна и та же для обоих объявлений, объявление атрибута "style" переопределит объявление в элементе STYLE в соответствии с каскадным правилом 4.
ПА могут предпочесть подсказки (hints) из других источников, а не из таблиц стилей, например, элемент FONT или атрибут "align" в HTML. Если это так, не-CSS подсказки обязаны быть переведены в соответствующие правила CSS со спецификой=0. Принимается, что правила находятся в начале авторской таблицы стилей и могут быть переопределены последующими правилами таблиц стилей.
Примечание. В фазе переноса эта политика облегчит сосуществование стилистических атрибутов с таблицами стилей.
Примечание. В CSS1 не-CSS подсказки получали специфику=1, а не 0. Это изменение сделано из-за введения универсального селектора, имеющего специфику 0.