スタイルの優先順位

■　スタイルの優先順位

スタイルシートでは、外部スタイルシートを読み込む方法、style要素を使用してHTML内にまとめて設定する方法、style属性を使用してタグに直接スタイルを設定する方法、といったものが用意されています。そのため、１つの文書に複数のスタイルが設定され、それらが競合する可能性もあります。こうした場合に対処するために、スタイルには基本的な優先順位がつけられています。

つまり、後からブラウザに読み込まれるスタイルほど優先順位が高くなる（後から読み込まれた設定が咲きに読み込まれた設定を上書きする）というわけです。また、一つの文書内では競合が起こった場合は、より限定的で詳細な指定を行っているスタイルが優先されます。例えば要素に対して指定したスタイルよりは、クラスによるスタイルの方が優先される、といったようになります。

■　最優先のスタイルを設定する

スタイルシートには、製作者や設定方法によって優先順位がつけられて処理されますが、同時に複数のスタイルシートを適用することで、場合によってはスタイルが競合し、意図したスタイルにならない可能性も生じます。こうした問題を避けるため、優先させたいスタイルに「!important」というキーワードを指定しておく方法があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>最優先のスタイルを設定する</title>
<style type="text/css">

</style>
</head>
<body>
<h1 style="color:#000">スタイルシートとは</h1>
</body>
</html>

■　スタイルの継承

プロパティには子要素によって値が継承されるものがあります。例えば

body{color:blye} /*ページ内のテキストの色を青に指定*/

このような指定があった場合、特に文字色の指定されていない子要素は、body要素の指定値を継承して青で表示することになります。（ただし、kジェイ証される値が相対地で指定されていた場合は、まず相対値を絶対値として計算してから継承します）

また、各プロパティには「inherit」という値を指定することで、通常は値を継承しない要素でも、強制的に親要素の値を継承させることができます。

■　ボックスの概念

スタイルシートでは、すべての要素はボックスと呼ばれる四角い領域を持つと考え、この領域や領域を囲む枠線に対して大きさや色・位置の指定をすることでスタイルを変更します。ボックスは、内容領域・マージン・パディング・枠線の４つの部分から構成されています。

内容領域　　：テキストや画像など、要素の内容が表示される領域です。
　　　　　　　　widthプロパティやheightプロパティでサイズを指定することができます
パディング　：要素の内容が表示される部分と枠線との間の余白領域です。
　　　　　　　　要素のbackground-colorプロパティで指定した背景色はこの部分にも適用されます。
枠線　　　　：要素の周りに表示される枠で、パディングの外側に設定されます。
マージン　　：枠線の外側にあ設定される余白領域です。
　　　　　　　　要素の background-colorプロパティで指定した背景色はこの部分で適用されず、背景は透明になります。
　　　　　　　　そのため、親要素に背景が設定されている場合には、その背景が透けて見えることになります。
背景色・背景画像：内容領域とパディング領域（枠線の内側）に表示される色や画像です。