CSS 文法規則

CSS スタイルは、Web ブラウザーによって解析され、HTML ドキュメントの対応する要素に適用される一連のルールで構成されます。 CSS スタイル ルールは、セレクター、プロパティ、および値の 3 つの部分で構成されます。

 

• セレクター: HTML 要素の id、クラス属性、または要素名自体と、スタイルを定義する HTML 要素を指定するために使用されるいくつかの特別な記号で構成されます. たとえば、セレクターp 、スタイルを定義することを意味しますページ内のすべての<p>タグ。
• 属性: HTML 要素に設定したいスタイルの名前で、color (色)、border (ボーダー)、font (フォント) などの一連のキーワードで構成されます。CSS には多くの属性が用意されており、それらはW3C の公式 Web サイトで表示できます。
• 値: 数値と単位またはキーワードで構成され、特定の属性の表示効果を制御するために使用されます。たとえば、色属性の値は赤または #F1F1F1 などです。

次の図に示す文法規則に従って、CSS スタイルを定義できます。

上の図からわかるように、CSSの文法規則では、属性と値を区切るためにコロン:が必要です.各属性と値の組み合わせはステートメントと見なすことができ、末尾にセミコロンが必要です. each statement ;結論として、同じセレクターに属する宣言は中括弧{ }で囲む必要があります。

上記の構文例では:

• セレクター h1 は、Web ページ内のすべての<h1>タグのスタイルを定義することを意味します。
• 属性 color はフォントの色を示し、値 blue はフォントが青に設定されていることを示します。
• 属性 text-align はテキストの配置を示し、値 center はテキストの配置が中央揃えに設定されていることを示します。

CSS を読みやすくするために、次のように、CSS を定義するときにコードの 1 行に 1 つの宣言のみを配置できます。

 
h1 {
    color: blue;
    text-align: center;
} 

ヒント: CSS のプロパティとほとんどの値は大文字と小文字を区別しませんが、CSS のセレクターは通常、大文字と小文字を区別します. たとえば、クラス セレクター .itkiso と .ItKiso は、2 つの異なるセレクターを表します. CSS にはさまざまな種類の「セレクター」があり、後で詳しく紹介します。