简单的链式样式

对链式应用样式最容易的方式是使用类型选择器：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;}John Today!

使用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;    }

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