← 2.2 スタイルシートを適用する CSS総目次 2.4 セレクタの構文規則 →
このページでは，CSSによるスタイル記述のための基本的な構文（書き方）について説明します。
前節「2.2 スタイルシートを適用する」の最後に外部スタイルシートについて説明しました。そこで使用した外部スタイルシート"sample.css"の内容は，以下の１行のみでした。
h1 {color: #ff0000}CSSでは，これを「文（statements）」と呼びます。CSSの記述は，この文の集まりとして記述されることになります。CSSの文には２種類あります。
「@規則」は，"@"に続けてキーワードを記述したもので，次に出現するセミコロン（;）までか，次に出現するブロック終端までの全体から構成されます。より細かな説明については，それぞれのキーワードが表す規則ごとに異なるので，その@規則が出てきた時に説明することにします。
規則集合は，「セレクタ」と「宣言ブロック」から構成されています。
h1 {color: #ff0000}この例の場合は，"h1"の部分がセレクタ，それに続く左括弧"{"と対応する右括弧"}"で囲まれた部分を宣言ブロックと呼びます。セレクタは宣言ブロックに指定されたスタイルが適用される対象であり，宣言ブロックには「宣言」と呼ばれるセレクタに適用するスタイルを記述します。例の場合には，"color: #ff0000"の部分が宣言となります。
宣言（declaration）は０個以上記述可能であり，１個以上記述する場合の宣言は，「プロパティ:値」という形式で記述します。また，２個以上宣言を記述する場合には，それぞれの宣言をセミコロン";"で区切ります。
プロパティは，CSS2.1 で予約された「識別子」であり，使用可能な文字は次のとおりです。
指定できる値は，各プロパティごとに定められています。ただし，どの場合においても識別子，文字列，数値，長さ，パーセント値，URI，色，角度，時間，周波数から構成される値を指定することになります。これらの値の詳細については，後述します。
以上のことをまとめると，規則集合の書き方は次のようになります。
セレクタ { プロパティ:値; }宣言部分に指定できる値には，識別子，文字列，数値，長さ，パーセント値，URI，色，角度，時間，周波数があります。ここでは，音声に関するスタイルである角度，時間，周波数を除いた各値の種類について説明します。
「文字列」は，一重「'」あるいは二重引用符「"」を用いて表します。引用符の内部に再び同一の引用符を記述することはできないので注意してください。
"文字列" あるいは '文字列'
ここで注意しなければならないことは，「キーワード」(※ CSSで定義されている単語のこと。)は識別子の一種であり，引用符で囲んではならないことです。例えば，
greenこれはキーワード「green」となりますが，
"green"これはキーワードではなく文字列「green」となります。
「数値」には，「整数値」と「実数値」があります。数値には「10進記法」のみを用い，整数値は，0から9までの数字のみで構成され，実数値は小数点を示すドットと組み合わされて構成されます。また，数値には，必要に応じて"+"か"-"を付け加えて正負を表すことができます。
「長さ」は，縦横の大きさを表現する場合に指定されます。長さは，任意の正負符号（デフォルトはプラス）の後に数値と「単位識別子」を記述します。
[符号] 数値 単位識別子また，長さが"0"の場合は，単位識別子を省略できます。単位識別子には，「相対単位」と「絶対単位」があります。 相対単位には以下のものがあります。
一般に，"em"は対象文字サイズの"m"の文字幅を基準にし，"ex"は対象フォントサイズの"x"の高さを基準にしています。 また，"px"は，ピクセルを表す単位となります。
次に絶対単位には以下のものがあります。
「パーセント値」は，任意の正負符号（デフォルトはプラス）の後に数値と"%"が続く形式で記述されます。
[符号] 数値%「URI」は，簡単に言えば，「URL」と「URN」を合わせた表現ですが，これを値として記述する場合には，「url()」という関数記法を用います。
url(URIを記述)このとき記述するURIは引用符で囲んでも囲まなくても，どちらでもよい。
「色」は，キーワードかRGB値のどちらかで指定することができます。キーワードとして定められている色(※ キーワード"orange"は，CSS 2.1で追加されました。)には，次のものであります。
aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, yellow,
orangeRGB値を指定する場合は，「16進数表記」あるいは「rgb()」という関数表記を用います。16進数表記のRGB値は，シャープの直後に3桁もしくは6桁の16進数が続く形式で構成されます。
#rrggbb
#rgb3桁のRGB表記(#rgb)は，6桁の形式(#rrggbb)に変換された形式で解釈されます。例えば，"#abc"という値は"#aabbcc"という値に変換されます。なお，16進表記の英字は大文字，小文字を区別しません。"rgb()"関数表記形式では，括弧内にコンマで区切った3つの数値（整数かパーセント値）を記述します。
rgb(r, g, b)このとき整数値の"255"が，パーセント値の"100%"，16進数表記の"FF"に対応します。つまり，以下の４種類の記述は同一の色を表すことになります。
#FFF
#FFFFFF
rgb(255, 255, 255)
rgb(100%, 100%, 100%)