since: 21st/May/2002; Last Modified: 22nd/May/2002
本稿で作ったサンプルをまとめておきます
ここに挙げた HTML 文書は、全て XHTML 1.1 で記述したものです。 CSS ファイルに関しては、ブラウザでは開けないかもしれません。その場合は、ローカル PC に保存して、テキストエディタで開いてみてください。
スタイルシートの適用方法は複数ありますので、矛盾した記述が含まれる事があります。外部スタイルシートでは、段落の背景色を青にしているが、 style 要素では赤にしているなどの場合の事です。
外部スタイルシート、 style 要素、 style 属性の適用優先順位は次のようになります。
最初に外部スタイルシートが適用され、それを style 要素が上書きし、更に style 属性が上書きします。外部スタイルシートで段落の文字色を青に指定してあっても、 style 要素で赤に指定してあれば上書きされます。更に、 style 属性で緑に指定されていれば、その段落は最終的には緑色に指定された事になります。
複数の外部スタイルシートを適用している場合は、後ろに記述した link 要素が参照するスタイルシートほど、優先順位が高くなります。 たとえば、次のようなソースの場合を考えます：
<head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" /> <meta http-equiv="content-style-type" content="text/css" /> <title>坂口安吾を考える</title> <link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" /> <?xml-stylesheet href="./atomic.css" type="text/css" media="screen" ?> <link rel="stylesheet" href="./cool.css" type="text/css" media="screen" /> <?xml-stylesheet href="./cool.css" type="text/css" media="screen" ?> <link rel="stylesheet" href="./cover.css" type="text/css" media="screen" /> <?xml-stylesheet href="./cover.css" type="text/css" media="screen" ?> </head>
これは XHTML の場合の例です。最初に atomic.css が読み込まれ、次に cool.css が上書きし、最後に cover.css が上書きします。
外部スタイルシートでも style 要素でも、その中に記述する順番によっても優先順位が指定されます。最後に記述したものほど優先順位が高くなります。
次のようなスタイルシートを考えます：
h1 { text-aling: center;
color: navy;
text-align: right }
p { color: navy }
address { text-align: center }
p { color: maroon }
h1 要素に対するスタイルでは、 text-align が center と right の二通りが指定されています。実際に適用されるのは、後に記述された right の方です。
p 要素に対するスタイルでは、 color が navy と maroon の二通りが指定されています。実際に適用されるのは、後に記述された maroon の方です。