+++ スタイルシート入門(基礎編)+++

基本的なスタイルシートの記述ルールですが、

Selector {property:value}
セレクタ{属性:値} で{　} 内は宣言と呼ばれる。

セレクタ：スタイルを設定する対象(各種タグ名、クラスなど)を記述
属性：適用したいスタイルの属性を記述
値：属性の指定値(サイズ、色など)

例えば
H1 { color: red }
は、<H1>〜</H1>で囲われた箇所は赤で表示する、となります。

スタイルシートでは、下記のように複数の指定ができます。

■宣言の部分を複数指定(宣言をグループ化)■
下記のようにセミコロン(;)で区切ります。この場合、<H1>〜</H1>で囲われた箇所は、 20ポイントの大きさで赤で表示する。

H1{color:red;font-size:20pt;}

■セレクタの部分を複数指定(セレクタをグループ化)■
下記のようにカンマ(,)で区切ります。この場合、<H1>〜</H1>及び<P>〜</P>で囲われた箇所は、 20ポイントの大きさで赤で表示する。

H1,P{color:red;font-size:20pt;}

■セレクタ、宣言の複数指定■
下記のように一度に複数の記述も可能です。

H1,P{color:red;font-size:20pt;}
H3{color:black;font-size:18pt;}
P{text-align:left}

これらのようにスタイルシートでは、上記のような簡単な指定でページ内の見栄えを指定、変更できます。

Prev | Home | Next