链接样式

链接状态

首先要了解的是链接状态的概念——链接可以存在的不同状态。这些可以使用不同的伪类进行样式设置

• 链接：具有目标（即不只是一个命名的锚点）的链接，使用:link伪类进行样式设置。
• 已访问：已访问过的链接（存在于浏览器历史记录中），使用:visited伪类进行样式设置。
• 悬停：用户鼠标指针悬停在上面的链接，使用:hover伪类进行样式设置。
• 焦点：处于焦点的链接（例如，键盘用户使用Tab键或类似方式移动到，或使用HTMLElement.focus()进行编程聚焦）——这使用:focus伪类进行样式设置。
• 活动：被激活的链接（例如，点击），使用:active伪类进行样式设置。

默认样式

下面的示例说明了链接的默认外观和行为；尽管 CSS 正在放大和居中文字以使其更突出。你可以将示例中默认样式的外观和行为与此页面上应用了更多 CSS 样式的其他链接的外观和行为进行比较。默认链接具有以下属性

• 链接带有下划线。
• 未访问的链接是蓝色的。
• 已访问的链接是紫色的。
• 悬停链接会使鼠标指针变为一个小手图标。
• 获得焦点的链接周围有轮廓——你应该可以通过按 Tab 键在键盘上聚焦此页面上的链接。
• 活动链接是红色的。尝试在点击链接时按住鼠标按钮。

<p><a href="#">A simple link</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

有趣的是，这些默认样式与 20 世纪 90 年代中期浏览器早期时期的样式几乎相同。这是因为用户了解并已经习惯了这种行为——如果链接的样式不同，会使很多人感到困惑。这并不意味着你不应该为链接设置样式。这只是意味着你不应该偏离预期行为太远。你至少应该

• 对链接使用下划线，但不用于其他事物。如果你不想给链接加下划线，至少以其他方式突出显示它们。
• 使它们在悬停/聚焦时以某种方式做出反应，并在激活时以稍微不同的方式做出反应。

默认样式可以使用以下 CSS 属性关闭/更改

• color 用于文本颜色。
• cursor 用于鼠标指针样式——除非你有很好的理由，否则你不应该关闭它。
• outline 用于文本轮廓。轮廓类似于边框。唯一的区别是边框会占用盒子中的空间，而轮廓不会；它只是位于背景之上。轮廓是一种有用的辅助功能，因此不应在不添加其他指示聚焦链接的方法的情况下将其删除。

链接样式

现在我们已经详细了解了默认状态，让我们看看一组典型的链接样式。

首先，我们将编写空的规则集

a {
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

这个顺序很重要，因为链接样式是相互建立的。例如，第一个规则中的样式将应用于所有后续规则。当一个链接被激活时，它通常也处于悬停状态。如果你把它们放在错误的顺序，并且你在每个规则集中都更改相同的属性，事情就不会按你预期的方式工作。为了记住顺序，你可以尝试使用助记符，例如 LoVe Fears HAte。

现在我们添加更多信息，以便正确设置样式

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline-color: transparent;
}

a:link {
  color: #6900ff;
}

a:visited {
  color: #a5c300;
}

a:focus {
  text-decoration: none;
  background: #bae498;
}

a:hover {
  text-decoration: none;
  background: #cdfeaa;
}

a:active {
  background: #6900ff;
  color: #cdfeaa;
}

我们还将提供一些示例 HTML 以应用 CSS

<p>
  There are several browsers available, such as <a href="#">Mozilla Firefox</a>,
  <a href="#">Google Chrome</a>, and <a href="#">Microsoft Edge</a>.
</p>

将两者结合起来，我们得到这个结果

那么我们在这里做了什么？这看起来确实与默认样式不同，但它仍然为用户提供了足够熟悉的体验，让他们知道发生了什么

• 前两个规则对本次讨论来说并不那么有趣。
• 第三个规则使用 a 选择器来消除焦点轮廓（无论如何，它在不同浏览器中都不同）。
• 接下来，我们使用 a:link 和 a:visited 选择器为未访问和已访问的链接设置几种颜色变体，使它们有所区别。
• 接下来的两个规则使用 a:focus 和 a:hover 来设置聚焦和悬停的链接没有下划线和不同的背景颜色。
• 最后，a:active 用于在链接被激活时为其提供反转的配色方案，以明确正在发生重要的事情！

自定义链接样式

对于此任务，我们希望你采用我们空的规则集并添加你自己的声明，使链接看起来非常酷。发挥你的想象力，尽情发挥。我们相信你可以想出比我们上面的示例更酷、功能更强大的东西。

1. 单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。
2. 为链接提供一些默认样式，这些样式将始终应用于它们。你不必只坚持文本颜色，但要确保链接仍然可以识别为链接。
3. 为已访问链接设置与你设置的默认链接样式略有不同的颜色。
4. 为链接的聚焦和悬停状态设置独特的样式，使其在其他链接中突出显示。此外，当链接被聚焦/悬停时，删除默认下划线。
5. 再次为活动状态设置不同的样式。

如果你犯了错误，可以使用 MDN Playground 中的“重置”按钮清除你的工作。如果你真的卡住了，可以在示例输出下方查看示例解决方案。

<p>
  There are several browsers available, such as
  <a href="https://www.mozilla.org/firefox/new/" target="_blank">Mozilla Firefox</a>,
  <a href="https://www.google.co.uk/chrome/" target="_blank">Google Chrome</a>, and
  <a href="https://www.microsoft.com/edge" target="_blank">Microsoft Edge</a>.
</p>

p {
  font-size: 1.2rem;
  font-family: sans-serif;
  line-height: 1.4;
}

a {
}

a:visited {
}

a:focus,
a:hover {
}

a:active {
}

a {
  outline-color: transparent;
  padding: 2px 1px 0;
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:hover,
a:focus {
  background: #bae498;
  text-decoration: none;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

在链接中包含图标

一种常见的做法是在链接上包含图标，以提供更多指示，说明链接指向哪种类型的内容。让我们看一个非常简单的示例，该示例将图标添加到外部链接（指向其他站点的链接）。这样的图标通常看起来像一个从小方框中指出的箭头。对于此示例，我们将使用icons8.com 上的外部链接图标。

让我们看一些 HTML 和 CSS，它们将给我们想要的效果。首先，一些简单的 HTML 样式

<p>
  For more information on the weather, visit our <a href="#">weather page</a>,
  look at <a href="https://en.wikipedia.org/">weather on Wikipedia</a>, or check
  out
  <a href="https://www.nationalgeographic.org/topics/resource-library-weather/">
    weather on National Geographic</a>.
</p>

接下来是 CSS

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

a[href^="http"]::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.25em;

  background-size: 100%;
  background-image: url("external-link-52.png");
}

那么这里发生了什么？我们将跳过大部分 CSS，因为它与你之前看过的相同。然而，最后一个规则很有趣：我们使用了::after伪元素。0.8rem x 0.8rem 伪元素在锚文本之后作为内联块放置。图标被渲染为伪元素的background。

我们使用了相对单位em。它根据锚的文本大小按比例调整图标大小。如果锚的文本大小发生变化，图标大小也会相应调整。

最后一点：我们是如何只选择外部链接的？嗯，如果你正确编写了你的HTML 链接，你应该只对外部链接使用绝对 URL——使用相对链接链接到你网站的其他部分更有效率（如第一个链接所示）。因此，文本“http”应该只出现在外部链接中（如第二个和第三个链接），我们可以使用属性选择器来选择它：a[href^="http"]选择<a>元素，但前提是它们具有以“http”开头的href属性值。

就是这样。尝试重新访问上面的任务部分并尝试这种新技术！

将链接样式化为按钮

你到目前为止本文中探索的工具也可以以其他方式使用。例如，悬停等状态可以用于设置许多不同元素的样式，而不仅仅是链接——你可能希望设置段落、列表项或其他事物的悬停状态。

此外，在某些情况下，链接通常被样式化为看起来和行为像按钮。网站导航菜单可以标记为一组链接，并且可以将其样式化为一组控制按钮或选项卡，为用户提供访问网站其他部分的权限。让我们探讨一下如何实现。

首先，一些 HTML

<nav class="container">
  <a href="#">Home</a>
  <a href="#">Pizza</a>
  <a href="#">Music</a>
  <a href="#">Wombats</a>
  <a href="#">Finland</a>
</nav>

现在是我们的 CSS

body,
html {
  margin: 0;
  font-family: sans-serif;
}

.container {
  display: flex;
  gap: 0.625%;
}

a {
  flex: 1;
  text-decoration: none;
  outline-color: transparent;
  text-align: center;
  line-height: 3;
  color: black;
}

a:link,
a:visited,
a:focus {
  background: palegoldenrod;
  color: black;
}

a:hover {
  background: orange;
}

a:active {
  background: darkred;
  color: white;
}

这给了我们以下结果：

HTML 定义了一个带有 "container" 类的<nav>元素。<nav> 包含我们的链接。

CSS 包含容器及其包含的链接的样式。

• 第二个规则说
  • 容器是一个弹性盒子。它包含的项目（在本例中是链接）将是弹性项目。
  • 弹性项目之间的间距将是容器宽度的 0.625%。
• 第三个规则为链接设置样式
  • 第一个声明 flex: 1 意味着项目的宽度将被调整，以便它们使用容器中所有可用空间。
  • 接下来，我们关闭默认的text-decoration和outline——我们不希望它们破坏我们的外观。
  • 最后三个声明是使每个链接内的文本居中，将line-height设置为 3 以使按钮具有一定高度（这也具有垂直居中文本的优点），并将文本颜色设置为黑色。

总结

我们希望本文能为你提供所有你需要了解的链接知识——目前为止！我们的“样式化文本”模块中的最后一篇文章详细介绍了如何在你的网站上使用自定义字体（或众所周知的网络字体）。

• 上一页
• 概述：CSS 文本样式
• 下一页