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的背景提示。
