链接（相关css教程）
　　在过去，CSS3 标准的开发人员认为将未单击的链接、已访问的链接、有效链接和鼠标所在的链接区分开是明智之举。在 (X)HTML 中，它们全部具有相同的标记（也就是 <a> 标记），但具有不同的浏览器状态。幸运的是，许多设计人员忽略了这些区别，他们常常向一般链接或鼠标所在的链接提供样式。
　　一项几乎必要的任务是向一般链接应用一种特定的样式（进而设置它，无论它是未被单击的、被访问的、有效的还是其他类型的链接）。清单 2 提供了这样一个应用程序的一个示例。
　　清单 2. 链接修饰的 CSS 示例　　
a, a:link, a:active, a:visited {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  background-color: #EEEEEE;
}
a:hover {
  text-decoration: underline;
  background-color: #FFFFAA;
}
 　　此标记设置一个一般链接，将字体颜色设置为黑色，取消默认的下划线，将字体加粗，以及还将背景颜色设置为白色。在悬停状态下，它重新应用下划线并创建一种黄色的新背景颜色来突出显示。当在浏览器中测试此标记时，您将会注意到在鼠标悬停自链接上时，背景从浅灰色更改为黄色，当鼠标移开时，从黄色变回浅灰色。前面已经看到，还可以向 a:hover 应用文本阴影。
　　当开发人员建立 CSS3 的概念时，他们撇开了任何与 <a> 标记相关的特定样式，将更多精力放在泛型上。因此，本文不会介绍所谓的 transform:rotate，举例而言可将它用于导航中的 <li> 标记。相反，结合本文已经介绍的内容，可以得到类似于清单 3 的样式。
　　清单 3. 使用一些 CSS3 属性增强的 CSS 导航示例　　
a, a:link, a:active, a:visited {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  background-color: #EEEEEE;
}
li {
  text-align: center;
  list-style-type: none;
  width: 50px;
  padding: 10px;
  margin: 10px;
  background-color:#EEEEEE;
  border: 1px solid #000000;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -moz-transform:rotate(-20deg);
  -webkit-transform:rotate(-20deg);
  transform:rotate(-20deg);
}
li:hover {
  text-decoration: underline;
  background-color: #FFFFAA;
}