【CSS03】CSS課題：文字の修飾

CSS 
<?xml version="1.0" encording-"Shift-JIS"?>
<!DOCTYPE html PUBLIC"-//W3C/DTD/XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang:"ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" />
<meta http-equiv="Content-Style-Type" content="style/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>【CSS03】CSS課題：文字の修飾</title>
<styletype="text/css">

ul{
	list-style: none;
	}
li a{
	font-size: 1.5em;
	line-height: 1.3; 
	}
li a:link{
	color: coral;
	}
li a:visited{
	color: turquoise;
	}
li a:hover{
	color: skyblue;
	}
li a:active{
	color: lawngreen;
	}

</style>
</head>
<body>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</body>

その要素がまだ、未訪問のリンクの場合、coralの色文字です。
その要素がアクティブな状態（マウスでリンクを押してから話すまでの間）のときlawngreenの色です。



マウスをリンクされている文字の上に持ってゆくと、skyblueの文字色にかわります。



クリックをした後の文字がturquoiseの色に変わります。
この色を元に戻すには、ブラウザの履歴を削除すると、元に戻ります。


この要素の場合、必ず「:link」「:visited」「:hover」「:active」の順番になります。
cssでは後に指定したスタイルが優先されるというルールがある為です。