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"]