В шестнадцатеричном представлении запись значения RGB имеет следующий формат: символ ‘#’, непосредственно за которым следует три или шесть шестнадцатеричных символов. Значение RGB из трех цифр (#rgb) преобразуется в последовательность из шести цифр (#rrggbb) путем дублирования цифр, а не добавления нулей. Например, #fb0 расширяется до #ffbb00. Поэтому белый цвет (#ffffff) можно указать в более короткой форме (#fff). Более того, при этом исчезает зависимость от цветопередачи дисплея.
В функциональном представлении формат записи значения RGB имеет следующий вид: строка ‘rgb(‘, непосредственно за которой следует список из трех разделенных запятыми вещественных (или целочисленных, или процентных) значений, непосредственно за которыми следует скобка ‘)’. Целочисленное значение 255 эквивалентно процентному значению 100% и шестнадцатеричным значениям F или FF, так что rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Допускаютсяпробелы вокруг числовых значений.
Все цвета, используемые в модели RGB, принадлежат цветовому пространству sRGB. Агенты пользователей могут представлять цвета с разной точностью, но использование sRGB дает возможность однозначного определения цвета, соотносимого с международным стандартом.
Значения углов (в тексте обозначаемые как <угол>) используются в звуковых таблицах стилей.
Значения углов задаются в соответствии со следующим форматом: произвольный символ знака (‘+’ или ‘-‘, знак ‘+’ используется по умолчанию), непосредственно за которым следует<число>, непосредственно за которым следует идентификатор единицы измерения углов.
К идентификаторам единиц измерения углов относятся:
- deg: градусы
- grad: грады
- rad: радианы
Значения углов могут быть отрицательными. Произвольное значение должно преобразовываться агентами пользователей в диапазон от 0 до 360 градусов. Например, значения -10deg и 350deg задают один и тот же угол.
Например, правый угол равен ’90deg’, или ‘100grad’, или ‘1.570796326794897rad’.
Временные значения (в тексте обозначаемые как <время>) используются в звуковых таблицах стилей.
Значения времени задаются в соответствии со следующим форматом: <число>, непосредственно за которым следует идентификатор единицы измерения времени.
К идентификаторам единиц измерения времени относятся:
- ms: миллисекунда
- s: секунда
Значения времени не могут быть отрицательными.
Строки заключаются в двойные или одинарные кавычки. Двойные кавычки не могут быть вложенными друг в друга за исключением тех случаев, когда одни из них кодируются с использованием обратного слэша (например, ‘\"’ или ‘\22’). Аналогичное имеет место и для одинарных кавычек ("\’" или "\27").
"это ‘строка’"
"это \"строка\""
‘это "строка"’
‘это \’строка\”
Символ новой строки не может содержаться непосредственно в самой строке. Чтобы его включить, необходимо использовать комбинацию с обратным слэшем "\A" (шестнадцатеричное число A является кодом символа перевода строки в Unicode и "символа новой строки" в CSS).
Из эстетических и прочих соображений строки могут разбиваться принудительно. В этом случае символ новой строки должен кодироваться с помощью обратного слэша "\". Например, следующие два селектора совершенно идентичны:
A[TITLE="не слишком длин\
ный заголовок"] {/*…*/}
A[TITLE="не слишком длинный заголовок"] {/*…*/}
Селектор представляет собой последовательность из одного или нескольких простых селекторов, между которыми расположены комбинаторы. Комбинаторами могут служить пробелы, символы ">" и "+". Между комбинатором и простыми селекторами может находиться произвольное количество пробелов.
Элементы дерева документа, которые сопоставляются селектору, называются его областями применения. Селектор, состоящий из одного простого селектора, сопоставляется любому элементу, удовлетворяющему требованиям данного селектора. Если к последовательности дополнительно приписать селектор и комбинатор, то это наложит дополнительные требования соответствия. Поэтому областью применения селектора всегда следует считать подмножество элементов, сопоставляемых крайнему справа простому селектору.
К последнему в последовательности простому селектору может быть добавлен один псевдоэлемент. В этом случае информация о стиле будет применяться только к части каждой области применения.
Если в нескольких селекторах используются одни и те же объявления, их можно сгруппировать в список, разделив запятыми.
В данном примере собраны три правила с одинаковыми объявлениями. Таким образом, запись
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
эквивалентна следующей:
H1, H2, H3 { font-family: sans-serif }
Наряду с такой возможностью в CSS предлагаются другие алгоритмы сокращения, включая множественные объявления и свойства стенографического типа.
Универсальный селектор, при написании обозначаемый символом "*", сопоставляется имени элемента любого типа. Он сопоставляется любому одиночному элементу вдереве документа.
Если универсальный селектор является не единственным компонентом простого селектора, то символ "*" может быть опущен. Например, записи:
- *[LANG=fr] и [LANG=fr] эквивалентны.
- *.warning и .warning эквивалентны.
- *#myid и #myid эквивалентны.
Селектор типа сопоставляется названию типа элемента языка документа. Селектор типа сопоставляется каждому экземпляру данного типа в дереве документа.
Следующее правило сопоставляется всем элементам H1 в дереве документа:
H1 { font-family: sans-serif }
Иногда бывает необходимо, чтобы селекторы сопоставлялись элементу, который является потомком некоторого другого элемента в дереве документа (например, элементам EM, содержащимся в элементе H1). Селекторы потомков позволяют устанавливать такие ассоциации в шаблоне. Селектор потомков состоит из двух и более селекторов, разделенныхпробелом. Селектор потомков вида "A B" сопоставим, если элемент B является произвольным потомком некоторого своего предка A.
Например,
H1 { color: red }
EM { color: red }
Несмотря на то, что целью данных правил является акцентирование внимания на некотором фрагменте текста путем изменения его цвета, данный эффект не будет достигнут, если имеет место следующее:
<H1>Данный заголовок <EM>очень</EM> важен</H1>
Следующий селектор:
DIV * P
сопоставляется элементу P, который является потомком второго и более старшего поколения элемента DIV. Обратите внимание на пробелы с обеих сторон звездочки "*".
Селектор, который фигурирует в следующем правиле, объединяющем селекторы потомков и селекторы атрибутов, сопоставляется любому элементу, который, во-первых, имеет заданный атрибут "href" и, во-вторых, находится внутри элемента P, который, в свою очередь, находится внутри элемента DIV:
DIV P *[href]
В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту "class" разработчики могут использовать точку (".") как альтернативу условному обозначению "~=". Таким образом, два выражения HTML "DIV.value" и "DIV[class~=value]" имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки (".").
Например, для всех элементов с class~="pastoral" информацию о стиле можно определить следующим образом:
*.pastoral { color: green } /* все элементы с class~=pastoral */
или просто
.pastoral { color: green } /* все элементы с class~=pastoral */
Следующее правило назначает стиль только элементу H1 с class~="pastoral":
H1.pastoral { color: green } /* элемент H1 с class~=pastoral */
Благодаря этим правилам в следующем примере при первом появлении элементы H1 не будут отображаться зеленым цветом, а при втором появлении будут:
<H1>Не зеленый цвет</H1>
<H1 class="pastoral">Настоящий зеленый цвет</H1>
Для сопоставления подмножеству значений атрибута "class" перед каждым из них, записанных в произвольном порядке, должна следует поставить точку (".").
Например, следующее правило сопоставляется любому элементу P, атрибуту "class" которого в качестве значения назначен список разделенных пробелами значений, включающий слова "pastoral" и "marine":
P.pastoral.marine { color: green }
Это правило сопоставляется, если, например, class="pastoral blue aqua marine" и не сопоставляется, если class="pastoral blue".
Язык документа может содержать атрибуты типа ID. Их отличие от других атрибутов заключается в том, что любые два из них обязательно имеют различные значения. Независимо от языка документа атрибут ID может использоваться для уникальной идентификации элементов. В HTML-документах все атрибуты ID обозначаются "id", а в XML-документах атрибуты ID могут обозначаться по-другому, но для них справедливо то же самое ограничение.
Атрибут ID языка документа позволяет разработчикам назначать идентификатор одному экземпляру элемента в дереве документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ "#", непосредственно за которым следует значение атрибута ID.
Следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно "chapter1":
H1#chapter1 { text-align: center }
В следующем примере правило стиля сопоставляется элементу, у которого значение атрибута ID равно "z98y". Т.е. это правило будет сопоставляться элементу P:
<HEAD>
<TITLE>Match P</TITLE>
<STYLE type="text/css">
*#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Разреженный текст</P>
</BODY>
Однако в следующем примере это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно "z98y". В этом примере данное правило не сопоставляется элементу P:
<HEAD>
<TITLE>Match H1 only</TITLE>
<STYLE type="text/css">
H1#z98y { letter-spacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Разреженный текст</P>
</BODY>
ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе, в терминах каскада селектор #p123 более специфичен, чем [ID=p123].
В языке CSS2 стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве документа. В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда из-за структуры дерева документа она не позволяет реализовать некоторые устоявшиеся сценарии построения публикации. Например, в HTML 4.0 (см. [HTML40]) нет элемента, который бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS, который бы мог указывать на нее.
В CSS вводится представление о псевдоэлементах и псевдоклассах, позволяющих осуществлять форматирование на основании информации, не включенной в дерево документа.
- Псевдоэлементы формируют абстрактные представления о дереве документа в дополнение к тем, которые определяются языком документа. Например, в языках, используемых для создания документов, не предусмотрены алгоритмы доступа к первой букве или первой строке содержимого элемента. Псевдоэлементы CSS позволяют разработчикам таблиц стилей обращаться к этим объектам, доступ к которым нельзя получить другим способом. Псевдоэлементы предоставляют разработчикам таблиц стилей различные способы назначения стиля содержимому, не существующему в исходном документе (например, псевдоэлементы:before и :after предоставляют доступ к генерируемому содержимому).
- Псевдоклассы позволяют осуществлять классификацию элементов по их характеристикам, которые не являются именем, атрибутом или содержимым и не могут быть получены из дерева документа. Псевдоклассы могут быть динамическими в том смысле, что элемент может приобрести псевдокласс или лишиться его во время работы пользователя с этим документом. Исключение составляет псевдокласс’:first-child’, который может быть выведен из дерева документа.
Ни псевдоэлементы, ни псевдоклассы не отображаются в исходном документе или дереве документа.
Псевдоклассы могут располагаться в любом месте селекторов, а псевдоэлементы могут находиться только после области применения некоторого селектора.
Имена псевдокласов и псевдоэлементов учитывают регистр.
Некоторые псевдоклассы являются взаимоисключающими, а другие можно применять одновременно к одному и тому же элементу. В случае конфликта правил результат определяется принятымпорядком каскадирования.
Конформные агенты пользователей HTML могут либо игнорировать все правила, которые определяют селекторы, содержащие :first-line или :first-letter, либо поддержать только некоторую часть свойств, обусловленных использованием псевдоэлементов.
Обычно агенты пользователей по-разному отображают просмотренные и непросмотренные ссылки. В CSS предусмотрены псевдоклассы ‘:link’ и ‘:visited’ для различения этих типов ссылок:
- Псевдокласс :link применяется, если ссылка не была просмотрена.
- Псевдокласс :visited применяется, если ссылка была просмотрена пользователем.
Эти два состояния являются взаимоисключающими.
Язык документа определяет элементы, служащие точками привязки гиперссылки. Например, в HTML 4.0 псевдоклассы ссылок применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS2 эквивалентны:
A:link { color: red }
:link { color: red }
Если следующая ссылка:
<A class="external" href="http://out.side/">external link</A>
была просмотрена, то, согласно правилу:
A.external:visited { color: blue }
она будет представляться синим цветом.
Иногда интерактивные агенты пользователей изменяют представление документа после выполнения пользователем некоторых действий. В CSS предусмотрены три псевдокласса для наиболее часто встречающихся случаев:
- Псевдокласс :hover применяется, когда пользователь (с помощью некоторого указывающего устройства) выделяет элемент, но не активизирует его. Например, визуальный агент пользователя может применять этот псевдокласс, когда курсор (указатель мыши) находится поверх поля, генерируемого данным элементом. Агенты пользователей, не поддерживающие интерактивные устройства, не используют этот псевдокласс. Некоторые конформные пользовательские агенты, поддерживающие интерактивные устройства, не имеют возможности использовать этот псевдокласс (например, устройство типа ручки).
- Псевдокласс :active применяется, когда элемент активизируется пользователем. Например, между моментами, когда пользователь нажимает кнопку мыши и отпускает ее.
- Псевдокласс :focus применяется, когда элемент находится в центре некоторых событий (обрабатывает события клавиатуры или другие типы ввода текста).
Эти псевдоклассы не являются взаимоисключающими. Элемент может сопоставляться одновременно нескольким псевдоклассам.
В CSS не определяется, какие элементы могут находится в описанных выше состояниях, как они попадают в эти состояния и их покидают. Сценарий отображения документа зависит от того, реагируют ли элементы на действия пользователей или нет, а также различных способов, используемых устройствами и пользовательскими агентами для выделения и активизации элементов.