【前端积累】链接

简单的链式样式

对链式应用样式最容易的方式是使用类型选择器：a{color:red;}将所有的锚设为红色。但是锚既可以设为内部应用，也可以作为外部链接，所以使用类型选择器不总是理想的。为了避免这个问题，CSS提供了两个特殊的选择器，称为伪类选择器。:link伪类选择器用来寻找没有被访问过的链接，:visited伪类选择器用来寻找被访问过的链接,:hover用来选择寻找被访问过的链接，:active:被激活的链接。

1 a:link{color:blue;}
2 a:visited{color:green}
3 a:hover{color:red;}
4 a:active{color:pink;}

超链接去掉下划线

1 a:link,a:visited,a:hover,a:active{text-decoration:none;}

让下划线更有趣

去掉下划线，变成粗体。
采用图像创建链接下划线。
为外部链接和内部链接设置不同的样式。

突出显示不同类型的链接

 1 a[href^="mailto:"]{
 2     background:url(images/email.png) no-repeat right top;
 3     padding-right:10px;
 4     }
 5 a[href^="aim:"]{
 6     background:url(images/im.png) no-repeat right top;
 7     padding-right:10px;
 8     }
 9 a[href$=".pdf"]{
10     background:url(images/pdfLinkm.png) no-repeat right top;
11     padding-right:10px;
12     }
13 a[href$=".doc"]{
14     background:url(images/wordLinkm.png) no-repeat right top;
15     padding-right:10px;
16     }

创建按钮和翻转

锚是行内行为这意味着只有在淡季链接的内容时他们才会激活，但是有时希望实现更像按钮的效果，有更大的可单击区域。可以将锚的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;}
<a>John Today!</a>

使用line-height而不是height控制按钮的高度，这样能够使按钮中的额文本垂直居中。如果设置height，就必须使用填充将文本将文本压低，模拟出垂直居中的效果。但是文本在行框中总是垂直居中的，所所以如果使用line-height文本就会出现在框的中间。但是如果文本占两行按钮的高度就会成为2倍。

简单的翻转：修改伪类的背景颜色

具有图像的翻转：对于比较复杂的按钮。最好使用北京图像，一个用于正常状态一个用为激活状态。

 1 a:link,a:visited{
 2     display:block;
 3     width:200px;
 4     height:40px;
 5     line-height:40px;
 6     color:#000;
 7     text-decoration:none;
 8     background:#94b8e9 url(image/button.gif no-repeat left top;
 9     text-indent:50px;)
10     }
11 a:hover{
12     background:#94b8e9 url(image/button_over.gif no-repeat left top;
13     color:#fff;
14     }

Pixy样式的翻转：多图像会造成装载延迟，可以使用同一个图像并切换他的背景位置，这样可以减少服务器的请求的数量

a:link,a:visited{
    display:block;
    width:200px;
    height:40px;
    line-height:40px;
    color:#000;
    text-decoration:none;
    background:#94b8e9 url(image/pixy-rollover.gif no-repeat left top;
    text-indent:50px;)
    }
a:hover{
    background-color:#369;
    background-position:right top;
    color:#fff;
    }

即使只是改变图像的对准方式，会有轻微的闪烁，为了避免闪烁，需要将翻转的状态应用于连接的父元素。