スタイルシート/cssでwebデザイン：1歩！スタイルシート

まず「セレクタ」からいきましょう。「セレクタ」には設定したい書式の対象を指定します。ごくカンタンにいうと、 HTMLの要素をここに入れるわけです。ここでは、深く触れませんが、「ID」や「クラス」といったものを指定することもできます。「ID」 ・「クラス」は今のところ気にしないで結構です。

次に「プロパティ」ですが、これは指定した「セレクタ」に設定したい書式の種類を書き込みます。たとえば、文字の大きさ・背景色・ 文字の色・文字を強調する・・・など。そして、この「プロパティ」に値を設定します。

　スタイルシートの基本的な書き方　

セレクタ｛プロパティ：値；｝

　例　　： 　HTMLページ内のh1タグで囲んだテキストの大きさを18ポイントにする

h1 { font-size : 18pt;}

「プロパティ」 は複数指定することができます。「セレクタ」に複数の書式設定をする場合は、「プロパティ：値；」の部分を｛｝ 内に続けて書いていけばOKです。

　「プロパティ」を複数指定する　

セレクタ｛プロパティ：値； プロパティ：値； プロパティ：値；…｝

　例　　：　HTMLページ内のh1タグで囲んだテキストの大きさを18ポイントにして、 文字色を赤色にする。

h1 { font-size : 18pt; color : red; }

逆に「セレクタ」複数に対して、同じ「プロパティ」を指定することも可能です。セレクタをコンマで区切って書いていきます。

　複数の「セレクタ」 に同じプロパティを指定する　

セレクタ,セレクタ｛プロパティ：値； …｝

　例　　：　HTMLページ内のh1タグとPタグで囲んだテキストの文字色を赤色にする。

h1,p { color : red; }

おなじセレクタを複数設定することもできます。ただし同じセレクタで同じプロパティに違う値を設定した場合、 後から指定した値が有効になります。

　同じ「セレクタ」を複数指定する　

　例　　：　HTMLページ内のh1タグとPタグで囲んだテキストの背景色を赤色にして、 文字サイズをそれぞれ18/15ポイントにする場合。

h1,p { background-color : red; font-size : 18pt; }

p { font-size : 15pt; }

このように記述すると、Pタグで囲んだテキストは背景色が赤色になり、 文字の大きさは、後から指定したプロパティが有効になり、15ptになります。