cssで複数のリンクテキストをデザインしたい

質問

htmlページ中のテキストを全体的にはグレーの9pxで表現し、最下部にグリーンで各項目へのリンクナビゲーションをつけたく、外部cssを参照させています。しかしページ中にはテキストにリンクをはった部分がたくさんあり、複数のスタイルを各箇所にあわせて使い分けたいのです。ところが、グレーの9px指定のところはすべて10pixになってしまい、最下部のグリーンのところもリンクをはった部分がグレーの10pixになってしまいます。つまり、リンクをはったテキストはすべてグレーの10pxの指定をしたスタイルの影響を受けてしまっているのです。どうしたら解決できるでしょうか。ちなみに、それぞれのスタイルにはlink,visited,hover,activeについて設定がしてあります。

回答No.2

UKY · ベストアンサー

a:link{ font-size:9px ; color:#666666; line-height:150%; text-decoration:none;}

↑このように書くとリンクになっている全ての a 要素に対して設定が行われてしまいます。
t9 クラスが指定されている要素の中にある a 要素のみを示すには

.t9 a:link {.....}

のように書かないといけません。他の a:hover や a:visited についても同様です。

CSS のルールセットはそれぞれ独立しているので
.t9 { ..... }
のすぐ後に
a:link { ..... }
と書いても t9 クラスの要素内にある a 要素を指定したことにはなりません。

なお、
.t9 a:link
というセレクタは「t9 というクラスが指定された要素の中にある a:link」を示します。例えば、table 要素が t9 クラスになっていて、その中に a 要素がある場合などです。
a 要素そのものにクラスを指定している場合は、
a.t9:link
というように書きます。

お礼

ありがとうございました。CSSの記述をご指摘のように直したところ、希望通りになりました。

回答No.1

yutty_yutty

タグにスタイルをつけるだけではなくて、自分で「Class」を作成して指定することで、
指定されたclassの中のlink,visited,hover,active等を個々に設定することが出来ます。

ナビゲーションの部分のリンクをグリーンの9pxにするには、まず外部のCSSに以下を加えます。

（例）

a:link {
font-size: 10px;
}
.navigation {
font-size: 9px;
}
.navigation a:link {
font-size: 9px;
color: green;
}

.navigationは任意の文字列です。
HTMLには、ナビゲーションの文字のみをテーブルの中に入れて、そのテーブルの文字が入ってるセルのclassをnavigationとします。
そして、それぞれにリンクを貼ります。

（例）

<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="navigation"><a href="top.html">TOP</a>　<a href="index.html">HOME</a>　<a href="next.html">NEXT</a>　<a href="back.html">BACK</a></td>
</tr>
</table>

classで囲まれているところは.navigationがついているそれぞれのスタイルになります。
つまり今回はセルの中のリンクだけがグリーンになるというわけです。
なので、classで囲まれていない普通の部分のリンクは
a:link {
font-size: 15px;
}
が反映されます。

ちなみに

.navigation a:hover　
.navigation a:active

など、どんどん指定を増やすことが可能です。

少々わかりにくかったかもしれません(^^;)
URLを参考にしてみてください。

参考URL：

http://awards.blog.ocn.ne.jp/css_zine/2004/07/css.html

お礼

ありがとうございました。皆さんのお知恵をお借りできたので思った通りの表現ができました。

補足

早速のご対応をありがとうございます。ご指摘のようにclassを使用しているのですが、どうもうまくいきません。cssの記述がいけないのでしょうか。
table { font-size: 9px; color:#666666; line-height:150%}
.t9 { font-size: 9px; color: #666666; line-height: 150%}
a:link{ font-size:9px ; color:#666666; line-height:150%; text-decoration:none;}
a:visited{ font-size:9px ; color:#666666; line-height:150%; text-decoration:none;}
a:hover{ font-size:9px ; color:#ff0033; line-height:150%; text-decoration:underline;}
a:active{ font-size:9px ; color:#ff0033; line-height:150%; text-decoration:none;}
.t9grn { font-size: 9px; color: #006600; line-height: 150%}
a:link{ font-size:9px ; color:#006600; line-height:150%; text-decoration:none;}
a:visited{ font-size:9px ; color:#006600; line-height:150%; text-decoration:none;}
a:hover{ font-size:9px ; color:#ff0033; line-height:150%; text-decoration:underline;}
a:active{ font-size:9px ; color:#ff0033; line-height:150%; text-decoration:none;}
.t10{ font-size:10px ; color:#666666; line-height:150%; text-decoration:none;}
a:link{ font-size:10px ; color:#666666; line-height:150%; text-decoration:none;}
a:visited{ font-size:10px ; color:#666666; line-height:150%; text-decoration:none;}
a:hover{ font-size:10px ; color:#ff0033; line-height:150%; text-decoration:underline;}
a:active{ font-size:10px ; color:#ff0033; line-height:150%; text-decoration:none;}