CSS学习笔记（八）链接样式
1.简单链接样式
对链接最简单的方式是使用锚类型选择器：
a {color:red;}
锚的内部链接
<p><a href="#mainContent">Skip to main Content</a></p>
....
<h1><a name="mainContent">Welcome</a></h1>
这样虽然只想让真正的链接变成红色，但标题的内容颜色也会变成红色，为了避免这个问题,CSS提供了两个伪类选择器
:link 用来寻找没有被访问过的链接
:visited 用来寻找被访问过的链接
a:link{color:red;}
a:visited{color:green;}
:hover和:active动态伪类选择器
:hover 用来寻找鼠标停留处的元素
:active 用来寻找被激活的元素
实现鼠标停留和单击链接打开下划线
a:link , a:visited { text-decoration: none; }
a:hover , a:active { text-decoration: underline; }
对于上述示例中，选择器的次序非常重要，若次序反过来鼠标停留和激活样式就不起作用了
因为上述定义的两个规则具有相同的特殊性，所以后定义的规则优先
a:link , a:visited , a:hover , a:active
记住这个次序简单的方法：LoVe:HAte
1.1 将默认的下划线替换为点线，当鼠标停留或激活链接时，变成实线
a:link , a:visited{
text-decoration:none;
border-bottom:1px dotted #000;
}
a:hover , a:active{
border-bottom-style: solid;
}
1.2 可以使用图片应用于链接
a:link , a:visited{
color:#666;
text-decoration:none;
background: url(images/underline1.gif) repeat-x left bottom;
}
a:hover , a:active{
background: url(images/underline1_hover.gif);
}
1.3 突出显示不同类型的链接
@1 站内链接和站外链接加以区别，可以再外部链接上加一个图标，一般约定为：一个框加一个箭头
这种外部链接一般选择使用属性选择器
这种技术的工作方式是使用[att^=val]属性选择器寻找以文本http:开头的所有链接：
a[href="http:"] {
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}
@2 但这也会选中使用绝对URL而不是相对URL的内部链接，为避免这个问题，需重新设置指向自己站点的所有链接，删除它的外部图标：
a[href="http://www.yoursite.com"] ,a[href="http://yoursite.com"] {
background-image: none;
padding-right: 0;
}
大多说浏览器支持这种技术，老式的IE6会忽略它。
@3 对邮件链接突出显示
a[href="mailto:"]{
background: url(images/email.png) no-repeat right top;
padding-right: 10px;
}
@4也可以突出显示非标准协议，如AIM即时消息协议
a[href="aim:"]{
background: url(images/aim.png) no-repeat right top;
padding-right: 10px;
}
@5 突出显示可下载的文档和提要
这要使用[att$=val]属性选择器，它寻找以特定值（如：.pdf，.doc）结尾的属性：
a[href$=".pdf"]{
background: url(images/pdfLink.gif) no-repeat right top;
padding-right: 10px;
}
a[href$=".doc"]{
background: url(images/docLink.gif) no-repeat right top;
padding-right: 10px;
}
2. 创建按钮和翻转
锚是行内元素，只有在单击链接的内容时才能激活。但是，有时候希望实现更像按钮的效果，有更大的可单击区域。
为此，可以将锚的display属性设置为block，然后修改width，height和其他属性来创建需要的样式和单击区域
a{
display: block;
width: 6em;
padding:0.2em;
line-height:1.4;
background-color:#94B8E9;
border:1px solid black;
color:#000;
text-decoration:none;
text-align:center;
}
这里使用line-height来控制行高，而不是使用height，这实际上是使用一个小技巧，能够使按钮中的文本垂直居中。
如果使用height，就必须使用填充将文本压低，模拟出垂直居中的效果
注：如果没有设置width或height，那么即使设置display为block，IE6或以下版本也只有会在链接文本时激活
2.1 简单的翻转
在鼠标停留时设置链接的背景色和文本颜色，从而实现简单的翻转效果
a:hover{
background-color:#369;
color:#fff;
}
2.2 具有图像的翻转
对于比较复杂的翻转，需要使用背景色，创建两个按钮图像，一个用于正常状态，一个用于鼠标停留状态
当然也可以创建激活状态的按钮图像
a:link , a:visited{
display: block;
width: 200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
background: url(images/button.gif) no-repeat left top;
text-indent:50px;
}
a:hover{
background: #369 url(images/button_hover.gif) no-repeat left top;
color:#fff;
}
2.3 Pixy样式的翻转
多图像方法的主要缺点是在浏览器第一次加载鼠标停留图像时有短暂的延迟。这会造成闪烁效果，让按钮感觉反应有点迟钝
可以使用一个图像并切换它的背景位置，这种方法称之为Pixy方法
使用单个图片可以减少对服务器的请求数量，而且可以将所有按钮状态放在一个地方
对于正常状态，将翻转图像对准左边，对于鼠标停留状态，对准右边
a:link , a:visited{
display: block;
width: 200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
background: url(images/pixy-rollover.gif) no-repeat left top;
text-indent:50px;
}
a:hover{
background-color: #369 ;
background-position: right top;
color:#fff;
}
然而不幸的是，即使是改变图像的对准方式，Windows上的IE仍然会向服务器请求新的图像，会产生轻微的闪烁
为了避免闪烁，需要将翻转状态应用于链接的父元素：
p{
background:#94B8E9 url(images/pixy-rollover.gif) no-repeat right top;
}
2.4 已访问链接样式
可以对已访问的链接旁边添加一个复选框，以标示该链接已访问
a:visited{
padding-right: 20px;
background: url(images/check.gif) right middle;
}
也可以使用Pixy翻转方法，可以为未访问状态和已访问状态创建单一图像
css样式如上述
2.5 纯CSS工具提示
工具提示是当鼠标停留在具有title属性的元素上时一些浏览器弹出的黄色文本框
可以使用CSS定位技术创建纯CSS样式的工具提示，它演示了高级CSS的能力
<p>
<a href="http://www.baidu.com/p/七星6609/" class="tooltip">七星6609空间<span>(百度空间)</span></a>这是七星的百度空间欢迎浏览
</p>
首先需要做的是将锚的position属性设置为relative。这样就可以相对于父元素的位置对span的内容进行绝对定位，不希望提示工具开始就显示出来，所以应该将它的display属性设置为none：
a.tooltip{
position: relative;
}
a.tooltip span {
display:none;
}
当鼠标停留在这个锚上时，希望显示span的内容，将span的display属性设置为block，但是只是在鼠标停留在这个链接上这样做
为了让span的内容出现在锚的左下方，需要将span的position属性设置为absolute,并将它定位到距锚顶部1em,距左边2em
a.tooltip:hover span{
display:block;
position:absolute;
top:1em;
left:2em;
}
对span修饰一下
a.tooltip:hover span{
display:block;
position:absolute;
top:1em;
left:2em;
padding:0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
不幸的是，这种技术在IE6或以下版本中有点问题,但有个修复方法：
a.tooltip:hover {
font-size:100%;
}
