对连接应用样式：
1 简单的链接样式：
1.1 包含片段标识符的锚（页面将跳转到第二个锚点的位置）
<p> <a href="#mainContent"></a> </p>
<h1> <a name="mainContent"></a> </h1>
1.2 伪类选择器：
- :link,未访问过。
- :visited,已经访问过的。
- :hover,悬停状态。
- :focus,通过键盘移动到目标上
- :active,被激活的状态，发生在被单击时。
- 其他元素也可以使用这些伪类选择器，例如：表格、按钮、输入框。（<=IE7不支持）
1.3 下划线：
- text-decoration:underline；
- text-decoration:none;
- 应用链接的样式顺序：LV 、HFA，否则规则容易被覆盖。
2 链接修饰：
- font-weight：设置文本粗细。（normal、bold粗、bolder更粗、lighter更细 ）
- border-bottom:dotted; 把链接下划线设置为点线和solid实线（link、visited下与hover、focus、active形成交互）
- 还可以给a元素添加背景图像定制链接下划线（还可以用动图gif，可以产生脉冲效果的）
- 给已访问链接右边添加一个“复选框”背景图，可以让用户知道访问过了。
3 为链接目标设置样式：
链接到页面特定部分的做法是：在href的末尾添加一个#字符，然后加上要链接元素的ID。这非常适合指向很长的评论页面中的某一评论。
上述方法的缺点是： 如果页面内容比较多的时候，不容易看出链接到了哪个元素上。
So,CSS3允许使用 :target 伪类为目标元素设置样式。
比如，用于高亮显示跳转到的元素。
:target {
font-weight:bolder;
background-color:#abc; /*设置跳转后链接目标元素的背景色和字粗*/
}
#first:target{
font-weight:bolder;
background-color:#abc; /*设置跳转后ID为first的链接目标元素的背景色...*/
}
4 突出显示不同类型的链接：
4.1 离站链接：
像维基百科一样在链接右后边加一个背景小图标（一个框加一个箭头），告诉用户这个链接将离开站点。
4.1.1 比较好的做法是：
-
在所有离站链接上加上一个类将图标作为背景图像应用。
缺点： 不太灵巧、优雅，要给很多离站链接加class很辛苦的。
4.1.2 最好的做法是：
- 使用属性选择器匹配离站的链接，css3 提供了子字符串匹配。
- 寻找以文本http：开头的所有链接：
a[href^="http:"]{
background:url(/img/externalink.gif) no-repeat right top;
padding-right:10px;
}
- 还有可以对：邮件链接、、、运用这种技巧
4.2 下载链接：
- 利用属性选择器，再配合css3提供的子字符串匹配功能，寻找以文本.doc等结尾的所有链接。
a[href$=".doc"]{
background:url(/img/wordLink.gif) no-repeat top right;
padding-right:10px;
}
- <=IE6不支持属性选择器。
5. 创建类似按钮的链接：
将锚的 display 属性设置为 block ，然后修改 width、height和其他属性来创建需要的样式和单击区域。
{
display:block;
text-decoration:none;
line-height:1.4; /*设置行高的同时使得文本居中*/
width:6.6em;
text-align:center;
border:1px solid #66a300;
background-color:#8cca12;
color:#fff;
}
- line-height可以使 单行 文本居中显示，如果设置成 height ，只能使用内边距把文本压低，模拟出垂直居中的效果。
- 链接应该 只用于 GET 请求，绝对不要用于 POST 请求 。
5.1 简单的翻转：
在鼠标悬停时，通过设置背景色和文本颜色，实现简单的翻转效果。以前都是使使用庞杂的JS实现，现在只需要使用 :hover 伪类就可以轻松实现。
5.2 图像翻转：
设置 :active 伪类的背景图像，并把按钮文本放在图像上边，同时在 :link、:visited 下设置 大的负文本缩进 。
- text-indent:-1000em; 设置大的负文本缩进。
5.3 用 css3 实现翻转：
css3 包含 text-shadow、box-shadow、boder-radius 等属性，就不需要使用背景图像来实现翻转效果了。
5.4 纯 css 工具提示：
比如：在具有 title 属性的元素上悬停鼠标时，一些浏览器会弹出文本框。鉴于此，可以使用 css 定位技术穿件纯 css 工具提示。
- 方法是：把文本提示设置为 display:none; ，然后鼠标悬停在链接上时设置文本显示 block ，并设置文本所在 span 的样式。
