目次
この章では、CSS2を含む全版のCSSに共通する、文法及び上位互換の解析規則（forward-compatible parsing rules）について述べる。 将来の版のCSSは、何らかの制約が追加されるとしても、ここに述べる構文を核にしたものになる。
以下の解説は標準情報であり、[D CSS2の文法]で示す標準の文法規則によって補完されるものである。
CSS規格においては、そのバージョン（1版、2版、これから先のあらゆるバージョン）に関わらず、中心になる構文として同じものを採用する。 こうすることによって、UAが設計された当時に存在しなかったバージョンのCSSスタイルシートでも（完全にではないが）解析できるようになるのである。 CSSの最新版が普及するまでの間、この特徴を利用することによって、古いUAにも対応したスタイルシートを記述することが可能となる。
字句レベルで見ると、CSSスタイルシートとはすなわち一次元の字句列である。 CSS2の字句一覧を以下に掲げる。 定義に当たってはLex風の正規表現を採用し、8進数コードは[ISO10646]への参照である。 また、解析パターンに複数の可能性がある場合は、Lexと同様に最長一致をもって字句を決定する。
| 字句 | 定義 |
|---|---|
| IDENT | {ident}
|
| ATKEYWORD | @{ident}
|
| STRING | {string}
|
| HASH | #{name}
|
| NUMBER | {num}
|
| PERCENTAGE | {num}%
|
| DIMENSION | {num}{ident}
|
| URI | url\({w}{string}{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 | any other character not matched by the above rules |
以上において中括弧内のマクロは次の様に展開すること:
| マクロ | 定義 |
|---|---|
| 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-zA-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のコアとなる生成規則である。 ここから先の章ではこの生成規則について説明する。 [D CSS2の文法]では、よりCSS2に限定した文法を掲げる。
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という字句を省いてあるが、COMMENTは他の字句の間ならば任意の位置にいくつでも出現してよい。
上の文法でSという字句は空白類文字を表す。 空白類文字には、スペース(Unicode 32)、水平タブ(9)、行送り(10)、復帰(13)、書式送り(12)が含まれる。 他にも全角スペース(8195)や表意空白(12288)などスペースに似た文字が存在するが、これらは決して空白類文字の1種ではない。
キーワードは識別子の一種であり、引用符に挟んではならない。 つまり:
red
これはキーワードだが:
"red"
これはキーワードではなく文字列である。 他にも間違った例を挙げておく:
width: "auto"; border: "none"; font-family: "serif"; background: "red";
次の規則は常に拘束力を持つ:
[UNICODE]と[ISO10646]の文字コードは、1対1対応であることに注意せよ。
まず、文字列の中では、後ろに改行が続くバックスラッシュは無視される。 つまり、文字列にはバックスラッシュも改行も含まれないことが前提である。
次に、CSSで特別扱いされている文字からその特別な意味を取り除く効果がある。 16進数値以外のあらゆる文字からは、バックスラッシュでエスケープすることによって特別な意味を取り除くことができる。 たとえば「"\""」は単独の二重引用符から成る文字列である。 スタイルシートのいわば前処理機構である字句及び構文解析ルーチンは、これらのバックスラッシュを取り除いて意味を変更してしてまってはならない。
最後に、文書作成者が容易に打ち出せない文字を参照することもできる。 この場合、バックスラッシュの後ろには、[ISO10646]の文字コードを表す16進数が続く。 16進数の次に紛らわしい数字や文字が続く場合、コードの終端を明確にする必要がある。 それには2通りの方法がある:
実際にはこれら2つの方法を組み合わせて使うとよい。 16進数の後では空白類文字が1つだけ無視されるので、数値エスケープ文字の後に本当のスペースを挿入するには、スペース自体をエスケープするか、スペースをふたつ続けなければならないことに注意せよ。
あらゆるバージョンのCSSスタイルシートは文（statements）列を成す（前出の文法を参照）。 文には2つの種類がある:@規則と規則集合である。 文の前後には自由に空白類文字を挿入してよい。
本仕様において、「immediately before」「immediately after」などの表現は、間に空白類文字やコメントが入らないことを意味する。 【訳注:訳文では直前・直後と書くように心掛けているつもり】
@規則の先頭には@キーワード（at-keyword）が来る。 @キーワードは「@」の直後に識別子が続いたものである（@import、@pageなど）。
@規則は、次に出現するセミコロン（;）までか、次に出現するブロック終端子までの全体から成る。 認識不能な@規則に遭遇した場合、UAはその@規則全体を無視して、次を解析し続けなければならない。
CSS2のUAは、ブロックの内部に出現する'@import'、任意の規則集合より前に出現する'@import'を無視しなければならない。
たとえば次のスタイルシートで:
@import "subs.css";
H1 { color: blue }
@import "list.css";
2つめの@importはCSS2では不正である。 したがって、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 }
ブロック（block）は左括弧({)から始まり、対応する右括弧(})で閉じる。 この間にはどんな文字を入れてもよいが、各種括弧や引用符は常に入れ子の対応関係を正しく維持する必要がある。 また、引用符の間に入る文字は文字列として解析される。 文字列の定義については、[4.1.1 字句解析]を参照のこと。
ここにブロックの例がある。 二重引用符で示された右括弧は、ブロック開始の左括弧とは対になっていない。 また、2つめのアポストロフィはエスケープ文字なので、1つめのアポストロフィとは対になっていない:
{ causta: "}" + ({7} * '\'') }
この規則はCSS2として正当なものではないが、上に定めたブロックの定義には適っていることに注意せよ。
規則集合（rule set）は、セレクタとそれに続く宣言ブロックから成る。
宣言ブロック（declaration-block）は、左括弧({)から始まり対応する右括弧(})で閉じる。 宣言ブロックの中身は、セミコロンで区切ったゼロ個以上の宣言でなければならない。
セレクタは、規則集合内部に最初に出現する左括弧（自身は含まない）までの全体から成る（[5 セレクタ]も参照）。 セレクタは常に宣言ブロックを伴う。 UAがセレクタを解析できない場合（つまりCSS2の仕様に照らしてセレクタが不正である場合）、付随する宣言ブロックごと無視しなければならない。
CSS2では、セレクタに出現するコンマ（,）に特別な意味を与えている。 しかし、将来の版のCSSにおいて、コンマが他に意味を得ないとは限らない。 よって、セレクタに1箇所でもエラーがあれば、セレクタの残りの部分がCSS2として正当でも、文全体を無視すべきである。
たとえば、「&」はCSS2のセレクタを生成する構文規則中のどの字句にも一致し得ないので、CSS2準拠のUAは2行目全体を無視しなければならない。 H3要素だけが前景色を赤に設定されるということにはならない:
H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }
1つ複雑な例を挙げておこう。 次の例で、文字列の途中には2対の括弧が出現するが、いずれもセレクタの終端を表す宣言ブロックではない。 したがってこれはCSS2の文として正当である:
P[example="public class foo\
{\
private int x;\
\
foo(int x) {\
this.x = x;\
}\
\
}"] { color: red }
宣言（declaration）は空であるか、もしくは「プロパティ:値」という形をとる。 プロパティ、コロン、値の前後には自由に空白類文字を挿入してよい。
複数の宣言をセミコロンで区切ってグループ化すれば、同じセレクタに対して宣言を並べることができる:
したがってこの規則は:
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、色、角度、時間、周波数から値を構成する。
UAは不正なプロパティ名や、不正な値を含む宣言を無視しなければならない。 すべての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 }
1行目の後ろの宣言は、'12pt'という不正な値を含んでいる。 また、2行目の後ろの宣言は、'font-vendor'という未定義のプロパティを含んでいる。 CSS2パーサはこれらの宣言を無視し、次の様に解釈する:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
コメントは「/*」という印から始まり「*/」という印で閉じる。 コメントは、字句と字句の間ならどこにでも出現してよく、その内容は出力に何の影響も及ぼさない。 また、コメントを入れ子にしてはならない。
CSSでは、ある特別な箇所にのみSGMLのコメント区切り子「<!--」と「-->」を使用できる。 ただし、これらはCSSのコメントを表すのではない。 HTMLのソース文書にSTYLE要素で規則を記述する際、HTML3.2以前の規格に準拠したUAからCSS規則を隠すためのコメントである。 詳細は[HTML40]仕様を参照のこと。
場合によって、UAはスタイルシートの一部不正箇所を無視しなければならない。 本仕様では「無視する」（ignore）の意味を、「UAが不正箇所を（不正の先頭と末尾を認識するために）解析はするが、不正箇所が存在しないかのように動作すること」と定める。
将来、新しいプロパティを追加したり、既存のプロパティに新しい値を追加したりできるように、UAは各不正について以下の規則に従わなければならない:
H1 { color: red; rotation: 70minutes }
UAはこのスタイルシートを次の様に扱う:
H1 { color: red }
IMG { float: left } /* 正しいCSS2 */
IMG { float: left here } /* 'float'に「here」という値は無い */
IMG { background: "red" } /* CSS2ではキーワードを引用符で括ってはならない */
IMG { border-width: 3 } /* 長さの値には単位が必須 */
CSS2パーサは先頭の規則のみを尊重して残りは無視するので、スタイルシートを次の様に扱う:
IMG { float: left }
IMG { }
IMG { }
IMG { }
将来のCSS仕様に対応したUAなら、上の例で無視された規則が適用されることもあり得る。
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 { color: blue }
'@three-dee'という@規則はCSS2には存在しない。 したがって、3つめの右閉じ括弧までから成る@規則全体が無視される。 その結果、CSS2のUAはスタイルシートを次の様に扱う:
H1 { color: blue }
値の中には整数値（<integer>で示す）や実数値（<number>で示す）を取るものがあり、これらの値には10進記法のみを用いる。 <integer>は、0から9までの数字を1つ以上並べたものである。 <number>は、<integer>と同じ形式か、ゼロ個以上の数字の後に、小数点を示すドットと1つ以上の数字が続く形式である。 整数値も実数値も、前に「+」か「-」を付け加えて正負を表すことができる。
整数値や実数値を取る多くのプロパティでは、値が負でない範囲に限定される場合があることに注意せよ。
長さの値は縦横の大きさを表す。
長さの値（<length>で示す）は、任意の正負符号（デフォルトはプラス）の後に、<number>（小数点以下は任意）と単位識別子（例:'px'、'deg'）が続く形式である。 長さが'0'なら単位識別子は省略できる。 【訂正:と書いてあるが、実際には<number>自体に正負符号が含まれているので、この記述には問題がある】
プロパティの中には負の長さを許可しているものもあるが、これは整形モデルを複雑にするし、実装上値に特定の制限範囲を生じさせたりする。 もし指定された負の長さに従うことができなければ、その値は実現可能な最も近い値に変換すべきである。
長さの単位には、相対と絶対の2種類がある。 相対単位は、他の長さのプロパティに対する相対的な長さを指定する。 相対単位を使ったスタイルシートは、別の媒体用途へと（たとえばコンピュータ画面からレーザープリンタへと）移植するのが容易になるだろう。
相対単位には以下のものがある:
H1 { margin: 0.5em } /* em */
H1 { margin: 1ex } /* ex */
P { font-size: 12px } /* px */
'em'という相対単位は、それが使われた要素の'font-size' の算出値を参照する。 例外は'font-size'自身にこの単位を用いた場合で、その時は親要素の'font-size' の算出値を参照する。 この単位は縦横の大きさを示すのに用いる（印刷の世界では、この単位をクワタ幅と呼ぶことがある）。
'ex'という相対単位は、フォントの'x-height'によって定義される。 'x-height'とは、その値が小文字の「x」の高さと等しくなることが多いのでこう呼ばれるが、'ex'は「x」という文字を含まないフォントに対しても定義される。
H1 { line-height: 1.2em }
この規則は、H1要素の行の高さが文字サイズの20%増であることを意味する。 一方:
H1 { font-size: 1.2em }
この規則は、H1要素の文字サイズが継承値の20%増であることを意味する。
木構造のルート要素にemやexを用いた場合、プロパティの初期値を参照する。
'px'という単位は、閲覧しているデバイス（多くの場合はコンピュータの画面）の解像度を参照する。 出力デバイスの画素濃度が典型的なコンピュータ画面のそれと著しく異なる場合は、UA側で値を調節すべきである。 調節時の参照先には、ユーザからの距離が腕の長さ程度で、画素濃度90dpiのデバイスにおける、1px分の画角を用いることを推奨する。 仮に腕の長さを28inchとすれば、画角は約0.0227度になる。
ユーザの腕の長さを基準にすると、1pxは約0.28mm（1/90inch）に対応する。 その画面をレーザープリンタで印刷する場合なら、読み手との距離が腕の長さより短くなる（55cm、21inch程度）と考えて、1pxを約0.21mmに対応させるとよい。 プリンタが300dpiなら1pxの指定に対して3画素（0.25mm）、600dpiなら1pxの指定に対して5画素を当てるなどして、値を丸めてしまうとよいだろう。
下の2図は、閲覧の距離とデバイスの解像度が、1pxの大きさに与える影響を示している。 第1図を見ると、閲覧距離が71cm（28inch）だと1pxが0.28mmに対応し、閲覧距離が3.5m（12feet）だと1pxが1.4mmに対応していることが判る。
第2図を見ると、低解像度のデバイス（コンピュータ画面など）では1px平方の領域が単独の画素で覆われてしまうのに対し、高解像度のデバイス（レーザープリンタなど）では1pxの領域に16個もの画素が入るということが判る。
一般に、子要素が親から継承するのは相対値ではなく算出値である。
次の規則だと、H1要素がBODY要素の子であれば、H1要素の'text-indent'の算出値は'45pt'ではなく'36pt'になる:
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e., 36pt */
}
H1 { font-size: 15pt }
絶対単位は、出力媒体の物理的性質が予め判っている場合に限り有用である。 絶対単位には以下のものがある:
H1 { margin: 0.5in } /* inches */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points */
H4 { font-size: 1pc } /* picas */
指定された長さに従えない場合、UAは実効値として近似値を取らなければならない。
パーセント値（<percentage>で示す）は、任意の正負符号（デフォルトはプラス）の直後に<number>と「%」が続く形式である。 【訂正:と書いてあるが、実際には<number>自体に正負符号が含まれているので、この記述には問題がある】
パーセント値は、常に長さなど他の値に対する相対値である。 パーセント値を取ることができるプロパティには、それぞれ参照先の値も定められている。 参照先の値には、同じ要素の別のプロパティ、祖先要素のプロパティ、整形文脈に関わる値（包含ブロックの幅など）などがある。 パーセント値がルート要素に用いられ、かつその値がプロパティの継承値を参照する場合、継承値の代わりに初期値を参照する。
子要素は一般に親要素の算出値を継承するので、次の例において、P要素の子要素が継承する'line-height'の値はパーセント値（'120%'）ではなく'12pt'になる:
P { font-size: 10pt }
P { line-height: 120% } /* 120% of 'font-size' */
URLs（Uniform Resource Locators、[RFC1738]及び[RFC1808]を参照）とは、Web上でのリソースのありかを示す1つの方式である。 また、リソースを識別するための新しい拡張方式にURN（Uniform Resource Name）がある。 この両者を合わせて[URI]（Uniform Resource Identifier）と呼ぶ。
URIの値は<uri>という表記で示す。 プロパティ値の中でURIを書くのには「url()」という関数記法を用いる:
BODY { background: url("http://www.bg.com/pinkish.gif") }
URI値の形式では、「url()」という関数の括弧内にURIをを記述する。 括弧内のURIは一重あるいは二重引用符で括ってもよく、URIの前後（括弧のすぐ内側）には自由に空白類文字を挿入してよい。
引用符が無い例:
LI { list-style: url(http://www.redballs.com/redball.png) disc }
URIの中に出現する各種括弧、コンマ、空白類文字、一重引用符、二重引用符はバックスラッシュでエスケープする必要がある:「\(」「\)」「\,」
URIの種類によっては、上記の文字を[URI]特有の方法でエスケープすることもできる（「(」を%28で「)」を%29で表すなど）。
リソースの絶対位置に依存せず、使い回しが効くスタイルシートを作り出すために、文書作成者は相対URIsを使うとよい。 相対URIs（[RFC1808]を参照）からは、ある基準URIを通して完全なURIを導き出す。 RFC1808の第3章では、この処理に用いる標準的なアルゴリズムを定めている。 CSSスタイルシートにおける基準URIとは、ソース文書のURIではなく、スタイルシートのURIである。
たとえば:
BODY { background: url("yellow") }
この規則を含むスタイルシートが、次のURIで示されるとしよう:
http://www.myorg.org/style/basic.css
BODY要素の背景には、次のURIが示すリソースにある画像が敷き詰められる:
http://www.myorg.org/style/yellow
URIの指定先リソースに何も存在しない、あるいは指定先が不適切な場合の処理はUA依存である。
（値の種類としての）カウンタは識別子によって示される（'counter-increment'と'counter-reset'を参照）。 カウンタの値を参照するには、'counter(<identifier>)'あるいは'counter(<identifier>, <list-style-type>)'という表記法を用いる。 <list-style-type>のデフォルトは'decimal'である。
入れ子になった一連の同名カウンタを参照するには、'counters(<identifier>, <string>)'あるいは'counters(<identifier>, <string>, <list-style-type>)'という表記法を用いる。 詳細は[12.5.1 カウンタの入れ子と作用範囲]を参照のこと。
CSS2では、'content'プロパティを通してのみカウンタの値を参照できる。 カウンタの<list-style-type>には'none'も指定できることに注意せよ。 'counter(x, none)'という関数は空文字列を返すことになる。
以下は各章（H1要素）の段落（P要素）を数えるスタイルシートである。 各段落にはローマ数字で番号が振られ、番号の後ろにはピリオドとスペースが続く:
P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}
どの'counter-reset'の作用範囲にも入らないカウンタは、ルート要素で0に初期化されたものとみなす。
色の値<color>は、キーワードかRGB数値のどちらかで指定する。
キーワードになる色名は以下の通り:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
これら16色は[HTML40]に定められている。
これら以外にも、各ユーザ環境で特定のオブジェクトに用いられている色は、対応したキーワードを用いて指定できる。
詳細は[18.2 システム色]を参照のこと。
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) } /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
16進数表記のRGB値は、シャープの直後に3桁もしくは6桁の16進数が続く形式である。 3桁のRGB表記(#rgb)は、6桁の形式(#rrggbb)に変換される。 この変換は、ゼロを付け加えるのではなく、各桁を繰り返す操作である。 たとえば「#fb0」という値は「#ffbb00」という値に変換される。 これにより、白(#ffffff)を略記で指定できる。 また、各ディスプレイごとの色の深度に依存しなくて済む。
関数によるRGB表記形式では、'rgb()'という関数の括弧内にコンマで区切った3つの数値（整数かパーセント値）を入れる。 整数値の'255'が、パーセント値の'100%'、16進数表記の'FF'に対応している。 すなわち、rgb(255,255,255) = rgb(100%,100%,100%) = #FFFとなる。 各数値の前後には自由に空白類文字を挿入してよい。
RGBのすべての色は、[sRGB]の色空間に指定される。 色を再現する能力がUAによって異なる場合もあるが、sRGBを用いれば曖昧でなく客観的に測定できる色の指定が可能になるし、測色の国際標準（[COLORIMETRY]を参照）とも関連が得られる。
適合UAは、ガンマ補正処理によって色の表示を制御してもよい。 sRGBでは、一定の閲覧環境下で2.2というガンマ値を推奨している。 UAは、出力デバイスの平常時のガンマ値と合わせて、効果的なガンマ値2.2が得られる様に、CSSで与えられた色を調節すべきである。 詳細は[14.3 ガンマ補正]を参照のこと。 なお、以上の影響を受けるのは、CSSで指定された色に限るということに注意せよ。 たとえば、画像は自身で色に関する情報を含んでいるものとする。
デバイスの許容範囲外の値は切り落とすべきである。 すなわち、許容範囲外にある赤、緑、青の各値は、デバイスが扱い得る範囲の値に変換しなければならない。 典型的なCRTモニタの場合、デバイスが扱える色の範囲はsRGBと同じである。 したがって、以下3つの規則は等価になる:
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
EM { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
EM { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
プリンタなど他のデバイスは、色の許容範囲がsRGBと異なっている。 sRGBの範囲外にある色を再現できることもあるし、sRGBの範囲内にある色でも、デバイス許容範囲外として切り落とされる場合もある。
注。 色は文書に大量の補助情報を与え、文書を読み易くしてくれる。 ただし、色の組み合わせによっては、色盲のユーザが問題を抱える場合もあることを考慮せよ。 背景画像や背景色を指定する場合は、それに合わせて前景色を調節すること。
角度の値（<angle>で示す）は音声スタイルシートで用いる。
角度の値は、正負記号（デフォルトはプラス）の直後に<number>と角度の単位識別子が続く形式である。 【訂正:と書いてあるが、実際には<number>自体に正負記号が含まれているので、この記述はかなり曖昧である。】
角度の単位識別子には以下のものがある:
角度の値は負になってもよい。 UAは負の角度を0-360degの範囲に一般化すべきである。 たとえば、-10degと350degは等価になる。
例を挙げると、真右の角度は'90deg'、'100grad'、あるいは'1.570796326794897rad'と書ける。
時間の値（<time>で示す）は音声スタイルシートで利用する。
時間の値は、<number>の直後に時間の単位識別子が続く形式である。
時間の単位識別子には以下のものがある:
時間の値は負であってはならない。
周波数（もしくは振動数）の値（<frequency>で示す）は音声スタイルシートで利用する。
周波数の値は、<number>の直後に周波数の単位識別子が続く形式である。
周波数の単位識別子には以下のものがある:
周波数の値は負であってはならない。
たとえば、200Hzは低音域、6kHzは高音域を表す。
文字列は、一重あるいは二重引用符を用いて示すことができる。 二重引用符の内部に再び二重引用符を記述することはできない。 そうしたい場合はエスケープする（「\"」あるいは「\22」と書く）必要がある。 一重引用符も同様である。
"this is a 'string'" "this is a \"string\"" 'this is a "string"' 'this is a \'string\''
文字列の途中に直接改行を含むことはできない。 文字列内に改行を記述するにはエスケープ文字「\A」を用いる。 16進数のAはUnicodeで行送りを表すが、CSSでは改行の一般形として用いる。 使用例は'content'プロパティを参照のこと。
表記形式へのこだわりやその他の理由で、文字列を複数行に分けることも可能である。 その場合、改行文字自体をバックスラッシュでエスケープしなければならない。 たとえば、次の2つのセレクタは等価である:
A[TITLE="a not s\
o very long title"] {/*...*/}
A[TITLE="a not so very long title"] {/*...*/}
CSSスタイルシートは、国際文字集合（[ISO10646]を参照）に含まれる文字の連なりである。 これらを保存、伝送するためには、US-ASCII文字集合に対応した符号化方法（ISO 8859-x、SHIFT JISなど）を用いて、文字列を符号化しなければならない。 文字集合や符号化方法の概要については、[HTML40]仕様の第5章や、[XML10]仕様の2.2章、4.3.3章、附記Fなどを参照するとよい。
スタイルシートが構造化文書内に埋め込まれている場合（たとえばHTMLでSTYLE要素やstyle属性を用いる場合）、そのスタイルシートは埋め込み先の文書と同じ符号化方法を共有する。
スタイルシートが別のファイルとして独立している場合、そのファイルの符号化方法について、UAは以下の優先順序を守らなければならない。 優先度が高い順に並べると:
1つの外部スタイルシートに複数の@charset規則が出現してはならず、単独で出現する場合も文書の先頭に書かなければならない（いかなる文字も先行してはならない）。 また、埋め込みスタイルシートには@charset規則が出現してはならない。 「@charset」の後ろには符号化方法の名称を指定する。 その名称は、[IANA]に登録された符号化方法の名称でなければならない（符号化方法の完全な一覧については[CHARSETS]を参照）。 例を挙げよう:
@charset "ISO-8859-1";
本仕様では、UAに対して特定の符号化方法への対応を要求しない。
@charset自体の符号化方法についてはア・プリオリな情報が存在しないので、理論的に言えば@charset構文への依存には問題がある。 しかし実際のところ、インターネットで広く使われている符号化方法の多くが、ASCII、UTF-16、UCS-4、EBCDIC（ごく稀）のいずれかをサブセットとしている。 したがって、文書先頭の数バイトからサブセットとなる符号化方法が推測可能であり、それが判れば@charsetだけを復号するには十分である。 そして@charsetが復号できれば、正確な符号化方法も判明することになる。
場合によっては、現行の符号化方法では表現できない文字をスタイルシートに書き込む必要がでてくる。 これらはISO10646文字集合を参照するエスケープ文字として記述しなければならない。 この方法はHTMLやXMLでも数値文字参照として採用されている。 詳細は[HTML40]の5章と25章を参照せよ。
エスケープ文字は、文書中のごく僅かな文字が必要とする場合にのみ用いるべきである。 文書中の大半の文字をエスケープする必要があるのなら、より適切な符号化方法を検討すべきである。 たとえば、文書が大量のギリシャ文字を含むのなら、ISO-8859-7やUTF-8を用いる方がよいだろう。
異なる符号化方法を用いている中継プロセッサは、自らの符号化方法に合わせてエスケープ文字をバイト列に変換してもよい。 ただし、ASCII文字の特別な意味を打ち消すエスケープ文字には、変更を加えてはならない。
適合UAは、認識する符号化方法に関わらず、すべてのUnicode文字を正確に数値と対応させなければならない（あるいはそうであるかのように動作しなければならない）。
たとえば、ISO-8859-1として伝送される文書は、ギリシャ文字を直接含むことはできない: 「κουρος」という文字列は「\3BA\3BF\3C5\3C1\3BF\3C2」と表現する必要がある。
注。 HTML4.0では、style属性に用いる数値文字参照は展開されるが、STYLE要素の内容に用いる数値文字参照は展開されない。 この不整合を考慮して、style属性とSTYLE要素の両方で、数値文字参照よりもCSSのエスケープ文字を用いるよう推奨する。 たとえばこう書くとよい:
<SPAN style="voice-family: D\FC rst">...</SPAN>
次の書き方は止めておいた方が無難であろう:
<SPAN style="voice-family: Dürst">...</SPAN>