CSSの基本構文

[はじめに] CSS 構文 CSS ルールは、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構成されます。セレクター {宣言 1; 宣言 2 } セレクターは通常、スタイルを変更する必要がある HTML 要素です。各宣言は、プロパティと

CSS 構文で構成されます。

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

selector {declaration1; declaration2; ... declarationN }

セレクターは通常、スタイルを変更する必要がある HTML 要素です。

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

プロパティは、設定するスタイル属性です。各属性には値があります。プロパティと値はコロンで区切られます。

selector {property: value}

次のコード行は、h1 要素内のテキストの色を赤に設定し、フォント サイズを 14 ピクセルに設定します。

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

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

下の図は、上記のコードの構造を示しています:

ヒント: 宣言を囲むには中かっこを使用します。

さまざまな記述方法と値の単位

英語の単語 red に加えて、16 進数の色の値 #ff0000 も使用できます:

p { color: #ff0000; }

バイト数を節約するには、次の略語を使用できます。 CSS の:

p { color: #f00; }

RGB 値は 2 つの方法で使用することもできます:

p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); }

RGB パーセントを使用する場合は、値が 0 の場合でもパーセント記号を記述する必要があることに注意してください。ただし、他の場合にはこれを行う必要はありません。たとえば、サイズが 0 ピクセルの場合、単位に関係なく 0 は 0 であるため、0 の後に px 単位を使用する必要はありません。

引用符を忘れずに記述してください

ヒント: 値が複数の単語の場合は、値に引用符を追加する必要があります:

p {font-family: "sans serif";}

複数の宣言:

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

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の基本構文の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。