[ новости /+++ | форум | теги | ]

Каталог документации / Раздел "Web мастеру, CGI, Perl, PHP, Apache" / Оглавление документа

4 Синтаксис CSS2 и основные типы данных

4.1 Синтаксис

В этом разделе описана грамматика (и модернизируемый набор правил синтаксического анализа), используемые во всех версиях CSS, включая CSS2. Будущие версии CSS не будут противоречить синтаксису этого ядра, хотя вполне возможно, что они будут содержать дополнительные синтаксические конструкции.

Данные описания являются нормативными и идут в дополнении к грамматическим правилам, изложенным в Приложении Г .

4.1.1 Маркирование

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

На лексическом уровне таблицы стилей CSS состоят из последовательности меток. Список меток, используемых в CSS2, приведен ниже. В их определениях используются регулярные выражения в стиле Lex. Использование восьмеричных кодов осуществляется в соответствии со стандартом ISO 10646 ([ISO10646]). Как и в Lex, в случае множественных совпадений метку определяет самое длинное совпадение.

Метка	Определение
IDENT	{ident}
ATKEYWORD	@{ident}
STRING	{string}
HASH	#{name}
NUMBER	{num}
PERCENTAGE	{num}%
DIMENSION	{num}{ident}
URI	url\({w}{string}{w}\) |url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE	U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO	<!--
CDC	-->
;	;
{	\{
}	\}
(	\(
)	\)
[	\[
]	\]
S	[ \t\r\n\f]+
COMMENT	\/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION	{ident}\(
INCLUDES	~=
DASHMATCH	|=
DELIM	символ, не подпадающий ни под одно из вышеприведенных правил

Макросы, фигурирующие в предыдущей таблице и заключенные в фигурные скобки "{}", определяются следующим образом:

Макрос	Определение
ident	{nmstart}{nmchar}*
name	{nmchar}+
nmstart	[a-zA-Z]|{nonascii}|{escape}
nonascii	[^\0-\177]
unicode	\\[0-9a-f]{1,6}[ \n\r\t\f]?
escape	{unicode}|\\[ -~\200-\4177777]
nmchar	[a-z0-9-]|{nonascii}|{escape}
num	[0-9]+|[0-9]*\.[0-9]+
string	{string1}|{string2}
string1	\"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2	\'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl	\n|\r\n|\r|\f
w	[ \t\r\n\f]*

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

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*;
ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector    : any+;
declaration : property ':' S* value;
property    : IDENT S*;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;

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

Метка S используется для обозначения свободного места. В качестве последнего могут выступать символы "пробел" (код в unicode: 32), "отступ" (9), "перевод строки" (10), "возврат каретки" (13) и "подача бумаги" (12). Другие символы, обозначающие пробелы, например, "em-пробел" (8195) и "идеографический пробел" (12288) не могут быть частью свободного места.

4.1.2 Ключевые слова

Ключевые слова имеют форму идентификаторов. Они не должны заключаться в кавычки ("..." или '...'). Таким образом,

red

это ключевое слово, а

"red"

width: "auto";
border: "none";
font-family: "serif";
background: "red";

4.1.3 Символы и регистр

Здесь действуют следующие правила:

• Таблицы стилей CSS не учитывают регистр за исключением тех их частей, которые не являются объектами языка CSS. За пределами рассмотрения данной спецификации остается, например, учет региструа в значениях атрибутов языка HTML "id" и "class", названий шрифтов и URI. В частности, заметим, что в формате HTML в названиях элементов регистр не учитывается, в то время как в формате XML учитывается.
• В CSS2 идентификаторы (включая названия элементов, классы и атрибут ID в селекторах) могут содержать символы из диапазонов от A до Z, от a до z и от 1 до 9; символы, код которых по стандарту ISO-10646 превосходит 161, а также дефис "-". Идентификаторы не могут начинаться с дефиса или с цифры и могут содержать специальные комбинации символов (с использованием обратного слэша), а также числовые коды кодировки ISO-10646 (см. следующий пункт). Например, идентификатор "B&W?" можно написать как "B\&W\?" или "B\26 W\3F".

  Следует заметить, что кодировка unicode эквивалентна кодировке ISO-10646 (см. [UNICODE] и [ISO10646]).

• В CSS2 обратный слэш (\) используется для специального кодирования символов тремя различными способами.

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

  Наличие обратного слэша отменяет действие специальных символов языка CSS. Специальное значение любого символа (за исключением шестнадцатеричного числа) можно "нейтрализовать" с помощью обратного слэша. Например, "\"" представляет собой строку, содержащую только одну пару кавычек. Препроцессоры таблиц стилей не должны удалять обратные слэши, т.к. это повлечет за собой изменение смысла таблицы стилей.

  Использование обратного слэша позволяет разработчикам оперировать с символами, которые нельзя просто поместить в документ. В данном случае после обратного слэша должно находиться не более шести шестнадцатеричных цифр (0,...,9,A,...,F), выступающих в качестве кодов этих символов в системе ISO-10646 ([ISO10646]). Если за шестнадцатеричным числом следует цифра или буква, то следует четко обозначить конец данного числа. Это можно сделать с помощью:

  1. обычного пробела (или любого другого пустого символа): "\26 B" ("&B");
  2. написания ровно шести шестнадцатеричных цифр: "\000026B" ("&B").

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

• Комбинации символов с обратным слэшем всегда интерпретируются как часть идентификатора или строки (т.е. "\7B" не является символом пунктуации, в то время как "{" является таковым, а "\32" допускается использовать в начале имени класса, хотя цифра "2" в этом качестве не допускается).

4.1.4 Выражения

Таблица стилей, написанная с использованием CSS любого уровня, представляет собой список выражений (см. выше описание грамматики). Все выражения делятся на два класса: правила at и наборы правил. С обоих сторон вокруг выражений может находиться пустое пространство.

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

4.1.5 Правила at

Правила at начинаются с ключевого слова at, т.е. с символа '@', непосредственно за которым следует идентификатор (например, '@import', '@page').

Правило at включает все, что находится до первой находящейся после него точки с запятой ";" или до первого следующего за ним структурного блока включительно. Агент пользователя с поддержкой CSS, если он встретит нераспознаваемое правило at, должен игнорировать все это правило целиком и продолжить синтаксический анализ далее.

Агенты пользователей с поддержкой CSS2 должны игнорировать все правила '@import', которые находятся внутри блока, либо не предшествует ни одному набору правил.

@import "subs.css";
H1 { color: blue }
@import "list.css";

@import "subs.css";
H1 { color: blue }

@import "subs.css";
@media print {
  @import "print-main.css";
  BODY { font-size: 10pt }
}
H1 {color: blue }

4.1.6 Блоки

Блок начинается с левой фигурной скобки "{" и заканчивается соответствующей ей правой фигурной скобкой "}". В промежутке между ними могут находиться любые символы с тем лишь исключением, что круглые "( )", квадратные "[ ]" и фигурные "{ }" скобки всегда должны присутствовать парами и при этом могут быть вложенными. Одинарные и двойные кавычки также должны присутствовать только парами, тогда расположенный между ними текст будет рассматриваться как строка. Определение строки можно найти в разделе "Маркирование".

{ causta: "}" + ({7} * '\'') }

4.1.7 Наборы правил, блоки объявлений и селекторы

Набор правил (также называемый правилом) состоит из селектора и следующего за ним блока объявлений.

Блок объявлений (обозначаемый далее как {}-блок) начинается с левой фигурной скобки "{" и заканчивается соответствующей ей правой фигурной скобкой "}". Между ними должен находиться, список объявлений (он может быть пустым), отделенных друг от друга точкой с запятой (";").

Селектор (см. раздел о селекторах) включает все, что находится до первой следующей за ним левой фигурной скобки "{", не включая ее. Он всегда находится рядом с {}-блоком. Если агент пользователя не может выполнить синтаксический анализ селектора (т.е. селектор не является допустимым селектором CSS2), то он также должен проигнорировать и {}-блок.

Согласно спецификации CSS2 запятая (",") в селекторах имеет определенное значение. Пока еще не известно, примет ли запятая в будущих версиях CSS другие значения. Тем не менее, если в селекторе имеется ошибка, то, несмотря на корректность остальной его части, все объявление должно игнорироваться целиком.

H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }

P[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

4.1.8 Объявления и свойства

Объявление может быть пустым или включать свойство и следующие за ним двоеточие (":") и значение этого свойства. Вокруг каждого из этих трех элементов может находиться произвольное количество пробелов.

В соответствии с принципами работы селекторов несколько объявлений для одного селектора могут быть объединены в группы, в которых они отделяются друг от друга точкой с запятой (";").

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

H1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

Свойство является идентификатором. Поэтому в его значении могут присутствовать произвольные символы с тем лишь исключением, что круглые "( )", квадратные "[ ]" и фигурные "{ }" скобки, а также одинарные и двойные кавычки должны появляться парами, а точка с запятой, если она не принадлежит строке, должна кодироваться с помощью обратного слэша. Круглые, квадратные и фигурные скобки могут быть вложенными. Символы внутри кавычек интерпретируются как строка.

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

Агент пользователя должен игнорировать объявление с некорректным именем свойства или с некорректным его значением. У каждого свойства в CSS2 имеются собственные синтаксические и семантические ограничения на принимаемые им значения.

H1 { color: red; font-style: 12pt } /* Некорректное значение 12pt */
P { color: blue;  font-vendor: any; /* Некорректное свойство font-vendor */
    font-variant: small-caps }
EM EM { font-style: normal }

H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM EM { font-style: normal }

4.1.9 Комментарии

Комментарии начинаются с символов "/*" и заканчиваются символами "*/". Они могут находиться в любом месте между метками, и их содержимое не влияет на работу таблицы. Комментарии могут и не включаться в таблицу.

В CSS допускается использование ограничителей комментариев ("<!--" и "-->"), принятых в SGML. Но они не ограничивают комментарии CSS. Их использование уместно тогда, когда от пользовательского агента, написанного для HTML-приложений версии 3.2 и ниже, необходимо скрыть стилистические правила, описанные в элементе STYLE исходного HTML-документа. Подробную информацию можно получить в спецификации HTML 4.0 ([HTML40]).

4.2 Правила обработки ошибок, возникающих на этапе синтаксического анализа

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

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

• Неизвестные свойства. Агенты пользователей должны игнорировать объявления, содержащие неизвестные свойства. Например, следующую таблицу стилей:

  H1 { color: red; rotation: 70minutes }
  

  агент пользователя должен обрабатывать, как если бы она выглядела так:

  H1 { color: red }
  

• Недопустимые значения. Агенты пользователей должны игнорировать объявления, содержащие недопустимые значения. Например:

  IMG { float: left }       /* корректное объявление */
  IMG { float: left here }  /* "here" не является значением */ 
                            /* свойства 'float' */
  IMG { background: "red" } /* ключевое слово заключено в кавычки */
  IMG { border-width: 3 }   /* не определена единица измерения */
                            /* для значения длины */
  

  Анализатор CSS2 должен применить первое правило и проигнорировать остальные:

  IMG { float: left }
  IMG { }
  IMG { }
  IMG { }
  

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

• Некорректные ключевые слова at. Агенты пользователей должны игнорировать некорректные ключевые слова at и весь следующий за ними текст до первой точки с запятой (";") или первого {}-блока включительно, в зависимости от того, что встретится первым. Рассмотрим следующий пример:

  @three-dee {
    @background-lighting {
      azimuth: 30deg;
      elevation: 190deg;
    }
    H1 { color: red }
  }
  H1 { color: blue }
  

  Правило at '@three-dee' не принадлежит языку CSS2. Поэтому все правило до третьей правой фигурной скобки включительно игнорируется. Агент пользователя с поддержкой CSS2 проигнорирует его, сократив таблицу стилей до следующего вида:

  H1 { color: blue }
  

4.3 Значения

4.3.1 Целые и вещественные числа

Некоторые типы значений могут быть выражены в целых (обозначаются как <целое>) или вещественных числах (обозначаются как <число>). Вещественные и целые числа представляются только в десятичной системе счисления. Значения типа <целое> состоят из одной или нескольких цифр от 0 до 9. Значения типа <число> могут совпадать с типом <целое> или состоять из группы цифр и следующих за нею точки и другой группы цифр. Вещественным и целым числам могут предшествовать символы "-" или "+" для обозначения знака.

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

4.3.2 Единицы измерения длины

Единицы измерения длины используются при определении горизонтальных и вертикальных размеров.

Значения поперечных размеров (в данной спецификации обозначенные как <длина>) задаются в соответствии со следующим форматом: знак ('+' или '-', по умолчанию используется знак '+'), непосредственно за которым следует <число> (с десятичной точкой или без нее), непосредственно за которым следует единица измерения длины (например, пикселы, градусы и т.д.). После нулевого значения длины единицу измерения можно опускать.

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

Существует два типа единиц измерения длины: относительные и абсолютные. Относительные единицы измерения указывают значение длины относительно других единиц измерения. Таблицы стилей, которые используют такой тип единиц, намного легче перенастраиваются с одного типа устройств на другой (например, с экрана компьютера на лазерный принтер).

К относительным единицам измерения относятся:

• em: свойство 'font-size' соответствующего шрифта
• ex: свойство 'x-height' соответствующего шрифта
• px: пиксели, относительно устройства просмотра

H1 { margin: 0.5em }      /* em */
H1 { margin: 1ex }        /* ex */
P  { font-size: 12px }    /* px */

Единица измерения 'em' равна вычисленному значению свойства 'font-size' элемента, с которым она используется. Исключение составляет тот случай, когда 'em' используется непосредственно со значением самого свойства 'font-size' при указании размера шрифта родительского элемента. Она может использоваться для измерения вертикальных и горизонтальных размеров. (В типографической лексике данная единица измерения иногда называется учетверенной шириной.)

Единица измерения 'ex' определяется свойством шрифта 'x-height'. Термин "x-высота" принят из-за того, что он определял размеры, равные высоте строчной буквы "x". Данная единица измерения может использоваться и для тех шрифтов, не включающих букву "x".

H1 { line-height: 1.2em }

H1 { font-size: 1.2em }

Если единицы измерения 'em' и 'ex' используются для корневого элемента дерева документа (например, для элемента "HTML" в HTML-документе), то их масштаб определяется относительно начального значения свойства.

Единица измерения 'пиксел' используется для определения разрешающей способности устройств вывода, чаще всего, компьютерных мониторов. Если плотность расположения пикселей некоторого устройства вывода заметно отличается от разрешения типичного дисплея, то агент пользователя должен изменить масштаб одного пиксела. Рекомендуется в качестве эталонного пиксела рассматривать угловой размер одного пиксела в устройстве, обладающем разрешением в 90 точек на дюйм и удаленном от наблюдателя на расстояние вытянутой руки. Для типичной длины руки, равной 28 дюймам, этот угловой размер составляет примерно 0.0227 градусов.

При чтении на расстоянии вытянутой руки 1px равен примерно 0.28 мм (1/90 дюйма). При печати на лазерном принтере, т.е. при чтении на расстоянии меньшем, чем длина руки (примерно, 55 см, 21 дюйм), 1px равен примерно 0.21 мм. Для принтера с разрешением в 300 точек на дюйм значение пиксела может быть округлено до 3 точек (0.25 мм); для принтера с разрешением в 600 точек на дюйм - до 5 точек.

Следующие два рисунка демонстрируют влияние расстояния, на котором осуществляется их просмотр, на размер пиксела и разрешение устройства вывода. На первом рисунке при чтении на расстоянии 71 см (28 дюймов) размер пиксела равен 0.28 мм, а при чтении на расстоянии 3.5 м (12 футов) - 1.4 мм.

На втором рисунке на площади размером в один квадратный пиксел устройством с низкой разрешающей способностью (монитором) размещена всего одна точка, в то время как на площади такого же размера устройство с высоким разрешением (например, лазерный принтер с разрешением в 400 точек на дюйм) разместит сразу 16 точек.

Дочерние элементы не наследуют относительные значения, указанные для их родительских элементов, обычно они наследуют вычисляемые значения.

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* т.е. 36pt */
}
H1 { font-size: 15pt }

Абсолютные единицы измерения полезны только в том случае, когда известны физические параметры устройства вывода. К ним относятся:

• in: дюйм - 1 дюйм равен 2.54 сантиметрам.
• cm: сантиметр
• mm: миллиметр
• pt: точка - 1 точка, используемая в CSS2, равна 1/72 дюйма.
• pc: пика - 1 пика равна 12 точкам.

H1 { margin: 0.5in }      /* дюймы */
H2 { line-height: 3cm }   /* сантиметры */
H3 { word-spacing: 4mm }  /* миллиметры */
H4 { font-size: 12pt }    /* точки */
H4 { font-size: 1pc }     /* пики */

Если указанное значение длины не поддерживается, то агенты пользователей должны аппроксимировать его поддерживаемым значением.

4.3.3 Процентные соотношения

Процентное соотношение (обозначаемое в данной спецификации как <проценты>) записывается в соответствии со следующим форматом: знак числа ('+' или '-', по умолчанию используется знак '+'), непосредственно за которым следует <число>, непосредственно за которым следует символ '%'.

Любое значение, задаваемое в процентах, всегда определяется относительно некоторого другого значения, например, значения длины. У каждого свойства, поддерживающего процентное задание значений, определено и то значение, относительно которого определяется процентное соотношение. В таком качестве может выступать значение другого свойства того же элемента, или свойства предка, или форматирующего контекста (например, значение ширины контейнера). Если значение процентного соотношения присваивается свойству корневого элемента, и оно соотносится с наследуемым значением другого свойства, то конечным значением будет соответствующая процентная доля, взятая от начального значения этого свойства.

P { font-size: 10pt }
P { line-height: 120% }  /* 120% от 'font-size' */

4.3.4 URL + URN = URI

URL (универсальный адрес ресурса - Uniform Resource Locator, см. [RFC1738] и [RFC1808]) описывает адрес ресурса в Web. Идентификация ресурсов осуществляется с помощью URN (универсального имени ресурса - Uniform Resource Name). В совокупности они образуют URI (универсальный идентификатор ресурсов - Uniform Resource Identifier, см. [URI]). В данной спецификации используется понятие URI.

Значения URI обозначаются как <uri>. Для указания URI в значениях свойств используется структура "url()". Например:

BODY { background: url("http://www.bg.com/pinkish.gif") }

Значение URI задается в следующем формате: строка 'url(', затем, возможно, пробел, затем, возможно, одинарная или двойная кавычка, затем сам URI, затем одинарная или двойная кавычка, затем пробел, затем скобка ')'. Кавычки в обоих случаях должны быть одинаковыми.

LI { list-style: url(http://www.redballs.com/redball.png) disc }

Скобки, запятые, пробелы, одинарные и двойные кавычки, находящиеся непосредственно в самом URI, должны кодироваться с использованием обратного слэша: '\(', '\)', '\,' и т.д.

В зависимости от типа используемого URI вышеупомянутые символы можно задавать с помощью процедур, предусмотренных в URI (где "(" = %28, ")" = %29, и т.д.) [URI].

Для создания модульных таблиц стилей, не зависящих от абсолютного адреса ресурса, разработчики могут использовать относительные URI. Они (в соответствии с [RFC1808]) разрешаются в полные URI с использованием базового URI. Алгоритм этой процедуры описан в разделе 3 стандарта RFC 1808. Для таблиц стилей CSS базовым является URI таблиц стилей, а не исходного документа.

BODY { background: url("yellow") }

http://www.myorg.org/style/basic.css

http://www.myorg.org/style/yellow

Агенты пользователей могут по-разному обрабатывать URI, ссылающиеся на несуществующие или неисполнимые ресурсы.

4.3.5 Счетчики

Счетчики обозначаются идентификаторами (см. свойства 'counter-increment' и 'counter-reset'). Для обращения к значению счетчика, используется запись 'counter(<идентификатор>)' или 'counter(<идентификатор>, <тип-стиля-списка>)'. По умолчанию используется стиль 'decimal'.

Чтобы обратиться к последовательности вложенных счетчиков, обозначенных одним именем, используется запись вида 'counters(<идентификатор>, <строка>)' или 'counters(<идентификатор>, <строка>, <тип-стиля-списка>)'. См. раздел "Вложенные счетчики и диапазон" в главе о генерируемом содержимом.

В CSS2 доступ к значениям счетчиков можно получить только с помощью свойства 'content'. Следует помнить, что в качестве <типа-стиля-списка> может выступать 'none'. Так 'counter(x, none)' приводит к выводу пустой строки.

P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}

Предполагается, что счетчики, не попадающие в область действия правила 'counter-reset', обнуляются этим правилом в корневом элементе.

4.3.6 Цвета

Список ключевых слов, используемых для названия цветов: aqua (цвет морской волны), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (желто-зеленый), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (пурпурный), red (красный), silver (серебряный), teal (темно-бирюзовый), white (белый) и yellow (желтый). Эти 16 цветов определены в HTML 4.0 ([HTML40]). В дополнение к этим ключевым словам пользователи могут создавать собственные для обозначения цветов, используемых определенными объектами в пользовательской среде. Дополнительную информацию можно получить в разделе о системных цветах.

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

Цветовая модель RGB используется при числовом описании цветов. Во всех следующих примерах указывается один и тот же цвет:

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* целое в диапазоне 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* число с плавающей точкой 0.0% - 100.0% */

В шестнадцатеричном представлении запись значения 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]). Агенты пользователей могут представлять цвета с разной точностью, но использование sRGB дает возможность однозначного определения цвета, соотносимого с международным стандартом (см. [COLORIMETRY]).

Конформные пользовательские агенты в возможностях отображения цветов могут ограничиваться только гамма-коррекцией. Пространство sRGB в заданных условиях просмотра определяет цветовую гамму дисплея 2.2. Агенты пользователей должны корректировать заданные в CSS цвета таким образом, чтобы в комбинации с "натуральной" гаммой цветов выходных устройств получалась эффективная цветовая гамма 2.2. Более подробную информацию можно получить в разделе о гамма-коррекции. Помните, что это повлияет только на цвета, определенные в CSS; считается, что каждое изображение само по себе несет информацию о цвете.

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

EM { color: rgb(255,0,0) }       /* целое в диапазоне 0 - 255 */
EM { color: rgb(300,0,0) }       /* обрезается до rgb(255,0,0) */
EM { color: rgb(255,-10,0) }     /* обрезается до rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) }  /* обрезается до rgb(100%,0%,0%) */

4.3.7 Углы

Значения углов (в тексте обозначаемые как <угол>) используются в звуковых таблицах стилей.

Значения углов задаются в соответствии со следующим форматом: произвольный символ знака ('+' или '-', знак '+' используется по умолчанию), непосредственно за которым следует <число>, непосредственно за которым следует идентификатор единицы измерения углов.

К идентификаторам единиц измерения углов относятся:

• deg: градусы
• grad: грады
• rad: радианы

Значения углов могут быть отрицательными. Произвольное значение должно преобразовываться агентами пользователей в диапазон от 0 до 360 градусов. Например, значения -10deg и 350deg задают один и тот же угол.

Например, правый угол равен '90deg', или '100grad', или '1.570796326794897rad'.

4.3.8 Время

Временные значения (в тексте обозначаемые как <время>) используются в звуковых таблицах стилей.

Значения времени задаются в соответствии со следующим форматом: <число>, непосредственно за которым следует идентификатор единицы измерения времени.

К идентификаторам единиц измерения времени относятся:

• ms: миллисекунда
• s: секунда

Значения времени не могут быть отрицательными.

4.3.9 Частота

Значения частоты (в тексте обозначаемые как <частота>) используются в звуковых таблицах стилей.

Значения частоты задаются в соответствии со следующим форматом: <число>, непосредственно за которым следует идентификатор единицы измерения частоты.

К идентификаторам единиц измерения частоты относятся:

• Hz: герцы
• kHz: килогерцы

Значения частот не могут быть отрицательными.

Например, частота 200Гц (или 200гц) - это низкий звук, а 6кГц (или 6кгц) - высокий.

4.3.10 Строки

Строки заключаются в двойные или одинарные кавычки. Двойные кавычки не могут быть вложенными друг в друга за исключением тех случаев, когда одни из них кодируются с использованием обратного слэша (например, '\"' или '\22'). Аналогичное имеет место и для одинарных кавычек ("\'" или "\27").

"это 'строка'"
"это \"строка\""
'это "строка"'
'это \'строка\''

Символ новой строки не может содержаться непосредственно в самой строке. Чтобы его включить, необходимо использовать комбинацию с обратным слэшем "\A" (шестнадцатеричное число A является кодом символа перевода строки в Unicode и "символа новой строки" в CSS). За примером можно обратиться к свойству 'content'.

Из эстетических и прочих соображений строки могут разбиваться принудительно. В этом случае символ новой строки должен кодироваться с помощью обратного слэша "\". Например, следующие два селектора совершенно идентичны:

A[TITLE="не слишком длин\
ный заголовок"] {/*...*/}
A[TITLE="не слишком длинный заголовок"] {/*...*/}

4.4 Представление документов, в которых используются CSS

Таблица стилей CSS представляет собой последовательность символов универсального набора (см. [ISO10646]). Для передачи и хранения эти символы должны кодироваться в соответствии с той системой кодировки, которая поддерживает набор символов US-ASCII (например, ISO 8859-x, SHIFT JIS и т.д.). Информацию о наборах символов и кодировании символов можно найти в спецификации HTML 4.0 ([HTML40], глава 5), а также в спецификации XML 1.0 ([XML10], разделы 2.2 и 4.3.3) и Приложении Е.

Если таблица стилей импортируется в другой документ, например, в элемент STYLE или атрибут "style" HTML-документа, то она использует систему кодировки, принятую в документе.

Если таблица стилей находится в отдельном файле, агенты пользователей при определении кодировки символов документа должны учитывать следующие приоритеты (по степени убывания приоритета):

1. Параметр "charset" HTTP в поле "Content-Type".
2. Правило at @charset.
3. Элементы кодировки языка в документе, из которого происходит ссылка на таблицу (например, атрибут "charset" элемента LINK в HTML-документе).

Во внешней таблице стилей может быть не больше одного правила @charset. Его не должно быть во внедренной таблице стилей, и оно должно Располагаться в самом начале документа, чтобы перед ним не было ни одного символа. После слова "@charset" нужно указать название системы кодировки символов. Название должно представлять собой название набора символов в соответствии с реестром IANA (см. [IANA]. Полный список наборов символов можно найти в [CHARSETS]). Например:

Данная спецификация не указывает, какие кодировки символов должен поддерживать агент пользователя.

Следует помнить, что использование конструкции @charset теоретически может вызвать проблемы, связанные с тем, что заранее неизвестно, какая кодировка используется используется в самой этой конструкции. Однако на практике Интернет чаще всего используются кодировки на базе ASCII, UTF-16, UCS-4 или (редко) на EBCDIC. Это означает, что в общем случае начальные байты документа позволяют агентам пользователей достоверно определять тип кодировки, что предоставляет достаточный объем информации для декодирования правила @charset, который в свою очередь точно указывает тип кодировки.

4.4.1 Ссылки на символы, отсутствующие в системе кодировки

В таблице стилей может понадобиться обращение к символам, которые не могут быть представлены в текущей кодировке. Эти символы должны представляться в виде ссылок на символы кодировки ISO 10646 с использованием обратного слэша. Это делается с той же целью, что и кодирование цифровых ссылок в документах HTML или XML (см. [HTML40], главы 5 и 25).

Механизм кодирования символов с использованием обратного слэша рекомендуется использовать только для небольшого количества символов. Если необходимость в его использовании возникает часто, следует использовать наиболее приемлемую систему кодировки (например, если документ содержит много греческих символов, то рекомендуется использовать "ISO-8859-7" или "UTF-8").

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

Конформные агенты пользователей должны осуществлять корректное преобразование всех символов любой распознаваемой системы кодировки в Unicode (или должны вести себя так, как если бы они сделали это).

Например, документ, переданный как документ в кодировке ISO-8859-1 (Latin-1), не может содержать греческие символы: "κουρος" (греческий: "kouros"). Эта последовательность должна быть представлена в виде: "3BA\3BF\3C5\3C1\3BF\3C2".

<SPAN style="voice-family: D\FC rst">...</SPAN>

<SPAN style="voice-family: D&#252;rst">...</SPAN>

Партнёры:

Хостинг: