标签：
1.链接状态：大部分浏览器支持4中基本的链接状态：未访问的链接、已访问的链接、访问者的鼠标正悬停在上方的链接、正被单击的链接。这些状态的4个对应伪类选择器分别是：link、：visited、：hover、：active。
为了实现最大程度的设计控制，必须对所有不同的访问状态都定义样式，但是必须按照指定顺序：
a : link{color : #F60; }
a : visited{color : #900; }
a : hover{color : #F33; }
a : active{color : #B2F511; }
如果改变上述顺序，hover和active将不起作用。因为样式具有相同权重，但是出现的顺序决定了哪种样式胜出，如果改变了顺序，那么hover可能永远不会被访问。
2.给链接定义样式：
（1）给链接添加下划线：
①完全取消下划线：要取消普通的下划线可以使用text-decoration属性，并将它的值设为none：a {text-decoration：none；}
②在鼠标经过时添加下划线：首先取消链接的下划线然后使用伪类重新引入：
a {
text-decoration：none；
background-color：#f00；
}
a：hover{
background-color：transparent；
text-decoration：underline；
}
③使用底部边框线：隐藏普通的下划线然后添加一条边框：
a{
text-decoration：none；
border-bottom：dashed 2px #9f3；
}
④使用背景图片：取消普通的下划线并添加背景
a{ text-decoration：none；
background：url（images/underline.gif） repeat-x left bottom；
padding-bottom：5px；
}
3.创建导航栏：
（1）使用无序列表：导航栏实际上就是一连串的链接，可以使用<ul>标签创建：
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“news.html”>News</a></li>
</ul>
这样写出的导航只是一连串的链接而已不够美观，我们需要做一些调整：
①取消项目符号：将list-style-position属性值设置为none就可以取消项目符号。
②消除padding和margin：由于浏览器会从左侧缩进列表项目，所以要去除增加的这部分空间。
（2）垂直导航栏：垂直导航栏其实就是一连串的链接互相叠在一起。
①吧链接当成块显示：标签<a>是一个行内元素，因此它和它的内部的内容一样宽。要避免这种情况就要将链接定义为块元素：
ul.nav a{
display：block；
}
②限制按钮的宽度：可以通过设置width的值来限制宽度。
（3）水平导航栏：创建水平导航栏有两种办法：
①利用display：inline-block属性。
②使用浮动列表项目。定义float属性值让列表浮动。
4.CSS的预载替换法：JS中有一种被称作预加载的方法，能在需要之前自动下载好替换的图片因此可以避免延迟问题。但是CSS没有这种选择因此需要采用CSS精灵策略。它使用一张图片就可以创建同一个按钮的不同状态。
实施步骤如下：
（1）在你最喜欢的图像编辑软件中创建一张带有不同按钮版本的图片。可以把这些图片一张张地叠起来，让普通的链接图片放在最上面，替换图片放在最下面。
（2）测量从整张图片的顶部到每张图片顶部之间的距离。
（3）给普通的链接创建一个CSS样式。例如，将图片放进背景并把它放在样式的左上方，这个样式看起来像这样：
a { background：#E7E7E7 url（images/pixy.png）no-repeat left top；}
（4）创建：hover样式。
利用background-position属性使图片的方向转成朝上，因此第一张图片消失，替换图片变成可见。a：hover { background-position：0 -39px；}
除了防止讨厌的下载延迟之外，这种方法也有助于帮助你将导航图片放在一个单独的文件里面。
5.给特殊的链接类型定义样式：
（1）指向网站外部的链接：<a href=“http：//…….”></a>。外部链接的路径必须是绝对URL。
（2）链接到电子邮箱：所有的邮箱链接都是以mailto：开头。<a href=‘mailto:’}
（3）链接到特殊类型的文件：例如指向一个PDF文件代码为：<a href=“annual_report.pdf”>
标签：
原文地址：http://www.cnblogs.com/koto/p/5068461.html
