３つのcssファイルを１つのcssファイルにする

質問

あるhtmlファイルがあり、３つのｃｓｓファイルたとえば、aaa.css,bbb.css,ccc.cssの３つのファイルがあります。
htmlには３つのボタンがあり、その一つのボタンを押すとaaa.cssのファイルを使用するとし、同じようにbbb.css,ccc.cssもボタンごとに異なる操作ができるとします。
それを１つのcssファイル、abc.cssファイルにまとめたいのですが、どのように作成すればいいのでしょうか？
何かでこのときはこの処理を行うみたいな指定がhtmlかcssファイルのどちらかで出来るのでしょうか？
かなり困っております。
どなたか回答よろしくお願いいたします。

回答No.1

CoMaam · ベストアンサー

単純に複数のcssファイルを1つに統合する場合は、各画面用にクラスを定義します。
そして読み込む側がそのクラスを指定して読み込みます。

例えばtableタグのスタイルならば、

table.aaa {}
table.bbb {}
table.ccc {}

のように定義できます。

そして読み込む側は、

<table class="aaa">

のように読み込むクラスを指定できます。

質問者の提供情報が少ないのでわかりませんが、ボタンを押したときにそのボタンのある画面のcssを変更するような場合は少々面倒だと思います。

面倒なので簡単に説明すると、
タグにidで名前をつけて（hogeTableなど）、
以下のような関数をボタンのonClickで呼び出せば可能です。

function ChangeStyle(styleName) {
document.getElementById('hogeTable').className=styleName;
document.getElementById('hogeBorder').className=styleName;
...
...
}

答になっているかはわかりませんが、参考になれば幸いです。