链接样式

在对链接进行样式化时，了解如何使用伪类来有效地对它们的状态进行样式化非常重要。了解如何对链接进行样式化以便在内容不同的常见界面功能（如导航菜单和选项卡）中使用也很重要。我们将在本文中介绍这两个主题。

先决条件	HTML 基础（学习 HTML 简介），CSS 基础（学习 CSS 入门），CSS 文本和字体基础。
目标	学习如何对链接状态进行样式化，以及如何将链接有效地用于常见的 UI 功能（如导航菜单）。

让我们看看一些链接

我们在创建超链接中介绍了如何根据最佳实践在 HTML 中实现链接。在本文中，我们将在此基础上进行扩展，向您展示对它们进行样式化的最佳实践。

链接状态

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

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

默认样式

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

链接带下划线。
未访问的链接为蓝色。
已访问的链接为紫色。
将鼠标悬停在链接上会使鼠标指针变为一个小手图标。
获得焦点的链接周围有边框 — 您应该能够通过按 Tab 键使用键盘将焦点移到本页上的链接上。（在 Mac 上，您需要使用 option + tab ，或通过按 Ctrl + F7 启用完全键盘访问：所有控件选项。）
活动链接为红色。尝试在单击链接时按住鼠标按钮。

html

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

css

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

注意：本页上的所有链接示例都链接到其窗口的顶部。空片段 (href="#") 用于创建简单的示例，并确保包含在 <iframe> 中的实时示例不会中断。

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

为链接使用下划线，但不要为其他东西使用。如果你不想为链接添加下划线，至少要以其他方式突出显示它们。
当悬停/聚焦时，让它们以某种方式做出反应，并在激活时以略微不同的方式做出反应。

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

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

注意：你不只是局限于使用上述属性来设置链接的样式——你可以随意使用任何你喜欢的属性。

设置一些链接的样式

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

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

css

a {
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

此顺序很重要，因为链接样式是相互建立的。例如，第一个规则中的样式将应用于所有后续规则。当链接被激活时，它通常也会被悬停。如果你以错误的顺序放置它们，并且你在每个规则集中更改相同的属性，那么结果将不会如你所愿。为了记住顺序，你可以尝试使用助记符，例如 **L**o**V**e **F**ears **HA**te。

现在让我们添加更多信息以使其正确设置样式

css

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

html

<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 用于在链接被激活时为其提供反向颜色方案，以清楚地表明正在发生重要的事情！

主动学习：设置你自己的链接样式

在本节主动学习中，我们希望你使用我们的空规则集并添加你自己的声明，使链接看起来很酷。发挥你的想象力，尽情发挥。我们相信你可以想出比我们上面的示例更酷且同样实用的东西。

如果你犯了错误，可以使用“重置”按钮将其重置。如果你真的卡住了，请按“显示解决方案”按钮插入我们上面显示的示例。

<div
  class="body-wrapper"
  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea
    id="code"
    class="html-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<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>
  </textarea>

  <h2>CSS Input</h2>
  <textarea
    id="code"
    class="css-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
a {

}

a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}
  </textarea>

  <h2>Output</h2>
  <div
    class="output"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input
      id="reset"
      type="button"
      value="Reset"
      style="margin: 10px 10px 0 0;" />
    <input
      id="solution"
      type="button"
      value="Show solution"
      style="margin: 10px 0 0 10px;" />
  </div>
</div>

const htmlInput = document.querySelector(".html-input");
const cssInput = document.querySelector(".css-input");
const reset = document.getElementById("reset");
const htmlCode = htmlInput.value;
const cssCode = cssInput.value;
const output = document.querySelector(".output");
const solution = document.getElementById("solution");

const styleElem = document.createElement("style");
const headElem = document.querySelector("head");
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = `p {
  font-size: 1.2rem;
  font-family: sans-serif;
  line-height: 1.4;
}

a {
  outline-color: transparent;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}`;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

在链接中包含图标

一种常见的做法是在链接上包含图标，以提供更多指示，说明链接指向的内容。让我们来看一个非常简单的示例，它在外部链接（指向其他网站的链接）上添加了一个图标。这样的图标通常看起来像一个小箭头指向盒子外。在本例中，我们将使用来自 icons8.com 的外部链接图标.

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

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

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> 元素，但前提是它们具有 href 属性，其值以“http”开头。

就是这样。尝试重新访问上面的主动学习部分，并尝试使用这种新技术！

注意：如果你不熟悉背景和响应式网页设计，请不要担心；这些将在其他地方解释。

将链接样式化为按钮

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

此外，链接通常被设置为在某些情况下看起来和表现得像按钮。网站导航菜单可以标记为一组链接，并且可以设置为看起来像一组控制按钮或选项卡，为用户提供访问网站其他部分的途径。让我们来探索一下如何做到这一点。

首先，一些 HTML

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

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 定义了一个 <nav> 元素，具有 "container" 类。<nav> 包含我们的链接。

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

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

摘要

我们希望本文为你提供了有关链接的所有必要信息——暂时如此！我们关于设置文本样式的模块中的最后一篇文章详细介绍了如何在网站上使用自定义字体（或更确切地说，网页字体）。