【CSS04】

CSS2.1

リンクの背景色（擬似クラス）

＞うまくいきませんでした。。。。明日にでも質問

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <title>【CSS04】</title>
    <meta http-equiv="Content-Type" content="text/html; charset=SHIFT-JIS" >
    <style type="text/css">
<!--
/* クリックしていないリンク */
a:link    { background-color: coral;
            color:#ffffff;
            font-weight:bold;
            width:100%;
          }
/* クリックしたことのあるリンク */
a:visited { background-color: turquoise;
            color:#ffffff;
            font-weight:bold;
            width:100%;
          }
/* リンク上にカーソルが当たったとき */
a:hover   { background-color: skyblue;
            color:#ffffff;
            font-weight:bold;
            width:100%;
          }
/* クリックしたとき */
a:active  { background-color: lawngreen;
            color:#ffffff;
            font-weight:bold;
            width:100%;
          }
ul {width:300px;}
li {width:100%;}
//-->
    </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>
</html>

＞リンクの幅がうまく反映されませんでした。。。意外に難しい。

解答見ました。。。。なるほど。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <title>【CSS04】-2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=SHIFT-JIS" >
    <style type="text/css">
<!--
ul {
	list-style-type: none;
}
li a {
    display: block;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    width: 300px;
    padding: 2px 10px;
    margin: 2px 0px;
    text-decoration: none;
}
li a:link {
    background-color: coral;
}
li a:visited {
    background-color: turquoise;
}
li a:hover {
    background-color: skyblue;
}
li a:active {
    background-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>
</html>