構文

空白文字

CSSの空白文字には、Unicodeの半角スペース[U+0020]、タブ[U+0009]、MAC改行文字LF[U+000A]、UNIX改行文字CR[U+000D]、改ページ文字FF[U+000C]が含まれます。
Windows改行文字は、キャリッジリターン+ラインフィードCR+LF[U+000DU+000A][\r\n]から構成されます。

意味	10進	16進	綴り	コード
半角スペース	32	20	space
タブ	9	9	tab	\t
MAC改行文字ラインフィードLF (行送り)	10	A	linefeed	\n
UNIX改行文字キャリッジリターンCR (復帰)	13	D	carrige return	\r
改ページ文字フォームフィードFF (書式送り)	12	C	form feed	\f

他にも半角フォントサイズのスペース[U+2002][&#ensp;]や全角フォントサイズのスペース[U+2003][&#emsp;]、日本語などに使用される全角スペース[U+3000](表意空白: ideographic space)などの空白文字に似た文字が存在しますが、これらは決してCSSにおける空白文字の一種ではありません。

キーワード

CSSでは、引用符["][']で囲った部分は文字列として解釈されます。したがって、キーワードは引用符で囲まずにそのまま記述します。

×　不正な例		○　正しい例
margin:"auto";	→	margin:auto;
border:"none";	→	border:none;
font-family:"serif";	→	font-family:serif;
color:"red";	→	color:red;

大文字小文字の区別と文字と活字ケース

大文字と小文字の区別

原則としてCSS2では大文字小文字を区別しません。ただし、HTMLのid属性やclass属性の名前、フォント名、URIなどについては、それぞれの仕様に従います。また、要素名および属性名の記述に関してHTMLでは区別しませんが、XHTML、XMLでは区別されるので、注意が必要です。

識別子 <identifire>

スタイルシートの識別子には、セレクタに含まれる要素名、クラス名、ID名があり、使用可能な文字は[a-zA-Z0-9]の範囲にある文字とハイフンだけに限られます。先頭文字にハイフンや数字を指定することはできません。(*1)

*1 セレクタに使用可能な文字には、上記以外に[ISO10646]で161以上のコードが振られている文字(16進数コード)が含まれます。また、先頭文字にはエスケープ文字([\'][\"][\{]など)や[ISO10646]で161以上のコードが振られている文字(16進数コード)も含むことができます。詳しくは、下記の「文字と活字ケース詳細」を参照してください。

文字と活字ケース詳細

文

CSSは、文列を成します。文には「@ルール」と「ルールセット」の2種類があります。(*2)

*2 @ルールとは、@キーワード(@charset @importなど)から次に出現するセミコロン[;]あるいは、ブロック({...})終端子"}"までを指します。ルールセットとは、セレクタとそれに続く宣言ブロック({宣言})を指します。


/* @ルール */

@import "foo.css";    /* セミコロン[;]まで */

@media print {

  body {font-size:10pt}

}                     /* ブロック終端子"}"まで */



/* ルールセット */

h1 {color:blue}

@キーワード(@charset @importなど)とそれに続く文や、セレクタとそれに続く宣言ブロック({宣言})の前後には自由に空白文字を挿入することができます。


@charset

"Shift_JIS";     /* @charset "Shift_JIS"; */

@import

url(foo.css);    /* @import url(foo.css); */



h1 { color:blue }


セレクタ

{ プロパティ:値 }    /* セレクタ { プロパティ:値 } */



セレクタ,

セレクタ,

セレクタ

{ プロパティ:値 }    /* セレクタ, セレクタ, セレクタ { プロパティ:値 } */

CSSのコメント

CSSでは[/*]と[*/]で囲まれた範囲がコメントになります。コメントは、字句と字句の間ならどこにでも出現してよく、その内容は出力に何の影響も及ぼしません。ただし、コメント内にコメントを、ネスト(入れ子)にすることはできません。


/* この範囲がコメントになります。 */



/* この範囲が

   コメントに

   なります。 */

スタイルシートを隠すための記述

style要素に対応していないブラウザからCSSの記述を隠すためにSGMLのコメント区切り子「」を使用することができます。ただし、これが利用できるのはstyle要素の内容モデルがCDATAであるHTML4.01までであり、style要素の内容モデルが#PCDATAであるXHTMLではSGMLのCDATAセクションという形式に変更する必要があります。

HTML4.01までの記述


<style type="text/css"><!--

スタイルシート...

--></style>

XHTMLにおける記述


<style type="text/css"><![CDATA[

スタイルシート...

]]></style>