Пользовательские агенты не обязаны осуществлять повторное форматирование отображаемого документа из-за переходов, индуцируемых псевдоклассами. Например, в таблице стилей может быть указано, что’font-size’ у активной ссылки больше, чем у неактивной. Поскольку это может привести к изменению положения букв во время выбора пользователем данной ссылки, то агент пользователя может проигнорировать соответствующее правило стиля.
A:link { color: red } /* непросмотренные ссылки */
A:visited { color: blue } /* просмотренные ссылки */
A:hover { color: yellow } /* выбранный, но не активизированный */
/* пользователем элемент */
A:active { color: white } /* активные ссылки */
Псевдоэлемент :first-line используется для применения специальных стилей к первой форматируемой строке абзаца. Например:
P:first-line { text-transform: uppercase }
Представленное выше правило означает "сделать буквы первой строки каждого абзаца заглавными". Однако селектор "P:first-line" не соответствует ни одному реальному элементу HTML. Он сопоставляется псевдоэлементу, которыйконформные агенты пользователей будут помещать в начало каждого абзаца.
Если псевдоэлемент разрывает реальный элемент, то желаемый эффект зачастую может быть достигнут с помощью последовательности функциональных тегов, которая закрывает и повторно открывает этот элемент. Таким образом, если мы используем в предыдущем абзаце элемент SPAN, то получим:
<P><SPAN class="test"> Это довольно длинный абзац HTML-документа,
который будет разбит на несколько строк.</SPAN>
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца.</P>
и пользовательский агент сможет сгенерировать соответствующие начальные и конечные теги для SPAN во время вставки последовательности функциональных тэгов для :first-line.
<P><P:first-line><SPAN class="test"> Это
довольно длинный абзац HTML-документа,
</SPAN></P:first-line><SPAN class="test"> который будет разбит
на несколько строк. </SPAN>
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца. </P>
Псевдоэлемент :first-line может прикрепляться только к элементам уровня блока.
Псевдоэлемент :first-line подобен строковому элементу только с некоторыми ограничениями. К псевдоэлементу :first-line применяются следующие свойства:свойства шрифтов, цветов, фона, ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘vertical-align’, ‘text-transform’, ‘line-height’, ‘text-shadow’ и ‘clear’.
Псевдоэлемент :first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству’float’ присвоено значение ‘none’, в противном случае он аналогичен перемещаемому объекту.
К псевдоэлементам :first-letter применяются следующие свойства: свойства шрифтов, цветов, фона, ‘text-decoration’, ‘vertical-align’ (только если для свойства ‘float’ установлено значение ‘none’), ‘text-transform’, ‘line-height’, свойства полей, полей в ячейке таблицы, рамок, ‘float’, ‘text-shadow’ и ‘clear’.
Таблицы стилей имеют три источника: разработчик, пользователь и агент пользователя.
- Разработчик. Разработчик создает таблицы стилей для исходного документа в соответствии с договоренностями, принятыми в языке документа. Например, в языке HTML таблицы стилей могут быть интегрированы в документ или подключены извне.
- Пользователь. Пользователь может задать информацию о стиле конкретного документа. Например, он может создать файл с таблицей стилей, или агент пользователя может предоставить ему интерфейс, позволяющий сгенерировать пользовательскую таблицу стилей (или работать так, как будто она есть).
- Агент пользователя. Конформные агенты пользователей должны сначала применить таблицу стиля, используемую по умолчанию (или работать так, как будто они это сделали), а затем все остальные таблицы стилей. Таблица стилей, используемая агентом по умолчанию, должна представлять элементы языка документа таким образом, чтобы удовлетворять основным требованиям к их отображению (например, элемент EM языка HTML визуальные агенты отображают курсивом). Информацию о таблице стилей, рекомендуемой для использования по умолчанию в документах на языке HTML 4.0, можно найти в разделе"Пример таблицы стилей для HTML 4.0".
Используемые по умолчанию таблицы стилей могут измениться, если пользователь изменит системные установки (например, системные цвета). Однако вследствие ограничений, накладываемых внутренней реализацией агента пользователя, изменение значений в используемой по умолчанию таблице стилей может быть невозможно.
Области действия таблиц стилей, созданных любым из трех этих субъектов, могут пересекаться, и тогда их взаимодействие осуществляется в соответствии с принципами каскада.
Каскад CSS назначает каждому правилу стиля определенный приоритет. При выполнении нескольких правил преимущество имеет правило с большим приоритетом.
По умолчанию правила в таблицах стилей разработчика имеют больший приоритет, чем правила в пользовательских таблицах стилей. Однако для правил "!important" ситуация противоположна. Все правила пользователей и разработчиков имеют более высокий приоритет, чем правила таблиц стилей, используемых по умолчанию в агенте пользователя.
Кроме того, импортируемые таблицы стилей каскадируются, и их приоритет зависит от порядка импортирования. Правила, определенные в заданной таблице стилей, отменяют правила, импортируемые из других таблиц стилей. Импортируемые таблицы стилей сами могут рекурсивно импортировать и отклонять другие таблицы стилей и применять те же самые правила приоритетов.
Чтобы найти значение для комбинации элемент/свойство, агенты пользователей должны применять следующие правила сортировки:
- Найти все объявления, которые в соответствии с типом конечного устройства применяются к рассматриваемой паре элемент/свойство. Объявление применяется, если рассматриваемому элементу сопоставляется связанный с ним селектор.
- Первичная сортировка объявлений выполняется по приоритету и источнику: что касается обычных объявлений, то таблицы стилей разработчика имеют приоритет над пользовательскими таблицами стилей, которые, в свою очередь, имеют приоритет над таблицей стилей, используемой по умолчанию. Для объявлений "!important" пользовательские таблицы стилей имеют приоритет над таблицами стилей разработчика, которые, в свою очередь, имеют приоритет над таблицей стилей, используемой по умолчанию. Объявления "!important" имеют приоритет над обычными объявлениями. Импортируемая таблица стилей имеет тот же источник (разработчика), что и таблица стилей, в которую она импортирована.
- Вторичная сортировка выполняется по специфичности селектора: более специфичные селекторы имеют приоритет над более общими селекторами. Псевдоэлементы и псевдоклассы считаются обычными элементами и классами, соответственно.
- И наконец, сортировка в соответствии с порядком следования: если два правила имеют одинаковые приоритет, источник и специфичность, то будет использоваться правило, описанное последним. Считается, что правила импортируемых таблиц стилей должны располагаться перед правилами таблицы стилей, в которую осуществляется импорт.
Если не принимать во внимание установку "!important" для отдельных объявлений, то данная стратегия предоставляет таблицам стилей разработчика более высокий приоритет, чем таблицам стилей пользователя. Поэтому важно, чтобы агент предоставлял пользователю возможность отключать определенные таблицы стилей, например, с помощью выпадающего меню.
Специфичность селектора вычисляется следующим образом:
- подсчитывается число атрибутов ID в данном селекторе (= a);
- подсчитывается число других атрибутов и псевдоклассов в данном селекторе (= b);
- подсчитывается число имен элементов в данном селекторе (= c);
- псевдоэлементы игнорируются.
После конкатенации трех чисел 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 */
Одним из важнейших свойств таблиц стилей является то, что они определяют способ представления документа для различных устройств вывода: монитора, синтезатора речи, устройства печати азбуки Брайля, печатных устройств и т.д.
Правило @media определяет список типов устройств (разделенных запятыми), соответствующих набору правил (ограниченных фигурными скобками). Структура правила @media позволяет задавать правила для различных устройств в пределах одной таблицы стилей:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
Тип устройств, определяемый в CSS, именует набор свойств CSS. Агент пользователя, который поддерживает определенный тип устройств, должен уметь использовать все свойства, применяющиеся к данному типу.
Имена, приписываемые типам устройств в CSS, отражают конечные устройства, для которых соответствующие свойства имеют смысл. В следующем списке типов устройств CSS описания, находящиеся в скобках, не являются нормативными. Они только дают представление об устройстве, которое может относиться к данному типу.
all – предназначен для всех устройств.
aural – предназначен для речевых синтезаторов. Подробную информацию можно получить в разделе о звуковых таблицах стилей.
braille – предназначен для устройств чтения азбуки Брайля.
embossed – предназначен для печати азбуки Брайля.
handheld – предназначен для переносимых портативных устройств (небольшие монохромные экраны с ограниченной полосой частот).
print – предназначен для страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати. Информацию о принципах форматирования, характерных только для устройств с постраничной разбивкой, можно получить в разделе обустройствах постраничного вывода.
projection – предназначен для настенных презентаций, например, для проекторов или для печати плакатов. Информацию о принципах форматирования, характерных только для устройств с постраничной разбивкой, можно получить в разделе обустройствах постраничного вывода.
screen – в первую очередь предназначен для цветных дисплеев.
tty – предназначен для устройств, использующих набор символов с фиксированной шириной, например, телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения. Для устройств типа "tty" не следует использоватьпикселы.
tv – предназначен для устройств типа телевизора (для которых характерны низкое разрешение, цветное изображение, ограниченная прокрутка на экране, возможность передачи звука).
Названия типов устройств не зависят от регистра.
Согласно модели визуального форматирования каждый элемент дерева документа порождает произвольное количество (возможно, равное нулю) блоков в соответствии смоделью представления документа в виде блоков. Размещение этих блоков обуславливается:
- размерами и типом блока;
- схемой позиционирования (нормальный поток, перемещаемый объект или абсолютное позиционирование);
- взаимодействиями между элементами в дереве документа;
- внешней информацией (например, размерами области просмотра, собственными размерами изображений и т.п.).
Агенты пользователей, управляющие выводом на устройства с постраничной разбивкой, предоставляют пользователям область просмотра (окно или другую область экрана), с помощью которой пользователи взаимодействуют с документом. Агенты пользователей могут менять положение документа в случае изменения размера области просмотра (см.начальный контейнер). Если область просмотра меньше, чем начальный контейнер документа, агентам следует использовать механизм прокрутки. На каждую область вывода приходится не больше одной области просмотра, но агенты могут использовать несколько областей вывода (т.е. предоставлять несколько альтернативных вариантов отображения одного и того же документа).
В CSS2 положение и размеры блоков вычисляются относительно краев определенной области прямоугольной формы, называемой контейнером. Генерируемые блоки, как правило, являются контейнерами блоков, выступающих в качестве их потомков. В этом случае говорят, что блок "назначает" контейнер своему потомку. Выражение "контейнер блока" обозначает контейнер, в котором находятся рассматриваемый блок, но не контейнер, порожденный этим блоком.
Положение каждого блока задается относительно содержащего его контейнера, но его размеры никак не ограничиваются размерами последнего, так что блок можетвыходить за пределы контейнера.