CSS基礎学習3：CSS syntax_html/css_WEB-ITnose

CSS 構文は、基本構文と高度な構文に分かれています。

1 CSS基本的な構文

（1）CSS構文

TSelector {deflaration1; ... Declarationn}

セレクターは通常、スタイルを変更する必要がある HTML 要素です。各宣言はプロパティと値で構成されます。プロパティは、設定するスタイル属性です。各属性には値があります。プロパティと値はコロンで区切られます。

。この例では、h1

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

use using using ' s ' s ‐ ‐ ‐ ‐ h1 {color: red; font-size: 14px;

‐ ‐ ‐ ‐

‐ 赤に、16 進数 #ff0000 のカラー値を使用することもできます:

p {color: #ff0000;}

バイトには、CSS の略語を使用できます:

p {color: #f00; RGB 値を使用 RGB を使用してください ‐ ‐ ‐ ‐ ‐ p { color: rgb(255,0,0)

; RGB パーセントを使用する場合、値が 0 の場合でもパーセント記号を記述する必要があることに注意してください。ただし、他の場合にはこれを行う必要はありません。

たとえば、サイズが 0 ピクセルの場合、単位が何であっても 0 は 0 であるため、0 以降の px 単位を使用する必要はありません。定義する場合 複数の宣言がある場合は、各宣言をセミコロンで区切ります。

次の例は、赤いテキストを含む中央揃えの段落を定義する方法を示しています。最後のルールは、英語ではセミコロンは

の区切り記号であり、終了記号ではないため、セミコロンを追加する必要はないということです。ただし、経験豊富なデザイナーのほとんどは、各ステートメントの末尾にセミコロンを追加します。これには、

既存のルールからステートメントを追加または削除するときにエラーが発生する可能性が最小限に抑えられるという利点があります。次のようにします:

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

スタイル定義を読みやすくするために、次のように属性を 1 行に 1 つだけ記述します。

p {

text -align : センター;

color: 黒 font-family: arial;複数の宣言と空白を使用すると、スタイルシートの編集が容易になります。

margin: 0;

font-family: Georgia, Palatino Serf;

}

スペースがブラウザーの CSS の作業効果に影響を与えないかどうか。 XHTML とは異なり、CSS は小文字を区別しません。ただし、例外が 1 つあります。HTML ドキュメントを操作する場合、クラス名と ID 名は大文字と小文字が区別されます。

高度な CSS 構文

グループ化する必要があるセレクタを区切るにはカンマを使用します。

で

以下の例では、すべてのタイトル要素をグループ化しています。すべてのタイトル要素は緑色です。

h1,h2,h3,h4,h5,h6 使用する‐‐ ‐ ‐ � � � � h1,h2,h3,h4,h5,h6 � � � しかし、常にこのように機能するとは限りません。次のルールを見てください: o Body {

font-Family: Verdana, sans-Serif;

}

上記のルールに従って、サイトの Body 要素は Verdana フォントを使用します (訪問者システムがフォント、）。 CSS

継承では、子要素は最上位要素 (この場合は body) が所有するプロパティを継承します (これらの子要素には p、td、ul、ol、ul、li、dl、dt、

など)
dd)。追加のルールは必要ありません。本文のすべての子要素は、子要素の子要素と同様に Verdana フォントを表示する必要があります。そして、ほとんどの

最新のブラウザでは、これが実際に当てはまります。

しかし、ブラウザ戦争の血みどろの時代では、標準のサポートが企業にとって優先事項ではなかったので、これは必ずしも起こらないかもしれません。たとえば、Netscape 4 は継承をサポートしていないだけでなく、body 要素に適用される規則も無視します。 IE/Windows IE6 に関連する問題が依然として存在するまでは、表内のフォント スタイルは無視されます。私たちは何をすべきか？

。 body font-family: Verdana, sans-serif;

}

4.0 ブラウザは継承を理解できませんが、グループ セレクターは理解します。これは一部のユーザーの帯域幅を無駄にしますが、

Netscape 4 ユーザーをサポートする必要がある場合は実行する必要があります。

(4) 相続は呪いですか？

「Verdana、sans-serif」フォントをすべての子要素に継承させたくない場合はどうすればよいでしょうか?たとえば、段落フォントを

Times にするとします。問題ない。 P の特別なルールを作成して、親要素のルールを削除します。

body {

font-family: verdana, sans-service dt, dd {

font-family: Verdana, sans-serif;

}

font-family: Times、「Times New Roman」、セリフ;
}

著作権表示: この記事はブロガーのオリジナル記事です。