TOP ＞ スタイルシート基本知識 ＞ 同名のクラスを複数の要素に設定する。
同名のクラスを複数の要素に設定する。
同じ名前のクラスを違う要素に設定することが出来ます。このとき、各要素に設定したクラスは、それぞれ他の要素には影響しません。
「要素名.クラス名」で設定した値と、 「.クラス名」で同じ名前のクラスを設定した場合、
「<要素名 class="クラス名"> ・・・・ </要素名>」の部分では、 「要素名.クラス名」と 「.クラス名」両方の書籍が反映されます。
このとき、同じプロパティに違う値を指定した場合は、「要素名.クラス名」の方が適用されます。
”同名のクラスを複数の要素に設定する”のサンプルはクリック！
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>同名のクラスを複数の要素に設定するのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h1.kyotyo{ background-color: yellow; color: red; } p.kyotyo{ background-color: silver; color: blue; border-bottom: 3px double; } .kyotyo{ border-bottom: 3px solid; } --> </style> </head> <body> <h1 class="kyotyo">クラス「kyotyo」をh1要素に設定しています。</h1> <h1 class="kyotyo">内容は背景色を黄色・文字色を赤にしてあります。</h1> <h1 class="kyotyo">「.kyotyo」単独で設定したクラスに下線の設定が入れてあるので、このように下線が入っています。</h1> <br><br> <p class="kyotyo"><p>タグでクラス「kyotyo」を指定すると、p要素に設定したスタイルシートが適用されます。</p> <p class="kyotyo">内容は背景色を銀色・文字色を青・下部に二重線を入れています。</p> <p class="kyotyo">「p.kyotyo」で下線を指定してあるので、そちらが優先されて「.kyotyo」クラスで設定した下線が反映していません。</p> <br><br> <div class="kyotyo">ちなみに、「.kyotyo」クラスを単独で指定するとこのようになります。</div> </body> </html> |
[
スタイルシート基本知識 ]
