基本的な 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). 内部スタイル シート: 単一のドキュメントに特別なスタイルが必要な場合は、内部スタイル シートを使用する必要があります。次のように、c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用してドキュメントの先頭に内部スタイル シートを定義できます: 外部スタイル シート: 外部スタイル シートは、多くのページにスタイルを適用する必要がある場合に最適です。外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。各ページは、2cdf5bf648cf2f33323966d7f58a7f3f タグを使用してスタイル シートにリンクします。 (ドキュメントの) ヘッド内の 2cdf5bf648cf2f33323966d7f58a7f3f タグ:

<p style="color: sienna; margin-left: 20px">This is a paragraph</p>