スタイルシートのオブジェクト志向的な書き方ってありますか？

質問

次のような背景画像部分だけが異なる場合、

.MY_TABLE_1 {
position: static;
height: 15;
color: #ffffff;
background-color: #ffffff;
background-image: url('bg_title_blue.gif');
font-family: MS UI Gothic;
font-weight: normal;
font-size: 12;
text-indent: 10;
border-left: thin groove #cccccc;
border-right: thin groove #666666;
border-top: thin groove #cccccc;
border-bottom: thin groove #666666;
padding: 0
}

.MY_TABLE_2 {
position: static;
height: 15;
color: #ffffff;
background-color: #ffffff;
background-image: url('bg_title_yellow.gif');
font-family: MS UI Gothic;
font-weight: normal;
font-size: 12;
text-indent: 10;
border-left: thin groove #cccccc;
border-right: thin groove #666666;
border-top: thin groove #cccccc;
border-bottom: thin groove #666666;
padding: 0
}

これをまとめて、

.MY_TABLE_BASE {
position: static;
height: 15;
color: #000000;
background-color: #ffffff;
font-family: MS UI Gothic;
font-weight: normal;
font-size: 12;
text-indent: 10;
border-left: thin groove #cccccc;
border-right: thin groove #666666;
border-top: thin groove #cccccc;
border-bottom: thin groove #666666;
padding: 0
}

.MY_TABLE_1 {
ほにゃらら
background-image: url('bg_title_blue.gif');
}

.MY_TABLE_2 {
ほにゃらら
background-image: url('bg_title_yellow.gif');
}

というようにまとめて指定する方法はないのでしょうか？？？

回答No.2

mousengoke · ベストアンサー

background-image: url('bg_title_blue.gif');
を指定するほうに

class="MY_TABLE_1 MY_TABLE_BASE"

を指定して

background-image: url('bg_title_yellow.gif');
を指定するほうに

class="MY_TABLE_2 MY_TABLE_BASE"

を指定すれば

.MY_TABLE_BASE {
position: static;
height: 15;
color: #000000;
background-color: #ffffff;
font-family: MS UI Gothic;
font-weight: normal;
font-size: 12;
text-indent: 10;
border-left: thin groove #cccccc;
border-right: thin groove #666666;
border-top: thin groove #cccccc;
border-bottom: thin groove #666666;
padding: 0
}

.MY_TABLE_1{
background-image: url('bg_title_blue.gif');
}

.MY_TABLE_2{
background-image: url('bg_title_yellow.gif');
}

でうまくいくはずです。
あと、気になるのはフォント名にスペースがあるのと該当フォントが無いときの記述が無いことですね。

font-family: MS UI Gothic;

は

font-family: "MS UI Gothic",sans-serif;

としたほうがいいです。sans-serifはゴシック系のフォントを意味します。

お礼

皆さん、ありがとうございます。

やっと出来ました。
class="MY_TABLE_1 MY_TABLE_BASE"
とやって、間は、スペースならいくつ入ってもいいのですね。
コンマだったらわかりやすいと思ってコンマにしたら駄目でした。

これって三っ以上つなげても大丈夫かな？

スタイルシートも奥が深いのがわかりました。

「ホームページデザインの要」であり、
優れたページ作成や迅速、機動的な改訂に、
おおいに役に立つと思いますので、
これからこれを活用したいと思います！

回答No.1

Dpop

スタイルシートの正式名称を知っていれば、理解できていた事なのかも知れません。。。

オブジェクト指向的と言うか、要するに継承(カスケード)がやりたいのですよね?(違いますか?)

.my_table {
なんちゃら
}

.my_table #my_table1 {
かんちゃら
}

.my_table #my_table2 {
うんちゃら
}

などと定義すると、my_table を指定したところでは、「なんちゃら」の指定が有効となり、my_table の指定内で指定された my_table1 内であれば、「なんちゃら」と「かんちゃら」の指定が有効になります。

スタイルシート(Style Sheet)は、カスケード・スタイル・シート(Cascading Style Sheet)の略語でして、*カスケード*・スタイル・シートって言う位なので、継承はできます(^_^;)

補足

ありがとうございます。
早速やってみてますが、class=の指定は、
どのようにしたらよいのでょうか？
class="my_table1"
class="my_table #my_table1"
class="my_table my_table1"
class="my_table.my_table1"
などと、いろいろやってみましたが、
駄目です。