CSS3秘笈：第九章

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”>