CSS——读书笔记-05-链接

第五章 对链接应用样式

1.简单的链接样式

1》锚类型选择器

a { color: red; }

2》伪类型选择器

锚可以作为内部引用，也可以作为外部链接。

如：第一个锚点击跳转第二个锚位置。

<p><a href="#mainContent">Skip to main content</a></p>
<h1><a name="mainContent">Welcome</h1>

所以可以设置伪类型：未被访问link，已访问过visited

a:link { color:blue; }
a:visited { color:green; }

悬停hover(使用时最好加上focus，使通过键盘移动到链接时有同样效果)；

a:hover, a:focus { color: red; }　　

被激活active(链接单击时)

很多时候，会先去掉下划线，在悬停或者单击时显示下划线。

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

注意:上面两句顺序不能颠倒，否则会覆盖hover和active的样式。建议顺序：link/visited/hover/focus/active。

2.让下划线更有趣

1》使用下边框(点线->实线)

a:link, a:visited {
    text-decoration: none;
    border-bottom: 1px dotted #000;
}

a:hover, a:focus, a:active {
    border-bottom-style: solid;
}

2》使用图像

a:link, a:visited {
    color: #666;
    text-decoration: none;
    background: url(/img/underline1.gif) repeat-x left bottom;
}

3.特殊的已访问链接样式

采用图像:

a:visited {
    padding-right: 20px;
    background: url(/img/check.gif) no-repeat right middle;
}

　　

4.未连接目标设置样式

跳转

<a href="http://xxx.com/story.htm#comment3">
    A great comment by simon
</a>

跳转后，不容易发现目标元素，所以设置目标元素的样式（IE暂不支持，safari和Firefox已经支持）

.comment:target {
    background-color: yellow;
}

　　

5.突出显示不同类型的链接

对于外部链接，许多站点在新窗口中打开，在没通知用户的情况下使用户失去了控制能力，

所以在外部链接添加一个特殊的样式，用于区别。

如，Wikipedia等站点使用一个框右上角一个箭头的图像标识。

方式：

　　可以通过给所有外部链接添加一个类去设置；

　　通过属性选择器，a[href^="http://"]

(但是同样会设置了使用绝对url而不是相对url的内部链接，可以将指向自己域名的链接去掉该样式)

同样，可以设置其他类型的链接，如所有pdf链接a[href$=".pdf"]