未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルシート（css）を指定する

ホームページやブログなどのウェブサイトで 他のページにジャンプするための リンク文字のスタイルは、一括で指定する場合

a　{ スタイル }

という記述になりますが、未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルをそれぞれ指定することができます。

a : link { スタイル } 未訪問リンク文字に対して
a : visited { スタイル } 訪問済みリンク文字に対して
a : hover { スタイル } リンク文字にマウスが重なったとき
a : active { スタイル } リンク中文字に対して

という記述になります。

 

 

マウスがリンク文字に重なったときのスタイル( a:hover ) と リンク中文字に対して ( a:active ) の両方を設定するときは、スタイルシートに a:hover を先に記述してください。逆だと期待通りに作動しないことがあります。

下記サンプルでは classを指定していますが、

<style type="text/css">
<!--
a:link {
text-decoration:none;
color:#FF00FF;
font-weight:normal;
}
-->
</style>

などとすると、ページ全体のリンク文字のスタイルを指定できます。

 

Code:
<style type="text/css">
<!--
.test7 {

background-color:white;
color:black;
}

.test7 a:link {

background-color:red;
color:#FFEEFF;
font-weight:bold;
text-decoration:none;
}

.test7 a:visited {

background-color:blue;
color:#AFEEEE;
font-weight:bold;
text-decoration:none;
}

.test7 a:hover {

background-color:yellow;
color:#FFA500;
font-weight:bold;
text-decoration:none;
}

.test7 a:active {

background-color:green;
color:#00FA9A;
font-weight:bold;
text-decoration:none;
}

-->
</style>