CSS 链接

在本教程中，您将学习如何使用 CSS 为链接的不同状态设置样式。

使用 CSS 样式化链接

链接或超链接是网站的重要组成部分。 它允许访问者浏览网站。 因此，正确设置链接样式是构建用户友好网站的重要方面。

请参阅有关 HTML 链接 的教程，了解有关链接以及如何创建链接的更多信息。

A link has four different states — link, visited, active and hover. These four states of a link can be styled differently through using the following anchor pseudo-class selectors.

• a:link — 为正常或未访问的链接定义样式。
• a:visited — 为用户已经访问过的链接定义样式。
• a:hover — 当用户将鼠标指针放在链接上时，定义链接的样式。
• a:active — 定义链接被点击时的样式。

您可以指定任何您想要的 CSS 属性，例如 color, font, background, border 等对这些 选择器 中的每一个自定义链接样式，就像您对普通文本所做的那样。

a:link {    /* 未访问的链接 */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* 访问过的链接 */
    color: #ff00ff;
}
a:hover {    /* 鼠标悬停在链接上 */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* 活动链接 */
    color: #00ffff;
}

为链接的不同状态设置样式的顺序很重要，因为最后定义的内容优先于之前定义的样式规则。

修改标准链接样式

在所有主流网络浏览器（如 Chrome、Firefox、Safari 等）中，网页上的链接都有下划线，如果您没有专门为它们设置样式，则使用浏览器的默认链接颜色。

默认情况下，文本链接在大多数浏览器中会显示如下：

• 一个未访问的链接为带下划线的蓝色文本。
• 一个访问过的链接为带下划线的紫色文本。
• 活动链接为带下划线的红色文本。

但是，在悬停状态的情况下，链接的外观没有变化。 根据他们所处的状态（即未访问、已访问或活动），它会保持蓝色、紫色或红色。

现在让我们看看如何通过覆盖默认样式来自定义链接。

设置链接的自定义颜色

只需使用 CSS color 属性为链接的不同状态定义您选择的颜色。 但在选择颜色时，请确保用户可以清楚地区分普通文本和链接。

让我们试试下面的例子来了解它的基本工作原理：

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

从链接中删除默认下划线

如果你不喜欢链接的默认下划线，你可以简单地使用 CSS text-decoration 属性来摆脱它。 或者，您可以在链接上应用其他样式，例如背景颜色、底部边框、粗体字体等，以使其从普通文本中脱颖而出。

以下示例显示如何为链接的不同状态删除或设置下划线。

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

使文本链接看起来像按钮

您还可以使用 CSS 使您的普通文本链接看起来像按钮。 为此，我们需要使用更多的 CSS 属性，例如 background-color、border、display、padding 等。您将在接下来的章节中详细了解这些属性。

让我们看看下面的例子，看看它是如何工作的：

a:link, a:visited {
    color: white;    
    background-color: #1ebba3;    
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #099983;
    text-decoration: none;
    text-align: center;
    font: 14px Arial, sans-serif;  
}
a:hover, a:active {
    background-color: #9c6ae1;
    border-color: #7443b6;
}