CSS 2.0 の勉強 (スタイルの優先順位)

CSS 2.0 を勉強しましょう。

スタイルの優先順位を説明します。

通常スタイルは、外部スタイルシート→スタイル要素→スタイル属性(インラインスタイル)の順で優先順位が決定します。

以下の例では、外部スタイルシートに定義されている一部のスタイルを内部要素よりも優先順位を上げています。

■コード (HTML)

<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
p {
color: red;
}
</style>

</head>

<body>

<p>Hello, World!</p>
<p><span style="color:#f0f0f0;">Hello, World!</span></p>

</body>

■コード (CSS)

p {
color: blue !important
}

■ 説明
!important キーワードを付与すると優先順位を上げることができます。通常スタイルの設定はセミコロンで終了しますが、このキーワードを付与した場合はセミコロンは不要です。