CSS 構文の 3 つのコンポーネントは何ですか?

css 構文は、セレクター、プロパティ、値の 3 つの部分で構成されます。セレクターは、スタイルがページのどの部分に適用されるかをブラウザーに伝えることができます。属性は CSS によって提供されるスタイル設定オプションであり、属性値は属性効果のパラメーターを表示するために使用されます。構文は「selector {attribute」です。 : 属性値}"。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css 構文は、セレクター、プロパティ、値の 3 つの部分で構成されます。

• セレクターは、ページ内のどのオブジェクトにスタイルを適用するかをブラウザーに伝えます。これらのオブジェクトには、特定のタグ、すべての Web ページ オブジェクト、指定されたクラスまたは ID 値を指定できます。待って。ブラウザがこのスタイルを解析すると、セレクターに基づいてオブジェクトの表示効果がレンダリングされます。

• プロパティは、CSS によって提供されるセット スタイル オプションです。属性名は 1 つ以上の単語で構成され、複数の単語はハイフンで接続されます。これにより、スタイル設定される属性の効果を直感的に表現できます。

• Value (値) は、属性の値、つまり属性の効果を表示するために使用されるパラメーターを指します。数値や単位、あるいはキーワードなどが含まれます。

セレクターは通常、定義する HTML 要素またはタグであり、プロパティは変更する属性であり、各プロパティには値があります。プロパティと値はコロンで区切られ、中括弧で囲まれ、完全なスタイル宣言を形成します。

selector {property: value}
选择器{属性:属性值}

例:

body {color: blue}

上記のコード行 関数は次のとおりです。 body 要素内のテキストの色を青として定義します。上記の例では、本文がセレクターであり、中括弧で囲まれた部分が宣言です。宣言は属性と値の 2 つの部分で構成され、色は属性、青は値です。

複数の宣言:

ヒント: 複数の宣言を定義する場合は、各宣言をセミコロンで区切る必要があります。以下の例は、赤いテキストを含む中央揃えの段落を定義する方法を示しています。英語ではセミコロンは区切り記号であり、終了記号ではないため、最後のルールではセミコロンは必要ありません。ただし、経験豊富な設計者のほとんどは、各宣言の末尾にセミコロンを追加するため、既存のルールに対して宣言を追加または削除するときにエラーが発生する可能性が最小限に抑えられるという利点があります。次のように:

p {text-align:center; color:red;}

スタイル定義を読みやすくするには、次のように 1 行に属性を 1 つだけ記述してください:

p {
text-align: center;
color: black;
font-family: arial;
}

スペースと大文字小文字を区別します

ほとんどのスタイル シートには複数のルールが含まれており、ほとんどのルールには複数の宣言が含まれています。複数の宣言と空白の使用により、スタイル シートの編集が容易になります。

body {

color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}

空白を含めるかどうかは、ブラウザでの CSS の動作には影響しません。同様に、 、XHTML とは異なり、CSS では大文字と小文字が区別されません。例外が 1 つあります。HTML ドキュメントを操作する場合、クラス名と ID 名は大文字と小文字が区別されます。

CSS の高度な構文: セレクターのグループ化

セレクターをグループ化して、グループ化されたセレクターが同じ宣言を共有できるようにすることができます。

グループ化する必要があるセレクターをカンマで区切ります。以下の例では、すべての見出し要素をグループ化しています。すべてのタイトル要素は緑色です。

h1,h2,h2,h3,h5,h6 {
color: green;
}

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS 構文の 3 つのコンポーネントは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。