CSS リンク文字色を変える

リンクしている文字の状態によって、文字色や背景色を変更します。各ページでリンク色がバラバラになると、どれがリンクなのか読み手が混乱してしまうので、同じサイト内では必ず統一すること。次のサンプルは、説明の都合上、1ページだけに適用する設定になっているが、同じサイト内で統一するために外部スタイルシートを利用すること。

詳しい説明はこちら。

リンクの文字色を変える

次のソースで、このように表示される。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>ページタイトル</title>
	<style type="text/css">
	<!--
	a:link    { color: red }    
	a:visited { color: green }   
	a:hover   { color: blue } 
	a:active  { color: gray }   
	-->
	</style>
</head>
<body>
<a href="#">リンク</a>の文字色が変わる
</body>
</html>

リンクの文字色と背景色を変える

次のソースで、このように表示される。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>ページタイトル</title>
	<style type="text/css">
	<!--
	a:link    { color: red ; background-color:#eeeeee}    
	a:visited { color: green ; background-color:#eeeeee}   
	a:hover   { color: blue ; background-color:#eeeeee} 
	a:active  { color: gray ; background-color:#eeeeee}   
	-->
	</style>
</head>
<body>
<a href="#">リンク</a>の文字色が変わる
</body>
</html>