複数のセレクタ

「プロパティ: 値」を「;」で区切る

セレクタを使ってスタイルを設定する場合、背景色と文字色、文字の大きさと色など複数のス タイルを設定したいときは「プロパティ: 値」の 組をセミコロン [;] で区切って列挙します。 [;] の後で改行しでも効果は同じなので、見易さを 考慮して改行して記述するとよいでしょう。 3 つ以上列挙する場合も同様です。

背景色と文字色を指定する

布のソースでは背景色を指定する background- colorプロパティを 「blue」、文字色を指定する colorプロパティを 「white」 に指定しています。 なお、列挙した末尾の [プロパティ: 値]のあと の [;] は不要ですが、あとでスタイルを追加す るときに付け忘れないように付けておいてもよ いでしょう。

クラス名を付けて設定対象とする

スタイルの設定対象となるものを「セレクタ 」 といいますが、このセレクタに直接タグ名を指 定する方法と並んで、最も活用範囲の広いのが クラスセレクタです。この 2 つの方法さえしっ かり理解しておけば、ホームページ制作上回る ことはほとんどないといってよいでしょう。ま ず[.クラス名] として任意のクラス名 (半角英 数字、先頭は英字) : を付けてセレクタとします。

例えば右のようにすると、[blue] というクラスに [color: #0000ff ] い う ス タ イ ル を 設 定 し て います。colorプロパティは文字色を設定す るプロパティで、 [#OOOOff] は青色にするという 意味になります。こうしておいて、スタイルを設定したい要素に class 属性の値としてクラス名を設定します。右のサンプルでは、h1、h2 要素でできる見出しの一方に [class=”blue”] でクラス名を設定し、一方には何も指定して いません。

クラス名を指定した タグだけスタイル設定される

ブラウザで表示すると、クラス名を指定したタ グだけにスタイルが設定されるのがわかります 。