未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
ホームページやブログなどのウェブサイトで 他のページにジャンプするための リンク文字のスタイルは、一括で指定する場合
a { スタイル }
という記述になりますが、未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルをそれぞれ指定することができます。
| a : link | { スタイル } | 未訪問リンク文字に対して |
| a : visited | { スタイル } | 訪問済みリンク文字に対して |
| a : hover | { スタイル } | リンク文字にマウスが重なったとき |
| a : active | { スタイル } | リンク中文字に対して |
という記述になります。
例えば、
<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:hover {color:#AFEEEE;
font-weight:bold;
text-decoration:none;
}
background-color:yellow;
color:#FFA500;
font-weight:bold;
text-decoration:none;
}
.test7 a:active {color:#FFA500;
font-weight:bold;
text-decoration:none;
}
background-color:green;
color:#00FA9A;
font-weight:bold;
text-decoration:none;
}
-->color:#00FA9A;
font-weight:bold;
text-decoration:none;
}
</style>
というふうに各種設定をすると、こんなふうに見せることができます。
マウスがリンク文字に重なったときのスタイル( a:hover ) と リンク中文字に対して ( a:active ) の両方を設定するときは、スタイルシートに a:hover を先に記述してください。逆だと期待通りに作動しないことがあります。
上記サンプルでは classを指定していますが、
<style type="text/css">
<!--
a:link {
</style>
<!--
a:link {
text-decoration:none;
color:#FF00FF;
font-weight:normal;
}
-->color:#FF00FF;
font-weight:normal;
}
</style>
などとすると、ページ全体のリンク文字のスタイルを指定できます。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス