05.对连接应用样式

对连接应用样式：

1 简单的链接样式：

1.1 包含片段标识符的锚（页面将跳转到第二个锚点的位置）

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 的样式。

---