4.1. Синтаксис

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

Эти описания являются нормативными. Они дополнены правилами нормативной грамматики, представленной в Приложении D.

4.1.1. Маркеры.

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

На лексическом уровне стилевые таблицы состоят из последовательности маркеров. Перечень маркеров для CSS2 указан ниже. Определения используют стандартные выражения Lex-стиля. Восьмеричные коды ссылаются на документацию ISO 10646 (http://www.indigo.ie/egt/standards/iso10646/bmp-roadmap-table.html и http://www.indigo.ie/egt/standards/iso10646/plane-1-roadmap-table.html). Как и в Lex (норма), в случае множественных совпадений самое длинное совпадение определяет маркер.

Макрокоманды, указанные выше в фигурных скобках ({ }), определяются следующим образом:

Ниже приводится основной синтаксис для 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*;

Маркеры КОММЕНТАРИЕВ не появляются в грамматике, но любое число таких маркеров может использоваться везде между другими маркерами.

Маркер S, указанный в грамматике выше, означает разделитель. Только символы "space" (код 32 в Unicode), "tab" (9), "line feed" (10), "carriage return" (13) и "form feed" (12) могут встречаться в разделителе. Другие символы, подобные пробелу, такие как "emspace" (8195) и "ideographic space" (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-Za-z0-9], символы 161 и выше в ISO 10646, и дефис (-); но они не могут начаться с дефиса или цифры. Идентификаторы могут содержать управляющие символы и любые символы ISO 10646, как цифровой код (смотрите следующий пункт). Например, идентификатор "B&W?" может быть записан, как "B\&W\?" или "B\26W\3F".
  
  Обратите внимание на то, что Unicode – это эквивалент коду ISO 10646 (смотрите UNICODE и ISO10646).
• В CSS2 символ обратной косой черты (\) указывает на три типа управления символами.
  
  Во-первых, внутри строки обратная косая черта игнорируется, если продолжается разделителем строки (т.е. считается, что строка не содержит либо обратной косой черты, либо новой строки).
  
  Во-вторых, она отменяет значение специальных символов CSS. Любой символ (исключая шестнадцатиричную цифру) можно обойти с обратной косой чертой для снятия его специального значения. Например, запись "\"" – это строка, содержащая двойные кавычки. Препроцессор стилевых таблиц не должен убирать обратные косые черты из стилевых таблиц, т.к. это изменит значение стилевой таблицы.
  
  В-третьих, обход с помощью обратной косой черты позволяет авторам ссылаться на символы, которые не возможно обычно поместить в документ. В этом случае обратная косая черта сопровождается шестью шестнадцатиричными цифрами (0…9A..F), которые определяют символы ISO 10646 с соответствующим номером. Если цифра или буква сопровождается шестнадцатиричным номером, то конец номера нужно делать ясным. Для этого есть два способа:
  
  1. с пробелом (или другим символом разделения): "\26 B" ("&B")
  2. предоставлять точно 6 шестнадцатиричных цифр: "\000026B" ("&B")
  
  Фактически, эти два метода можно комбинировать. Только один пробельный символ игнорируется после шестнадцатиричного перехода. Обратите внимание: это означает, что "действительный" пробел после последовательности переходов должен либо сам избегаться, либо удваиваться.
• Обход с обратной косой чертой всегда рассматривается, как часть идентификатора или строки (т.е. "\7B" не является знаком пунктуации, даже если "{" находится, а "\32" разрешается в начале названия класса, а "2" не является знаком пунктуации.).

4.1.4. Выражения.

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

В этой спецификации фраза "непосредственно перед" или "непосредственно после" означает – без разрыва пробелом или комментариями.

4.1.5. @-Правило (At-rule).

Такие правила начинаются с ключевого слова at-keyword, символ '@' (произносится как "эт"), сопровождаемого сразу же идентификатором (например, '@import', '@page').

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

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

Допустим, например, что анализ синтаксиса CSS2 натолкнулся на следующую таблицу стилей:

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

В соответствии с CSS2, второе правило '@import' не верно. Анализ синтаксиса CSS2 игнорирует это правило, эффективно редуцируя стилевую таблицу к следующему виду:

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

В следующем примере, второе правило '@import' не верно, так как оно находится внутри блока '@media'.

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

4.1.6. Блоки.

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

Ниже приводится пример блока. Обратите внимание на то, что правая фигурная скобка между двойными кавычками не соответствует открывающей скобке блока, а вторая одинарная кавычка употребляется с переходным символом, и таким образом не согласовывается с первой одинарной кавычкой:

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

Обратите внимание, что выше указанное правило – не верно для CSS2, но все же это – блок, как определено выше.

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

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

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

Селектор - это то, что прилегает к левой фигурной скобке ({). Селектор всегда приводится с блоком объявлений. Когда устройство вывода не может провести синтаксический анализ селектора (т.е. он не верный для CSS2), то устройство должно игнорировать этот блок объявлений.

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

Например, поскольку "&" – некорректный маркер для селекторов CSS2, то устройство вывода CSS2 должно игнорировать всю вторую строку и не устанавливать цвет Н3 красным:

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

Ниже приводится более сложный пример. Первые две пары фигурных скобок находятся внутри строки, и не маркируют конец селектора. Это корректное предложение CSS2.

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 имеет свои собственные синтаксические и семантические ограничения по значениям, которые оно принимает.

Например, допустим, что анализ синтаксиса CSS2 натолкнулся на следующую таблицу стиля:

H1 { color: red; font-style: 12pt }  /* Invalid value: 12pt */
P { color: blue;  font-vendor: any;  /* Invalid prop.: font-vendor */
    font-variant: small-caps }
EM EM { font-style: normal }

Второе объявление в первой строке имеет неправильное значение '12pt'. Второе объявление во второй строке содержит неопределенное свойство 'font-vendor'. Анализ CSS2 будет игнорировать эти декларации, эффективно редуцируя стилевую таблицу до следующего вида:

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

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

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

CSS позволяют также использовать ограничители комментариев для SGML ("") в определенных местах, но они не включают комментарии CSS. Эти ограничители разрешены, когда стилевые правила находятся внутри HTML-документа источника (в элементе STYLE), и должны скрываться для устройств вывода с версией, предшествующей HTML 3.2. Смотрите спецификации HTML 4.0 для дополнительной информации.