第4章--对连接应用样式

简单的连接样式

Css 的两个特殊的选择器，称为连接伪类选择器

1.:link伪类选择器用来寻找没有被访问过的连接，

2.:Visited伪类选择器用来寻找被访问过的连接

能够用来对连接应用样式的另外两个选择器是:HOVER和:ACTIVE（动态伪类）选择器

：hover动态伪类选择器用来寻找鼠标停留处的元素

:ACTIVE动态伪类选择器用来寻找被激活的元素

选择器的次序很是重要，若是次序反过来，鼠标停留和激活样式就不起做用了（这是由于因为层叠的问题形成的，当两规则具备相同特殊性时，后定义的规则优先）

伪类连接选择器的次序

a:link;-----a:visited,-----------------a:hover,-------------a:active;

能够用这个LOVe:HAte这个单词记住的使用的次序  L表明link,V表明visited,H表明hover,A表明active;

4.2让下划线更有趣

4.3突出显示不一样类型的连接

这里没有什么重点，把其中的稍微有点用的东西，记录一下

离站连接的图标已经出现了一种约定: 一个框加一个箭头

提一下属性选择器：属性选择器容许特定的属性是否存在或属性值来寻找元素。Css3扩展了的他的功能，提供了字符串匹配属性选择器。

字符串匹配属性选择器

 1.容许经过对属性值的一部分和指定的文本进行匹配来寻找元素。

2.工做方式是使用[att^=val]属性选择器寻找一文本http:开头的全部连接：

Demo:

a[href^=”http:”]{

Background:url(images/externalLink.gif) no-repeat right top:

}

可是这个有个问题，它也会选中使用绝对URL而不是相对URL的内部 连接，因此咱们须要从新设置指向本身的站点因此全部连接，

a[href^=”http:www.本身域名的连接.com”],a[href^=’http://yoursite.com’]{

Background-image:none;

}

连接本身域名的连接的删除全部的外链图标，

扩展：

对邮件连接也进行突出显示

能够给全部的Email 连接上添加一个小图标

a[href^=”email:]{

Background:url(images/email,png) no-repeat right top

Pandding-right:10px;

}

显示非标准的协议

a[href^=”aim:]{

Background:url(images/im,png) no-repeat right top

Pandding-right:10px;

}

显示的效果：

突出显示可下载的文档和提要

Css也能够帮助区分这些类型的连接，这要使用[att$=val]属性选择器，它寻找特定值（好比.PDF或.DOC）结尾的属性：

pdf属性

a[hret$=”.pdf”]{

Background:url(images/pdflink.gif) on-repeat right top;

Padding-right:10px;

}

Doc属性

a[hret$=”.doc”]{

Background:url(images/doclink.gif) on-repeat right top;

Padding-right:10px;

}

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

4.4 建立按钮和翻转

Pixy样式的翻转

使用一个图像并切换它的背景位置