CSS 基础：像 Boss 一样为链接设置样式

网络建立在链接的基础之上。我们能够点击/轻触链接并在网页之间导航的想法，正是“冲浪网络”成为家喻户晓的词语的原因。

即使没有任何 CSS 样式，HTML 中的链接看起来也与普通文本不同。

它们是蓝色的（如果已访问则为紫色）。它们带下划线。这就是链接最原始的形式。

但是，如果我们想稍微改变一下呢？也许蓝色不适合您网站的设计。也许您不喜欢下划线。无论出于何种原因，CSS 都允许我们像设置任何其他元素的样式一样设置链接的样式。我们只需在样式表中定位 元素即可。

想要使用不同的字体、更改颜色、移除下划线并将其全部大写？当然，为什么不呢？

a {
  color: red;
  text-decoration: none;
  text-transform: uppercase;
}

现在我们开始步入正轨了！但为什么止步于此呢？让我们看看还可以通过哪些其他方式为链接设置样式以完善体验。

设置每个链接状态的样式

链接具有不同的状态，这意味着当我们在网页上与它们交互时，它们会进行调整。在更改链接的默认样式时，值得考虑链接的三个其他状态。

• 链接 (:link)：这可能是使用频率最低的，但它用于为具有 href 的 <a> 元素设置样式，而不是占位符链接。
• 已访问 (:visited)：用户之前在页面上点击过的链接的外观，此时鼠标光标不在其上方。出于安全原因，您可以应用于 :visited 的样式受到限制。
• 悬停 (:hover)：当鼠标光标放在链接上但未点击时
• 活动 (:active)：当链接正在被点击时。它可能非常快，但这是鼠标按钮已被按下且点击尚未结束时。
• 焦点 (:focus)：类似于 :hover，但使用键盘上的 Tab 键选择链接时。悬停和焦点状态通常一起设置样式。

请注意，那里的顺序很重要

1. 链接
2. 已访问
3. 悬停
4. 活动
5. 焦点

如果您不按照此顺序进行操作（例如，假设您的 :visited 样式位于 :hover 样式之后），则链接的行为将与您期望的不符。在我的虚构示例中，:visited 样式将覆盖 :hover 样式，这极不可能是您想要的。焦点是一个辅助功能特性，因此最后设置，因为它最重要。

记住顺序的一种方法是LOVE 和 HATE。即 L(ink)OV(isted)E / H(over)A(Active)TE。

这是我们一直在查看的相同链接。首先，尝试将鼠标悬停在其上而不点击，并注意它会变成带下划线的样式。然后，点击链接，但将鼠标按钮保持按下状态一段时间，以查看活动样式如何将链接的颜色更改为黑色。最后，松开鼠标按钮，链接在技术上被访问之前应变为紫色。

链接似乎是一个简单的概念，但它们确实有很多内容——并且 CSS 为我们提供了强大的自定义体验的能力！

链接作为按钮

虽然对此有一些争论，但我们可以使用 CSS 使文本链接看起来像按钮。

与其他 HTML 元素一样，CSS 可以为链接添加背景颜色和填充，使我们能够创建按钮的外观。这是我们使用这些技术的链接

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

太好了！现在，让我们使用上一节中学到的状态更改功能来使我们的伪按钮更具交互性。我们将使按钮在悬停时变为深灰色，在活动时变为黑色，在访问后变为浅灰色

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

a:hover {
  background-color: #555;
}

a:active {
  background-color: black;
}

a:visited {
  background-color: #ccc;
}

将链接设置为按钮样式并利用状态，我们可以创建一些非常酷的效果。例如，让我们创建一个具有深度的按钮，使其在活动时看起来像被按下，并在点击完成时弹回。

哦，还有光标！

我们已经深入研究了链接的样式，但还有一个组件我们不能忽视：光标。

光标指示鼠标在屏幕上的位置。我们习惯了标准的黑色箭头

我们可以将其在悬停 (:hover) 状态下更改为手形指针，以便更容易地看出链接表示它是一个交互式元素

a:hover {
  cursor: pointer;
}

哇，这好多了！现在，我们拥有一个非常漂亮的链接，它看起来像一个带适当交互式提示的按钮。

进阶

我们在这里涵盖了很多内容，但这仅仅触及了我们如何控制链接样式的表面。如果您已准备好进阶，那么以下是一些您可以从这里开始的资源

• Mailto 链接 – 用于链接电子邮件地址而不是网页的良好参考。
• 电话链接的现状 – 您知道可以链接电话号码吗？嗯，这就是方法。
• 光标 – CSS-Tricks 自定义光标的参考指南。
• 何时使用 Button 元素 – 如果您想知道链接按钮和传统表单按钮之间的区别，那么这是一个很好的概述，并建议在特定上下文中哪个更好。
• 按钮生成器 – 一个免费资源，用于生成链接按钮的 CSS。