CSS Mastery Chpater 5 概要

1.最简单的链接样式

复习：锚作为内部引用 href=“#anotherAName”，跳转到下一个name属性为anotherAName的锚

链接伪类选择器：:link、:visited

- a:link 作为外部链接的锚

- a:vsited 作为外部链接的锚

以下三种伪类选择器可以应用到其他的元素

（兼容性：IE 7及更低版本不支持在除链接以外的其他元素上使用伪类选择器）

- a:hover 

- a:focus

- a:active

选择器的次序问题：由于层叠性，:link、:visited会覆盖其他三个选择器的样式

2. 下划线样式设置

- text-decoration 设置underline

- 通过border-bottom设置下划线颜色、形状

- 通过设置仅位于正下方的背景图案，来设置更加多样的下划线

a:hover{
    background: url(/img/underline.gif) rapeat-x left bottom;
}

3. 链接目标设置样式

CSS3 伪类选择器 :target,锚的目标元素。

（兼容性：IE不支持）
4. 显示不同类型的链接

- 外部链接

通过属性选择器寻找所有以“http://”开头的链接，再利用层叠性重新设置在本站点内的但是写了绝对URL的链接的样式。

- 文件下载链接

属性选择器寻找后缀为.doc/.pdf的链接

a[href$=".doc"]{
    padding-right: 10px;
    background: url(img/wordLink.gif) no-reeat right top;
}

(兼容性：IE6和更低版本不支持属性选择器)，可以用JS实现类似效果hhhh

5 链接-按钮

之前自己在做这种类似的效果时都是把元素塞进去，比如说p、img，现在发现可以通过直接在a中改变display属性创造出button的效果。

img可以通过background设置。

- 图像翻转，多个背景图像被应用于不同的伪类选择器，缺点：加载图案时会有延迟。

改进：使用同一个图像，切换他们的background-position即可。

（CSS精灵：包含所有图标的的那个图像，在）

由于IE中改变了背景图像位置也会重新请求服务器，消除闪烁：

- 将背景也应用于父元素，在子元素的背景未加载时，下面的可以透过来。

- 在IE专用的css文件中，启用背景缓存

6. CSS3 新特性在翻转中的应用

- Safari 4 beta的渐变专有颜色值

-webkit-gradient(linear, left top, left bottom, from(#abe142), to(#67a400))

- Safari专用box-reflect :below 2px color;

7. 工具提示

- 鼠标停在具有title属性的元素上出现的黄色小方框

- 隐藏工具框，在hover伪类中显示，并且相对于父元素定位在右下方

a{
    position: relative;
}
a #tooltip{
    display: none;
}
a:hover #tooltip,a:focus #tooltip{
    display: block;
    position: absolute; 
    top: 0px;
    left: 20px;
    color: #000;
    border: 1px solid black;
    background-color:#FFFF66;
  
}