リンク部分に適用させる場合
リンク部分に適用させたい場合は、したの書式のように指定します。リンク部分に適用するので、下の書式では先頭に「a」と描いていますが、クラスやIDなどでも指定できます。
:link{ } まだ見ていない状態
:visited{ } 既に見た状態
:hover{ } カーソルが上にある状態
:active{ } マウスボタンを押している状態CSSソース
a:link {
color: #339900;
background: #ffffff
}
a:visited {
color: #999999;
background: #ffffff
}
a:hover {
color: #ff6600;
background: #ffffff
}
a:active {
color: #ff6600;
background: #ffffff
}
.navigation { text-align: center }HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ページ全体のリンクに適用する</title>
<link href="../assets/style_sheets/02-03.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="navigation">
<a href="a.html">リンクＡ</a> |
<a href="b.html">リンクＢ</a> |
<a href="c.html">リンクＣ</a>
</p>
<p>
リンク部分にスタイルシートを適用するには、<a href="pseudo.html">疑似クラス</a>というものを使用します。疑似クラスには、<a href="link.html">:link</a>, <a href="visited.html">:visited</a>, <a href="hover.html">:hover</a>, <a href="active.html">:active</a>のほか、:focus や :first-child などがあります。
</p>
</body>
</html>
