Class as Selector
セレクタに、クラス名を付けて区別します。DTPやWordのスタイル名に相当します。
同じタグに、クラス名を付けて用途に応じて使い分ける事ができます。
共通したクラスセレクタ
ピリオド．クラス名で全てのタグに共通したクラスセレクタとして利用できます。
サンプルのbodyというセレクタは、<P>タグや<H>タグなどに指定した場合、全て同じ表示になります。
.class name { property : values ; property : values ; ・・・; }
<style type="text/css">
<!--
.body { font-size: 10.0pt; line-height: 1.5em; font-family: ＭＳ Ｐゴシック, Osaka;
}
-->
</style>
特定のタグに指定するクラスセレクタ
タグ名．クラス名で、特定のタグのみ設定できるクラスセレクタが作れます。
サンプルは、同じ<P>タグに指定の異なるheadクラスとbodyクラスセレクタを作った場合です。
tag.class name { property : values ; property : values ; ・・・; }
<style type="text/css">
<!--
p.head { font-size: 11.0pt; line-height: 1.5em; font-family: ＭＳ Ｐゴシック, Osaka;
}
p.body { font-size: 10.0pt; line-height: 1.6em; font-family: ＭＳ Ｐゴシック, Osaka;
}
-->
</style>
クラスセレクタをHTMLに指定
クラスセレクタをHTML本文に指定するには、タグにCLASS属性を加え、スタイル名を記入します。
<tag class="class name">
<p class="body">このテキストは、bodyというクラスセレクタが適用されます。</p>
 |
 |
|---|
