基本的な CSS 構文_html/css_WEB-ITnose

1. はじめに

カスケード スタイル シートは、HTML (標準汎用マークアップ言語のアプリケーション) や XML (標準汎用マークアップ言語のサブセット) などのファイル スタイルを表現するために使用されるコンピューター言語です。

CSS の最新バージョンは CSS3 です。これは、Web ページのパフォーマンスとコンテンツを完全に分離できるスタイル デザイン言語です。従来の HTML のパフォーマンスと比較して、CSS は Web ページ内のオブジェクトの位置とレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズとスタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能があり、 Design は現在、テキスト表示に基づいた最も優れた表現力のあるデザイン言語です。 CSS は、さまざまなユーザーの理解力に応じて記述方法を簡素化または最適化することができるため、あらゆるタイプの人にとって可読性が高くなります。

2. 基本構文

CSS ルールは、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構成されます。

selector {declaration1; declaration2; ... declarationN }

各宣言は属性と値で構成されます。

selector {property: value}

以下の例では、h1 がセレクター、color と font-size が属性、red と 14px が値です。

h1 {color:red; font-size:14px;}

3. セレクターの種類

a) タグ セレクター: セレクターは通常、p、h1、em、a、または html 自体などの HTML タグです。

html {color:black;}h1 {color:blue;}h2 {color:silver;}

b). クラス セレクター: クラス セレクターは通常、. 記号で始まり、HTML ファイルの class 属性を通じて参照されます。

.important {color:red;}<h1 class="important">This heading is very important.</h1>

c).ID セレクター: 通常 # で始まり、HTML ファイルの id 属性を通じて参照されます。クラス セレクターとは異なり、ID セレクターはドキュメント内で 1 回のみ使用できます。

#mostImportant {color:red; background:yellow;}<h1 id="mostImportant">This is important!</h1>

d). 属性セレクター: 通常は括弧で囲まれますが、属性値に関係なく特定の属性を持つ要素を選択したい場合は、単純な属性セレクターを使用できます。これには多くの用途があります:

[attribute] は、指定された属性を持つ要素を選択するために使用されます。

[attribute=value] は、指定された属性と値を持つ要素を選択するために使用されます。

[attribute~=value] は、スペースで区切られた単語のリストとして属性値を選択するために使用され、そのうちの 1 つが value に等しい。

[attribute|=value] は、value で始まるハイフンで区切られた単語のリストとして属性値を選択するために使用されます。

[attribute^=value] 属性値が指定された値で始まるすべての要素と一致します。

[attribute$=value] は、属性値が指定された値で終わるすべての要素と一致します。

[attribute*=value] 属性値に指定された値が含まれるすべての要素と一致します。

4. HTML ドキュメントでの CSS の使用

a) 直接スタイル シート: プレゼンテーションとコンテンツが混在するため、インライン スタイルはスタイル シートの多くの利点を失います。たとえば、スタイルを要素に 1 回だけ適用する必要がある場合など、この方法は注意して使用してください。

b). 内部スタイル シート: 単一のドキュメントに特別なスタイルが必要な場合は、内部スタイル シートを使用する必要があります。次のように、