今日はCSSでリンクの色の設定しましょう。
ホームページ全体に共通してリンクの色を指定する場合、CSSにはこのように記述します。
a:link{ color:#0033FF;}
a:visited{ color:#009933;}
a:hover{ color:#0099FF;}
a:active{ color:#003399;}
このあたりはみなさんご存知だと思います。
ただ、「どうしてもこの部分だけリンクの色を変えたい！」というときもあろうかと思います。
そんなときはクラスを指定することで、部分的な色変えができるのです。
-------------------------------------------------
<html>
<head>
<style>
a:link{ color:#0033FF;}
a:visited{ color:#009933;}
a:hover{ color:#0099FF;}
a:active{ color:#003399;}
a.red:link{ color:#FF0000;}
a.red:visited{ color:#CC6666;}
a.red:hover{ color:#FF6600;}
a.red:active{ color:#FF6699;}
</style>
</head>
<body>
<p><a href="#">リンクA</a></p>
<p><a href="#" class="red">リンクB</a></p>
</body>
</html>
-------------------------------------------------
まず、このように書いてみました。
スタイル部分の上部に、共通となるリンク色の指定を、下部にクラスを red と名づけて指定しました。
HTMLの部分には、リンクA には共通（青系の色で指定）、リンクBには<a>タグにred（赤系の色で指定）を適用させてみました。
そうすると、
リンクB には、クラス「red」が適用されているのがわかります。
このように、同じファイル上やHPの中でも、部分的にリンクの色を変えたい時は、CSSでクラスを利用するといいのです。
また、ある「範囲」でそれを適用させたい時もあると思います。
そのときには、スタイルの書き方を少し変えます。
-------------------------------------------------
<html>
<head>
<style>
.red a:link{ color:#FF0000;}
.red a:visited{ color:#CC6666;}
.red a:hover{ color:#FF6600;}
.red a:active{ color:#FF6699;}
</style>
</head>
<body>
<p class="red"><a href="#">リンクC</a> | <a href="#">リンクD</a> | <a href="E">リンクE</a></p>
</body>
</html>
-------------------------------------------------
今度は、クラス「red」を、<p>タグに適用させました。
そうすると
このようになりました。
先に紹介したスタイルの書き方は
a.red:link{ } （a から始めます）
後に紹介したスタイルの書き方は
.red a:link{ } （.red から始めます）
となっているように、適用させる範囲によって記述の仕方が変わってきます。
適用させたいものが<p>タグなどでひとくくりになっているなら、リンクひとつひとつ<a>タグにクラスを指定していくよりは、<p>タグに適用させるほうが効率的ともいえますね。
ただ、あちらこちらとリンクの色を変えているとユーザーも迷ってしまいますから、あまり多用するのは避けた方がいいでしょう（＾＾）。
ちなみに、
a:link{ }
a:visited{ }
a:hover{ }
a:active{ }
これらを指定するときには、必ずこの順番で記述するようにしましょう。
この順番を変更して書くと、きちんと適用されなくなる場合がありますのでご注意です。