CSSのフォント設定・指示で、複数のフォント指示IDを組み合わせたIDがつくれないでしょうか?
CSSですが、フォント記述が面倒で困っております。
記述したものを組み合わせる宣言をして、XHTMLマークアップの方ではその組み合わせ名だけ記述して済むようにできないものでしょうか?
または、他の方法で簡素化合理化できる方法があればそれでも結構です。
ご教授いただけましたら幸いです。
【フォントサイズ11px】フォントサイズだけを指定したID
【フォントサイズ12px】フォントサイズだけを指定したID
【フォントサイズ14px】フォントサイズだけを指定したID
【リンクカラー緑,hover赤(下線:緑)】リンクだけを指定したID
【リンクカラー白,hover緑(下線:白)】リンクだけを指定したID
【フォントカラー黒(薄色背景用)】フォントカラーだけを指定したID
【フォントカラー白(濃色背景用)】フォントカラーだけを指定したID
【使用する組み合わせ宣言1】上記IDのどれとどれを組み合わせたかを指定したID
【使用する組み合わせ宣言2】上記IDのどれとどれを組み合わせたかを指定したID
というようにして、XHTMLマークアップの方では、例えばテーブルに文章を記述したいなら、テーブルタグに上記の【使用する組み合わせ宣言】のID名だけを記述すればそれでOK、というようにできれば楽になると思うのです。
もっといいのは、CSSで【使用する組み合わせ宣言】のIDは記述必要なく、XHMLの方で組み合わせ宣言できれば最高です。
実際を例に出すと、
------------------------------------------------------------
/* リンク以外のフォント設定 */
------------------------------------------------------------
#font_black {
text-align:left;
color: #FFFFFF;
font-size: 11px;
line-height: 120%;
}
------------------------------------------------------------
/* リンク部分だけのフォント設定 */
------------------------------------------------------------
#font_link_green a:link {
color: #d0ae22;
text-decoration: none;
border-bottom: 1px solid #d0ae22;
}
#font_link_green a:visited {
color: #d0ae22;
text-decoration: none;
border-bottom: 1px solid #d0ae22;
}
#font_link_green a:active {
color: #ff0066;
text-decoration: none;
border-bottom: 1px solid #d0ae22;
margin-bottom: 0px;
}
#font_link_green a:hover {
color: #fde582;
text-decoration: none;
border-bottom: 0px;
}
とCSSで記述しておき、XHTMLの方では、
<table class="#font_black .font_link_green">
などと記載するような(この書き方はあくまで例です)感じです。
このように、CSSのフォント記述において、何か簡素化・合理化する記述方法はないものでしょうか?
普通にやっていたらソースは増えるし色の変更などであちこち書き直す必要があるしで(置換不能なケースもありますし)面倒この上ないですね。
宜しくお願い致します。
お礼
さっそくご回答ありがとう御座います。 完璧なご回答すごいです!! 私も検索で情報をいろいろ探せるように早くなりたいです!! ありがとう御座いました!