擬似クラス　CSS18　CSS19

課題 CSS 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>CSS18擬似クラス</title>
<style type="text/css">
<!--
*{
  margin:0;
  padding:0;
  }
.nav{
  margin:50px;
  }
.nav ul{
  list-style-type:none;
}
.nav li {
  display: inline;
  border-left:1px solid #51BF08;
  font-size:1.0em;
  text-aline:center;
  margin:0 0 0 10px;
  padding:5px 10px;
}
.nav li.first{
  border-left: none;
}
.nav li a:link{
  color:#008080;
  text-decoration:none;
}
.nav li a:visited{
  color:#cccccc;
}
.nav li a:hover{
  color:#EE7BC9;
}
     
-->
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="first"><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
<li><a href="#">メニューのリンク6</a></li>
</ul>
</div>
</body>
</html>


課題CSS19

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>CSS19擬似クラス</title>
<style type="text/css">
<!--
*{
  margin:0;
  padding:0;
  }
.nav{
  margin:50px;
  }
.nav ul{
  list-style-type:none;
}
.nav li {
  float: left;
}
.nav li a{
  color:#E9F7FD;
  width:120px;
  display: block;
  border-left:1px solid #51BF08;
  font-size:1.0em;
  text-aline:center;
  margin:0 0 0 10px;
  padding:5px 10px;
}
.nav li.first{
  border-left: none;
}
.nav li a:link{
  color:#008080;
  text-decoration:none;
}
.nav li a:visited{
  color:#000000;
}
.nav li a:hover{
  color:#EE7BC9;
}
     
-->
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="first"><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
<li><a href="#">メニューのリンク6</a></li>
</ul>
</div>
</body>
</html>

擬似リンクは、かなり難しい。課題css19は、display:block;と指定して、面にしたかったのだけれど、結局文字のリンクになってしまいました。