これまでスタイルは STYLE 属性の値としていちいち書き込んでいた。しかし,ある要素とスタイルを対応づける場合などにこの方法はひじょうに効率が悪い。
HTML ファイルに,要素とスタイルの対応づけを前もって行うことができる。これに用いるのが <STYLE> で,これは“ここから〜ここまで”の構造を持ち,<HEAD>...</HEAD> の間,すなわちヘッダに書く。CSS を書き込む場合の書式は次のとおり。
<STYLE TYPE="text/css">...</STYLE>
TYPE 属性は必須である。CSS を使う場合は値は上記のように text/css になる。これは,決まり文句だと思っていただいてかまわない。
この中に CSS を書くわけだが,CSS 未対応のブラウザはそれが CSS だとは“わからず”,画面に表示させてしまう。これを回避するために,HTML のコメントアウト <!-- ... --> で <STYLE> の内容をすべてくくってしまうのがよい。実際書く場合は,次のようになる。
<STYLE TYPE="text/css">
<!--
...
-->
</STYLE>
これでは CSS が読み飛ばされるのではというと,そうではない。CSS 対応のブラウザにとっては,<STYLE> でくくられた範囲はもはや HTML に見えていないので,コメントアウト <!-- ... --> が出てきても無視し,内部の CSS は有効になる。
ちなみに,CSS のコメントアウトは /* ... */ で,C 言語のそれと同じである。
<STYLE> では,要素とスタイルとを対応づけるわけだが,この書式は,STYLE 属性に書く場合よりも多少複雑になる。
(セレクタ){(属性):(値); (属性):(値); ...}
“(属性):(値);”という宣言は変わらないが,いくつかの宣言を半角の中かっこ「{」,「}」でくくり,ひとまとめにしてセレクタに対応づける。セレクタは,中かっこ内の宣言をどんな条件で適用させるかを指定するものである。最も簡単な場合としては,セレクタとして要素名を指定する。セレクタと,中かっこでくくられた宣言をまとめて CSS の命令(ルールセット)という。
ここで指定したスタイルは,ファイル中で特別なことがない限り要素が出てくると STYLE 属性を指定しなくても有効になる。
たとえば,ファイルのヘッダ部分に次のような CSS を書き込んだとする。
<STYLE TYPE="text/css">
<!--
H1 { color: teal; }
P { text-indent: 2em; }
EM { color: green; }
-->
</STYLE>
それで本文を書く。
<H1>First step CSS</H1>
<P>本チュートリアルは,HTML 4.0 に対応した<EM>カスケーディングスタイルシート : CSS</EM> の基本チュートリアルです。</P>
<P>CSS 対応ブラウザでご利用いただけます。</P>
本チュートリアルは,HTML 4.0 に対応したカスケーディングスタイルシート : CSS の基本チュートリアルです。
CSS 対応ブラウザでご利用いただけます。
見てのとおり,<STYLE> で指定したとおりのスタイルが STYLE 属性を指定しなくても有効になっていることがわかる。
ちなみに,CSS のスタイルシート中には,語を分断しない限り,空白文字(タブ・改行を含む)を入れてもかまわない。
複数の要素(一般にはセレクタ)に同一のスタイルを適用する場合,要素(セレクタ)を半角カンマ「,」で区切って並べて,それから中かっこでくくられた宣言を書くことができる。
H1, H2 { color: red; }
たとえば上の例は次と同等になる。
H1 { color: red; }
H2 { color: red; }
これにより,命令をたくさん書く手間を省くことができる。