读书笔记--精通CSS高级Web标准解决方案（五）---链接样式

这部分和上一节的内容类似，都是提供一些常用的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;
}