CSS 链接

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

使用 CSS 设置样式链接

链接有四种不同的状态- linkvisitedactivehover。链接或超链接的这四种状态可以通过 CSS 属性使用锚元素的伪类更改成不同的样式,具体取决于它们所处的状态。

以下是与 HTML <a> 标记关联的 CSS 伪类,可用于为超链接的不同状态定义不同的样式。

  • a:link - 为没有鼠标指针的普通或未访问链接设置样式。
  • a:visited - 为用户访问过的链接设置样式但没有鼠标指针。
  • a:hover - 当用户将鼠标指针放在链接上时设置链接的样式。
  • a:active - 为正在单击的链接设置样式。

你可以指定你想要的 CSS 属性如 colorfont-familybackground 等,以这些的选择重新定义链接的风格,就像你对普通的文本处理那样。

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

你为多个链接状态设置样式的顺序很重要,因为最后定义的内容优先于早期的 CSS 代码。

注: 伪类的顺序应该是如下: :link:visited:hover:active:focus 为了使这些正常工作。

标准链接样式

在所有主要的 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 属性一般用来从链接中删除默认的下划线。以下示例演示如何删除或设置超链接的不同状态的 text-decoration 属性。

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