css中关于超链接的部分学习心得

浏览数：32 / 时间：2015年06月09日

在《精通CSS》一书中，作者对于超链接部分的解说。
1、在CSS中，两个规则的优先级一样高的时候，后定义的规则优先，所以对于超链接的几个伪选择器，一般的顺序是：a:link，a:visited，a:hover，a:focus，a:active；这个不用专门去记下来，当你做上几个简单的例子之后就会记下来了，实践出真知啊~
2、可以用简单的图片来做出更炫的CSS超链接效果来，例如下划线。还可以做一些特殊的图标来表达连接的与众不同与样式。
3、在CSS3中，可以通过子字符串匹配来寻找元素，更省力地完成更灵活的链接样式，例如寻找以文本http:开头的所有链接：

a[href^="http:"]{
     background:url() no-repeat right top;    
}

这样就可以突出显示所有的外部链接。当然，对于自己站点的链接，你可以专门设置来取消：

a[href^="http://www.yoursite.com"],a[href^="http://yoursite.com"]{
       background-image:none;    
}

还有你可以给用特殊样式表明下载的文档和提要：

a[href＄=".pdf"]{
      background:url(img/pdflink.gif) no-repeat right top;
}

(其作用是将带pdf关键字的全部附上特定的标识)

4、创建按钮链接
简单的就是用display：block，将你的行级元素转换成块级，然后给其背景颜色的变化来实现按钮的链接和变化；
还有一种就是通过事先绘制好的按钮图标的变化，来实现图像翻转效果；
Pixy样式翻转：将所有的按钮绘制在一张图片上，然后通过background-position来实现在不同的状态下显示不同的部分，这样的好处是，可以将多个图像的服务器调用数量大大减少；
受Pixy的启发，CSS精灵应运而生，其想法是将一个网站的导航等需要大量图片的内容全部放在一个图片上，对于大型网站而言，这可以大大降低服务器损耗。
5、通过CSS3的text-shadow、box-shadow和border-radius等属性，可以实现按钮效果，这样可以避免加图片进去。
6、CSS还有非常强大的功能，就是可以通过display属性和hover属性，设置诸如工具提示、资料卡（例如知乎等网站的资料卡弹出）、以及商城的二级菜单等更为丰富多彩的效果，而不像title属性自带的提示那样呆板。