CSSの効率良い使い方

[上に] [前に] [次に]
もんじゃ 1999/12/04(土) 22:15:42
ページ途中の Aタグに特定の CSS を使いたいのですが、
そこはテーブル内に 10ケ程リンクしています。
現状は Aタグそれぞれにクラス指定しているのですが、
同じクラス指定を繰り返さずもっとスマートに書けない
でしょうか？よろしくお願いします。

■現状■
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
A:link.abc { color: #FFFFFF; text-decoration: none; }
A:visited.abc{ color: #8470FF; text-decoration: none; }
A:active.abc { color: #DAA520; text-decoration: underline; }
A:hover.abc { color: #FFD700; text-decorathion: underline; }
-->
</STYLE>
</HEAD>
<BODY>
〜〜〜ここにも Aタグが 10ケほど〜〜〜
〜〜〜ここのリンクは無指定ですので、〜〜〜
〜〜〜色はディフォルトの下線付きですネ。〜〜〜
<TABLE>
  <TR>
    <TD><A HREF="def.html" CLASS="abc">あああ</A></TD>
    <TD><A HREF="ghi.html" CLASS="abc">あああ</A></TD>
　〜このようなクラス指定が 10ケほど〜
    <TD><A HREF="jkl.html" CLASS="abc">あああ</A></TD>
    <TD><A HREF="mno.html" CLASS="abc">あああ</A></TD>
  </TR>
</TABLE>
</BODY>
</HTML>
うそっち 1999/12/04(土) 22:46:52
TD A:link { color: #FFFFFF; text-decoration: none; }
TD A:visited { color: #8470FF; text-decoration: none; }
TD A:active { color: #DAA520; text-decoration: underline; }
TD A:hover { color: #FFD700; text-decorathion: underline; }

こんな風にするとクラス指定が無くてもテーブル・セルの中のリンクアンカーだけにCSSが効くようになりますがいかがでしょう。
もんじゃ 1999/12/04(土) 23:04:47
うそっちさん、ありがとうございます。
説明不足でしたが、他の箇所にもテーブルを
使っているため厳しいです。
でも、無意味にテーブルを入れ子にしたりす
ると、とりあえずは出来そうですね。
そこだけテーブルを 2重にして、
TABLE TABLE A:link { 〜 } みたいに。。。

イメージとしては、そこだけに外部リンクを
適用させたい感じなのですが。

他にもスマートな方法をお伺いしたいので、
解決マークはまだにさせて下さい。
seea 1999/12/05(日) 00:00:05
TDごとに指定するのも大変なのでTRにしてみます？
本当は、こういう用途はCOLGROUPなんですが
MSIE5.0でもCOLGROUPのCLASSは未対応みたい。
(BCGOLOR、ALIGN等の古い属性は効くようです)

　…
.abc A:link { color: #FFFFFF; text-decoration: none; }
　…
<TR CLASS=abc>
<TD><A HREF="def.html">あああ</A></TD>
　…
</TR>
　…
seea 1999/12/05(日) 00:01:34
あっ! スペルが…
うそっち 1999/12/05(日) 00:24:27
もういっちょ噛ませて
TD P A { text-decoration: none; }
という風にして
<TD><P><A HREF="abc.html">なんとかかんとか</A></P></TD>
という手もあります。
CSSを掛けたく無いところは
<TD><A HREF="abc.html">なんとかかんとか</A></TD>
という具合に。
HTMLの仕様書的にはどちらの文法も間違ってないはずですし、<P>を入れることでレイアウトがおかしくなることも無いと思います。
（<TD>の中の<P>については、一応MacのIE4とNN4、Win95のIE3とNN4で確認したことがあります）
うそっち 1999/12/05(日) 00:46:15
すいません、上の方法だとクラス指定と同じくらい面倒ですネ。
seeaさんの方法がスマートだと思いますが、生理的にクラス指定が嫌な場合はということで。

もうひとつ、「空 DIV」もいいかもしれません。
DIV A { text-decoration: none; }
としておいて目的のテーブルを<DIV>〜</DIV>で囲む。

この場合IEでは<DIV>〜</DIV>で囲まなかった時より上下のマージンが少し大きくなると思います。
すっこんドレ 1999/12/05(日) 00:52:44
class指定って簡単ですけどねぇ・・・
私の場合、「りんく」と文字入力して変換すると
<a href="" class="hogehoge"></a>と出すようにしてるので。
もんじゃ 1999/12/05(日) 01:41:50
[[解決]]
皆さん、ありがとうございます。
seeaさんの方法でやろうと思います。
また、うそっちさんの DIV案もいいですね。
そういう発想が思い付かなかったから、皆さんの
方法が参考になりました。
[上に] [前に] [次に]