css教程之链接

金沙澳门官网网址:www.js333com

VB.net 2010 视频教程 VB.net 2010 视频教程 VB.net 2010 视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >
  • css教程之链接

  • 2015-01-23 09:43 来源:www.js333com
链接(相关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;

相关教程
Baidu
sogou