1.简单的链接样式

a:link{color:blue;}
a:visited{color:green;}

:link没有访问过的链接，：visited访问过的链接

a:hover,a:active,a:focus{
 color:red;
}

:hover悬停，：active被激活的链接，发生在鼠标单击时,:focus,可以通过键盘移动到链接。
其他元素也可以使用：hover，：active，：focus，但ie7和更低版本不支持在除链接之外的其他元素上使用伪类选择器。

a:link{color:blue;}
a:visited{color:green;}
a:hover,a:active,a:focus{
 color:red;
}

注意先后顺序，link，visited在hover，active，focus之前，小心被覆盖。

2. 奇特的链接下划线

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

结合background使用

a:visited{
  padding-right:20px;
  background:url(chek.gif) no-repeat right middle;
}

3. 为链接目标设置样式

<a href='http://example.com/story.html#comment3';>
 A great comment
</a>

这个链接指向#comment3那怎样在跳转后标识commen3元素呢？使用：target

.comment:target{
  background-color:yellow;
}

4.突出显示不同类型的链接

1.区分是否为外部链接

.external{
  background:url(externalLink.gif) no-repeat right top;
  padding-right:10px;
}
//或者使用属性选择器更灵活
a[href^='http:']{
  background:url(externalLink.gif) no-repeat right top;
  padding-right:10px;
}
//为避免在网页中使用自己的绝对地址可以
a[href^='http://yoursite.com']{
  background:none;
  padding-right:0;
}

2.区分不同类型链接

a[href^='mailto:']{
   background:url(email.gif) no-repeat right top;
  padding-right:10px;
}
a[href^='aim:']{
   background:url(aim.gif) no-repeat right top;
  padding-right:10px;
}
a[href$='.pdf']{

}
a[href$='.doc']{

}

ie6和更低版本不支持属性选择器

5.创建类似按钮的链接

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

使用这种方法切忌元素是真正的链接而不用更新服务器。因为google加速服务会访问这些链接以便缓存它们，链接只用于get不要用于post

6.背景翻转

1.普通

//使用图像替换技术04章
a:link,a:visited{
  display:block;
  width:203;
  height:72px;
  text-indent:center;
  text-decoration:none;
  background:url(button.png) left top no-repeat;
}
a:hover,a:focus:a,a:actived{
  background-image:url(over.png);
}

使用这种方法，当网速慢时，hover图像没下载下来会出现卡的现象。
可以使用一个背景图像变换位置的方法解决这个问题
ie启用背景缓存

html{
  filter:expression(cocumnet.exexCommand('BackgroundImageCache',false,true));
}

7. 纯css的工具提示

a.tooltip{
 position:relative;
}
a.tooltip span{
 display:none;
}
a.tooltip:hover span{
 display:block;
 position:absolute;
 top:1em;
 left:2em;
}
<a href='http://www.baidu.com' class='tooltip'>
hello
<span>百度</span>
</a>

总结

学习了:link,:visited,:hover,:focus,:active,:target，
学习了背景翻转，
学习了让链接显示的如按钮（block，background），
学习了纯css的背景提示。