css超链接样式 – CSS教程 css超链接样式|CSS

上一章CSS教程请查看：css文本样式和属性
链接或超链接是从一个web资源到另一个web资源的连接。
使用CSS设置链接样式【css超链接样式 – CSS教程】一个链接有四种不同的状态——link, visited, active and hover，链接或超链接的这四种状态可以通过使用锚元素的伪类的CSS属性进行不同的样式化，这取决于它们所处的状态。
下面是与HTML < a> 标记相关联的CSS伪类，你可以使用这些伪类为超链接的不同状态定义不同的样式。

a:link – 设置样式为一个正常或未访问的链接，没有鼠标指针在它上面。
a:visited – 为用户已访问但没有鼠标指针的链接设置样式。
a:hover – 当用户将鼠标指针放在链接上时，设置链接的样式。
a:active – 正在被点击的链接的活动设置样式。

你可以指定任何你想要的CSS属性，例如color, font-family, background等等，这些选择器来重新定义链接的样式，就像你对普通文本所做的一样。

a:link {/* unvisited link */ color: #FF0000; text-decoration: none; } a:visited {/* visited link */ color: #00FF00; } a:hover {/* mouse over link */ color: #FF00FF; text-decoration: underline; } a:active {/* active link */ color: #0000FF; }

设置多个链接状态的样式的顺序很重要，因为定义last的内容优先于前面的CSS代码。
注意：伪类的顺序应该是：:link、:visited、:hover、:active、:focus，以便正常工作。
标准的链接样式在所有主要的web浏览器中，web页面上的链接都有下划线并使用浏览器的默认链接颜色(如果你没有专门为它们设置样式)。
例如，在基于Gecko的web浏览器(如Firefox)中，默认的链接颜色是——蓝色表示未访问，紫色表示已访问，红色表示活动链接。
设置链接的颜色
下面是演示如何设置链接颜色的示例。

a:link {/* unvisited link */ color: #FF0000; } a:visited {/* visited link */ color: #00FF00; } a:hover {/* mouse over link */ color: #FF00FF; } a:active {/* active link */ color: #0000FF; }

从链接中删除默认下划线text-decoration的CSS属性通常用于从链接中删除默认的下划线。下面的示例演示如何为超链接的不同状态删除或设置文本装饰属性。

a:link {/* unvisited link */ color: #FF0000; text-decoration: none; } a:visited {/* visited link */ color: #00FF00; text-decoration: none; } a:hover {/* mouse over link */ color: #FF00FF; text-decoration: underline; } a:active {/* active link */ color: #0000FF; text-decoration: underline; }