リンクの色やスタイルの変更方法を紹介します。リンク先を訪問した後にもリンクの色が同じであった場合、例えばリンクが何個も並んでいる場合にはどこまで訪れたのかわからなくなってしまいます。
そういった問題をなくすためにもリンクの色とスタイルを設定します。
リンクされた文字
|
1 2 3 4 5 6 |
a { color:#ff0; text-decoration:underline; } |
未訪問のリンク
|
1 2 3 4 5 6 |
a:link { color:ff0; text-decoration:underline; } |
訪問後のリンク
|
1 2 3 4 5 6 |
a:visited { color:#fff; text-decoration:underline; } |
マウスがのっているとき
|
1 2 3 4 5 6 |
a:hover { color:#999; text-decoration:underline; } |
クリック中
|
1 2 3 4 5 6 |
a:active { color:#fff; text-decoration:none; } |
ここでは、初めにaのみを指定しましたが、a:link、a:visited、a:hover、a:activeをそれぞれ指定する場合aを定義する必要はありません。
また、aと同じスタイルであればa:linkやa:hoverは書かなくて良いです。順番は必ずa:link、a:visited、a:hover、a:activeの順を守ってください。
