<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>擬似クラスの練習</title>
<style>
<!--
* {
margin: 0;
padding: 0;
}
-->
ul {
list-style-type: none;
}
li {
font-size: 1.6em;
font-weight: bold;
margin: 0 10px 10px 0;
float: left;
}
li a {
display: block;
padding: 5px 1em;
width: 200px;
}
li a:link {
color: #000;
text-decoration: none;
background-color: #f2c2c2;
}
li a:visited {
color: #7890ab;
background-color: #f66bc2;
}
li a:hover {
color: #cdef12;
}
li a:active {
color: #876543;
background-color: #45678a;
}
</style>
</head>
<body>
<ul>
<li><a href="#">リンク:link</a></li>
<li><a href="#">リンク:visited</a></li>
<li><a href="#">リンク:hover</a></li>
<li><a href="#">リンク:active</a></li>
</ul>
</body>
</html>
