未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
リンク文字のスタイルは、一括で指定する場合
a { スタイル }
という記述になりますが、未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルをそれぞれ指定することができます。
| a : link | { スタイル } | 未訪問リンク文字に対して |
| a : visited | { スタイル } | 訪問済みリンク文字に対して |
| a : active | { スタイル } | リンク中文字に対して |
| a : hover | { スタイル } | リンク文字にマウスが重なったとき |
という記述になります。
例えば、
<style type="text/css">
<!--
.test7 {
</style>
<!--
.test7 {
background-color:white;
color:black;
}
.test7 a:link {color:black;
}
background-color:red;
color:#FFEEFF;
font-weight:bold;
text-decoration:none;
}
.test7 a:visited {color:#FFEEFF;
font-weight:bold;
text-decoration:none;
}
background-color:blue;
color:#AFEEEE;
font-weight:bold;
text-decoration:none;
}
.test7 a:active {color:#AFEEEE;
font-weight:bold;
text-decoration:none;
}
background-color:green;
color:#00FA9A;
font-weight:bold;
text-decoration:none;
}
.test7 a:hover {color:#00FA9A;
font-weight:bold;
text-decoration:none;
}
background-color:yellow;
color:#FFA500;
font-weight:bold;
text-decoration:none;
}
-->color:#FFA500;
font-weight:bold;
text-decoration:none;
}
</style>
というふうに各種設定をすると、こんなふうに見せることができます。
上記サンプルでは classを指定していますが、
<style type="text/css">
<!--
a:link {
</style>
<!--
a:link {
text-decoration:none;
color:#FF00FF;
font-weight:normal;
}
-->color:#FF00FF;
font-weight:normal;
}
</style>
などとすると、ページ全体のリンク文字のスタイルを指定できます。