CSSの基本構造

HTML(あるいはXML)によって構造化された文書は、 要素(element)の入れ子構造となっています。 CSSではそのそれぞれの要素に対して、それが表示される際の書式を指定します。

特徴

• 複数の種類の要素に対して、共通の属性を同時に指定できます。
• 要素の入れ子の構造に依存した指定ができます。
• クラスが使えます。
• コメントはC言語風のものです(/*   */)。
• 文字には半角英数字とハイフン(-)、アンダースコア(_)、およびUnicode(ISO10646-1の文字符号161以上)が使えます。ただし、Unicodeには対応していないブラウザもあります。
• HTMLのソース内に記述する場合には、そのソースの文字コードで記述すれば解釈されるようです(これは仕様外の動作と思われます)。

基本構造

セレクタでこのスタイルを適用する対象を指定します。 対象となるのは要素やクラス、idなどです。 セレクタは「,」で区切って複数の対象を一度に指定することができます。 属性の値が複数の場合には「 」(半角スペース)で区切ります。 なお、セレクタで「 」(半角スペース)で区切って複数指定すると、 それは文脈(context)の指定と解釈されます。

なお、CSS2の仕様では属性による選択もできますが、 このテキスト執筆時点ではIEには実装されていません。

例

例1: h1とh2を中央揃えにして緑にする

使用例

例2: h2の中のemは赤にする (文脈の指定)

使用例

イタリックになっているのはem要素の初期値がそうだからです。

例3: divのexampleクラスだけ青にする

なお、要素divを書かずに「.example」とすれば、 すべての要素に指定可能なクラスとなります。

使用例

クラスを定義しておくと、 HTMLの要素でそのクラスのスタイルを適用させたい複数の要素を 同一のクラスに指定することができます。 一方、要素のidを指定してスタイルを定義することもできますが、 idは要素固有のものですので、 特定の要素のスタイルをピンポイントに定義することになります。 idを使った定義では「.」の代わりに「#」を使います。 要素での属性名は「class」ではなく「id」です。

属性の継承

属性には親要素の属性が継承されるものとそうでないものがあります。 例えば背景色は初期値として親要素の背景色が適用されますが、 余白(margin)はそれぞれの要素が固有に持つべき値なので親要素の marginの値は継承されません。