精通CSS高级Web标准解决方案(4、对链接应用样式)

精通CSS高级Web标准解决方案(4、对链接应用样式)

4.1 简单的链接样式

锚可以作为内部引用,也可以作为外部链接,应该区分对待。

伪类选择器:

:link 用来寻找没有访问过的链接

:visited 用来寻找已经访问过的链接

a:link{color:blue};

a:visited{color:red};

动态伪类选择器:

:hover 用来寻找鼠标停留处的元素

:active 用来寻找被激活的元素

两个规则有相同的特殊性时,后定义的规则优先,因此在定义a元素伪类时使用以下顺序:

a:link  a:visited a:hover a:active   即  LoVe  HAte

4.2 让下划线更有趣

可以给a元素伪类设置背景图片实现一些有趣的下划线效果.

a:hover,a:active{

    font-weight: bold;
    /*text-decoration:underline;*/
    background: url("./underline.gif") repeat-x left bottom;
  }

4.3 突出显示不同类型的链接

内部链接、外部链接、下载word、PDF的链接、订阅....可以使用属性选择器(比如根据href 属性的前缀或者后缀)为不同类型链接设置样式。

4.4 创建按钮和翻转

4.4 已访问链接样式

4.4 纯CSS提示