【基本書式】
selector {property:value value; property:value}
セレクタで、ここで宣言しているスタイルを適用する対象を指定します。例えば、HTMLで用意されている要素は全てセレクタになり得ます。プロパティは、CSSで予め定義されており、CSSの習得とは、これを覚えることを意味します。
property:value で一まとまりで、これを宣言と呼びます。 'property' には其々取り得る値が決められており、これも覚えなくてはなりません。'property' によっては、その値 value を複数取る場合があります。
CSSでは、プロパティの名前が日常言語で定義されています。例えば、背景色は 'background-color' とか、行の高さは 'line-height' とか。その点、非常に覚えやすくなっています。
【具体例】
<head>
...省略...
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
body {background-color:#ddf; color:navy }
p {line-height:1.5em }
-->
</style>
</head>
一行目は、セレクタがbody要素で、背景色を #ddf (#ddddff)、前景色を navy に設定して在ります。
二行目は、セレクタがP要素で、行の高さを 1.5em （1.5文字分）に設定して在ります。
CSSのプロパティーとその値は親要素から子要素に継承されます。
例えば、文字の色など前景色を表す'color'プロパティを見てみましょう。
body {color:#ccc }
これだけが宣言されていれば、body要素の子要素は全て前景色が #ccc として表示されます。親要素の値を子要素が継承しているわけです。
また、子要素のプロパティの値を算出するに当り、親要素の値を基にする場合も有ります。
body {font-size: 12px }
h1 {font-size: 1.3em }
P {font-size: 0.9em }
上の例では、body要素のフォントの大きさを 12px で指定しています。
body要素内のh1要素のフォントの大きさは 1.8em = 1.8×12px = 15.6px になります。 body要素内のP要素のフォントの大きさは 0.8em = 0.9×12px = 10.8px になります。
| 【表示例】 |
|---|
h1要素ここはbody要素の子要素であるP要素 |
このように、親要素の値は子要素に継承されます。
body要素の 'font-size' を絶対単位で指定すると、ブラウザで標準フォントの大きさが変更できなくなります。文書閲覧者の便宜を考えるなら、 'font-size' の値に絶対単位指定は避けた方が良いでしょう。
私は殆ど全ての長さ指定を、相対単位の「 em 単位（クワタ）」で行っています。
一つのHTMLファイルに導入される複数の StyleSheets 間で、矛盾する記述をしてしまった場合は、一番最後にブラウザに読み込まれる内容が採用されます。複数のスタイル・シートを利用する場合、このような競合が必ず起こります。このとき、どのスタイル・シートの記述が採用されるかの順番は、ブラウザ（一般にはuser agent; UA）がスタイル・シートを読み込む順番で決定されます。
或る一つのスタイルシートの中でも、下の行ほどカスケード順位は上がります。
a:link {text-decoration: underline; color: maroon }
a:hover {text-decoration: none; color: navy }
a:visited {text-decoration: underline; color: #cc9 }
ここでは、記述の順番から、訪問済みのハイパー・リンクにマッチするセレクタ a:visited の方が、カーソルのホバー状態にあるハイパー・リンクのセレクタ a:hover よりも、カスケード順位が高くなっています。未訪問のハイパー・リンク a:link の上にカーソルが乗ると、a:hover {text-decoration: none; color: #cc9;} がマッチしますが、既訪のハイパー・リンクにカーソルを合わせても、何も変わりません。
この「問題」は、a:hover にマッチする宣言の方が a:visited にマッチする宣言よりも先に記述している為に起こることですから、解決するには、これを入れかえれば良い訳です。
a:link {text-decoration: underline; color: maroon }
a:visited {text-decoration: underline; color: navy }
a:hover {text-decoration: none; color: #cc9 }
複数のスタイルで競合が起こったときの処理の順番、優先順位はもう少し複雑です。
また、次のようにして、或る特定の宣言の優先順位を明示的に高めることも出来るのですが、ここでは措きます。
body {color:#ccc ! important; line-height: 1.7em}