1.简单的链接样式
对链接应用样式最容易的方式是使用锚类型选择器，但是锚类型选择器也不总是理想的，因为它既可以作为内部引用，又可以作为外部链接。
锚的伪类选择器，：link，：visited，：hover，：focus，：active
大多数人最初使用锚选择器做的第一件事是去掉链接的下划线，text-decoration：none，添加下划线，text-decoration：underline
2.简单的链接修饰
a.使用边框创建不太影响美观的下划线
b.使用图像创建链接下划线
c.为已访问链接设置样式，避免不必要的回溯操作
d.为链接目标设置样式
使用：target伪类设置样式
3.突出显示不同类型的链接
在很多站点上，很难看出链接是指向本站点上的另一个页面，还是指向另一个站点，为了区别，在外部链接旁边加一个小图标。在页面上包含外部链接最容易的方法是在所有外部链接上加一个类，然后将图标作为背景图像应用。但是这种方法不太灵巧。
还有一种方法是使用属性选择器
4.创建类似按钮的链接
display：block，在修改width，height等属性
使用line-height而非height设置行高，可以使文本垂直居中。
tip：链接只用于get请求，不能用于post请求
按钮链接的背景图像可以用css实现翻转，方法有：
a.用：hover伪类，在鼠标悬停时设置链接的背景和文本颜色
b.使用不同的背景图像
c.Pixy样式的翻转，不切换多个背景图像，而是使用一个图像并切换它的背景位置，使用单个图像的好处是减少了服务器请求的数量，而且可以将所有按钮放在一个地方
d.用css3实现翻转，css3包含text-shadow,box-shadow,border-radius等属性，可以创建样式丰富的按钮，而不使用任何图像。
5.CSS精灵
包含许多不同的图标，按钮或图形的单个图像，许多大型网站都用这个技术，可以减少服务器请求，提高站点性能，加快下载速度，提高可维护性。
6.CSS工具提示
工具提示是当鼠标悬停在具有title属性的元素上时，一些浏览器弹出的黄色小文本框
实现方法：首先将锚的position属性设置为relative，在对span进行绝对定位，先开始把span的display属性设置为none，悬停时，将display：block。
<!DOCTYPE html> <html> <head> <title>工具提示</title> <meta charset="utf-8"> <style type="text/css"> a{ text-decoration: none; color: #4acc60; position: relative; } a span{ display: none; } a:hover span{ position: absolute; display: block; border:1px solid #000; font-size: 10px; color: #63a307; top: 1.5em; left: 8em; } </style> </head> <body> <a href="#">我是个链接 <span>哈哈</span> </a> </body> </html>
