スタイルシートの構造

基本構造

CSS2は、基本的に次のような書式で記述します。


セレクタ 宣言ブロック


セレクタ { 宣言 }

「宣言」は、空であるか「プロパティ:値」という形をとります。


セレクタ {}


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


h1 { color:blue }

セレクタとは、スタイルを適用させる対象を示すものです。そして、それに対するスタイルを'{'と'}'の間に「プロパティ:値」という形式で記述します。このとき、プロパティとコロン[:]、値の前後には、自由に空白文字を入れることができます。

また、「プロパティ:値」をセミコロン[;]で区切って、複数指定することもできます。


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


セレクタ {

  プロパティ:値;

  プロパティ:値;

  プロパティ:値

}

さらに、以下のように複数のセレクタをコンマ[,]で区切って指定することによって、複数のセレクタに対して一度に同じスタイルを設定することもできます。


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