这部分和上一节的内容类似，都是提供一些常用的CSS实践。

一、对链接应用样式

1、对于链接简单的处理方式，一般是应用CSS伪类来让链接在各种状态下表现，用到的伪类基本如下：

a:link：未被访问到；

a:visited：被访问过的；

a:hover：鼠标放在上面；

a:active:鼠标点击时；

a:focus：通过键盘移动链接上时。

有一点小技巧：如果设置了a:hover {text-decoration:underline;}   a:link {text-decoration:none;} ，这样当鼠标悬浮到链接上去时，一样还是没有下划线，因为它被后面的:link给覆盖了，所以，要注意伪类的顺序，按如下顺序则不会有问题：

a:link,a:visited,a:hover,a:focus,a:active (书中的记忆方法：Lord Vader Hates Furry Animals)

2、为链接的下划线加动画：

a:link, a:visited {
     color:#666;  text-decoration: none;  background: url(img/underline1.gif) repeat-x left bottom;}a:hover, a:active {
     background-image: url(img/underline1-hover.gif);}

3、为链接突出显示链接的类型：

有时候，为了突出显示链接是外部链接，或者链接是Email链接等，可以在链接上用小图标标示一下：

 

 

 

实现思路很简单，添加右上的背景图，然后设置内右边距：

a[href^="http:"] {
     background: url(img/externalLink.gif) no-repeat right top;  padding-right: 10px;}a[href^="http://www.andybudd.com"], a[href^="http://andybudd.com"]  {
     background-image: none;  padding-right: 0;}a[href^="mailto:"] {
     background: url(img/email.png) no-repeat right top;  padding-right: 15px;}a[href^="aim:"] {
     background: url(img/im.png) no-repeat right top;  padding-right: 15px;}

4、创建类似按钮的链接

创建类似按钮的链接有以下几个小的技巧：

1. 将行内元素的锚改为块元素，以增加单击范围；
2. 宽度设置单位为em，可以让锚的宽度随着字体的加大加长；
3. 为了让文本垂直居中，通过line-height来控制按钮的高度，因为文本在行框中永远垂直居中。

需要注意的是，链接永远只用于Get请求，不要用于Post请求，因为搜索引擎的网络爬虫会访问这些链接。

代码举例：

a.one {    display: block;    width: 6.6em;    line-height: 1.4;    text-align: center;    text-decoration: none;    border: 1px solid #66a300;    background-color: #8cca12;    color: #fff;}

5、纯CSS工具提示

工具提示是指当鼠标移动到链接上时，出现一个小的提示说明框，有了前面的基础，实现原理也很简单。主要是，将提示内容放在锚的内部的<span>内，为了将提示相对于锚定位，先将锚设置为相对定位，当鼠标没移动到锚的上方时，提示span隐藏，当移到上方时，设置span的display为block，并且相对链接进行绝对定位。实现代码：

/* css tooltip================================== */a.tooltip {
     position: relative;}a.tooltip span {
     display: none;}a.tooltip:hover {
     font-size: 100%; /* Fixes bug in IE5.x/Win */}a.tooltip:hover span {
     display:block;  position:absolute;  top:1em;  left:2em;    width: 8.5em;  padding: 0.2em 0.6em;  border:1px solid #996633;  background-color:#FFFF66;  color:#000;}