スタイルの共通部分をまとめて記述する
ホームページやブログなどのウェブサイトで、同一のスタイルを 何度も指定したいときに便利な スタイルシート(CSS)ですが、各コンテンツで 文字色や文字の大きさなど、さまざまな設定をしていると、スタイルシートも長く煩雑なものになりがちです。
こんなとき、スタイルを指定する際に、共通する部分は半角カンマで区切ってまとめて記述することができます。
<style type="text/css">
<!--
.sampleclass_A,
.sampleclass_B
{ color:red; padding:2px 5px; width:200px; }
.sampleclass_A { background-color:#FF33FF; }
.sampleclass_B { background-color:white; }
-->
</style>
<div class="sampleclass_A">サンプルクラスA</div>
<div class="sampleclass_B">サンプルクラスB</div>
<!--
.sampleclass_A,
.sampleclass_B
{ color:red; padding:2px 5px; width:200px; }
.sampleclass_A { background-color:#FF33FF; }
.sampleclass_B { background-color:white; }
-->
</style>
<div class="sampleclass_A">サンプルクラスA</div>
<div class="sampleclass_B">サンプルクラスB</div>
このサンプルでは、共通部分(段落の幅と、文字の色および余白)をまとめて記述しています。このソースを表示させると、次のようになります。
サンプルクラスA
サンプルクラスB
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス