CSSの基本構(gòu)文
基本的な構(gòu)文ルール
CSS ルールは、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構(gòu)成されます。
selector { declaration1; declaration2; ... declarationN; }
セレクターは通常、スタイルを変更する必要がある HTML 要素です。 各宣言はプロパティと値で構(gòu)成されます。各屬性には値があります。プロパティと値はコロンで區(qū)切られます。
selector {property: value
例:
h1{ color:red; font-size:14px; }
複數(shù)の屬性がある場合は、セミコロンを使用して區(qū)切ります。このコード行は、h1 要素內(nèi)のテキストの色を赤として定義し、フォント サイズを 14 ピクセルに設(shè)定します。
下の図は、上記のコードの構(gòu)造を示しています:
注: 値が 1 単語より大きい場合は、次のように引用符を追加する必要があります
p{font-family:"sans serif"}
例:
右クリック編集領(lǐng)域に新しいindex.htmlとMyCss.cssを作成します
2つのファイルにそれぞれ次のコードを入力します(括弧はコード補(bǔ)完をサポートします):index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引外部資源 MyCss.css--> <link rel="stylesheet" href="MyCss.css" type="text/css"> </head> <body> <h1> PHP中文網(wǎng) </h1> </body> </html>
MyCss.css
h1{ color: red;font-size: 50px; }
h1 でテキストの色を定義します。要素を赤に設(shè)定し、フォント サイズも 50 ピクセルに設(shè)定します。
Ctrl+s 2 つのファイルを保存し、index.html をクリックして実行中の効果を確認(rèn)します: