(003)CSSの基礎_html/css_WEB-ITnose

1. はじめに

CSS はページにスタイルを追加し、コンテンツの外観を強化および改善することができます。構造を提供するのは XHTML です。各要素はコンテンツの異なる部分を識別し、属性は要素に関する詳細情報を伝えます。 CSS は、これらの XHTML 要素の外観に影響を与えるもう 1 つのレイヤーです。ページ上の色、フォント、サイズ、背景、レイアウトはすべて、CSS を賢く使用することで制御できるコンテンツのプレゼンテーションの側面です。

2. CSS ルールの分析

要素や属性が xhtml 文書の素材だとすると、CSS 文書の素材は「ルール」です。 「ルール」とは、ブラウザーが指定された説明的な値に基づいて xhtml 要素の外観を変更するために従うことができる一連の命令です。 CSS ルールは、以下の図に示すように、いくつかの部分で構成されます。

セレクターは、スタイルが適用されるターゲット要素を決定するために使用されるルールの一部です。そのスコープは、特定の要素のすべてのインスタンスに影響を与えるのに十分なほど大きく、少数または 1 つの要素のみに影響を与えるほど十分に小さいです。

スタイル宣言には属性と値の 2 つの部分が含まれます。プロパティは、色、幅、ページ上の位置など、変更される要素のプレゼンテーションの側面です。 CSS 言語では多数のプロパティを使用できます。属性の値は、選択した要素に適用する特定のスタイルを指定します。許容される値は属性自体によって異なります。一部の属性はスペースで区切って複数の値を持つことができます。

スタイル宣言は中括弧「{}」の間にあります。セレクターに対して複数のスタイル宣言を指定できるため、単一のルールで要素の外観の複数の側面を変更できます。プロパティとその値はコロン (:) で区切られ、スタイル宣言はセミコロンで終わります。セミコロンは複数のスタイル宣言を区切ることができますが、ルール内にスタイル宣言が 1 つしかない場合はオプションです。一連のスタイル宣言の最後のものについても同様です。用心したほうがいいですが、すべてのスタイル宣言の後に (たとえ 1 つしかない場合でも) セミコロンを付ける習慣をつけるのは悪いことではありません。

CSS コードがこれらの基本的な構造と構文に準拠していない場合、たとえば、属性と値を区切る閉じ括弧やコロンが欠落している場合、ルール全体、さらにはスタイル シート全体が失敗する可能性があります。 xhtml と同様に、スタイルシートも適切で正しく構築されている必要があります。 w3c は、CSS スタイル シートのエラーを見つけるのに役立つ CSS バリデーターも提供します。