Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

リンク部分に適用させる場合

■ リンク部分に適用させる場合

リンク部分に適用させたい場合は、したの書式のように指定します。リンク部分に適用するので、下の書式では先頭に「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> |
<a href="b.html">リンクB</a> |
<a href="c.html">リンクC</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>

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial