css超链接样式 – CSS教程

上一章CSS教程请查看：css文本样式和属性

链接或超链接是从一个web资源到另一个web资源的连接。

使用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;
}