样式化链接

编辑
高级
- 历史记录
- 打印此文章

当为 links 添加样式时, 理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。我们将在本文中关注所有这些主题。

学习本章节的前提:	基本的计算机使用能力，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习 Introduction to CSS), CSS text and font fundamentals.
目的:	学习如何将样式应用到链接状态，以及如何使用链接实现常见的 UI 功能，比如导航菜单。

让我们来看一些链接

根据最佳实践创建超链接中的练习，我们看到了如何在你的 HTML 中实现链接。在本篇文章中，我们会以这个知识为基础，向你展示将样式应用到链接的最佳实践。

链接状态

第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的伪类来应用样式:

Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。
Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。
Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover 伪类来应用样式。
Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。
Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 :active 伪类来应用样式。

默认的样式

下面的例子说明了一个链接的默认行为表现 (这里的 CSS 仅仅是为了放大和居中文本，使内容更加突出)

<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>

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

当你观察默认样式的时候，你也许会注意到一些东西:

链接具有下划线。
未访问过的 (Unvisited) 的链接是蓝色的。
访问过的 (Visited) 的链接是紫色的.
悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。
选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接 (在 Mac 上, 你可能需要使用Full Keyboard Access: All controls 选项，然后再按下 Ctrl + F7 ，这样就可以起作用)
激活 (Active) 链接的时候会变成红色 (当你点击链接时，请尝试按住鼠标按钮。)

有趣的是，这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：

为链接使用下划线，但是不要在其他内容上也用下划线，以作区分。如果你不想要带有下划线的链接，那你至少要用其他方法来高亮突出链接。
当用户悬停或选择 (hover 或者 focused) 的时候，使链接有相应的变化，并且在链接被激活(active) 的时候，变化会有一些不同。可以使用以下CSS属性关闭/更改默认样式：
color 文字的颜色
cursor 鼠标光标的样式，你不应该把这个关掉，除非你有非常好的理由。
outline 文字的轮廓 (轮廓有点像边框，唯一的区别是边框占用了盒模型的空间，而轮廓没有；它只是设置在背景图片的顶部)。outline 是一个有用的辅助功能，所以在把它关掉之前考虑清楚；你至少应该将悬停 (hover) 状态的样式同时应用到选中 (focus) 状态上。

注意: 你不仅仅只限于上述属性来把样式应用到你的链接上，你可以用任何你喜欢的属性，就是不要搞得太疯狂！

将样式应用到一些链接

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

开始之前，我们先写出我们的空规则集：

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

这个顺序是重要的，因为链接的样式是建立在另一个样式之上的，比如第一个规则的样式会应用到所有后续的样式，如果当一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。要记住这个顺序，你可以尝试这样帮助记忆：LoVe Fears HAte.

现在让我们添加一些更多的信息来正确地得到这个样式：

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

p {
  line-height: 1.4;
}

a {
  outline: none;
  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;
}

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

<p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla
Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">Microsoft Edge</a>.</p>

把这两个放在一起，我们得到这个结果：

那么我们在这里做了什么? 这个肯定看起来和默认的风格不同，但它仍然提供了一个熟悉的感觉，好让用户知道发生了什么：

第一和第二条规则和本次讨论关系不大。
第三个规则使用了 a 选择器取消了默认的文本下划线和链接被选中 (focus) 时的轮廓 (outline) (不同的浏览器默认的行为可能不同，不过这里是取消了)，并为每个链接添加了少量的内边距(padding)，所有这一切将在之后变得明确。
接着, 我们使用 a:link 和 a:visited 选择器来设置未访问 (unvisited)链接和访问过 (visited) 的链接上的一些颜色变化，当然它们是不同的。
下面两条规则使用 a:focus 和 a:hover 来设置选中 (focus) 和悬停 (hover) 的链接有不同的背景颜色，加上一个下划线，使链接更加突出。这里有两点需要注意：
- 下划线是使用 border-bottom 创造的, 而不是 text-decoration，有一些人喜欢这个，因为前者比后者有更好的样式选项，并且绘制的位置会稍微低一点，所以不会穿过字母 (比如字母 g 和 y 底部).
- 这个 border-bottom 值被设置为1px solid, 没有明确的颜色。这样做可以使边框采用和元素文本一样的颜色，这在这样的情况下是很有用的，因为链接的每种状态下，文本是不同的颜色。
最后, a:active 用来给链接一个不同的配色方案，当链接被激活 (activated) 时，让链接被激活的时候更加明显。

动手练习: 为你的链接添加样式

在这个动手练习部分，我们希望你使用我们的空规则集，然后添加你自定义的规则，从而使链接看上去比较酷。发挥你的想象力，大胆地做吧。我们相信你可以想出一些更酷的东西，就像我们上面的例子一样。

如果你犯了错误，你都可以使用 Reset 按钮来重置。 如果你遇到了困难，可以按 Show solution 按钮来显示我们上文中的例子。

Playable code

<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="https://www.mozilla.org/zh-CN/firefox/">Mozilla
 Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and 
<a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">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>

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

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

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

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

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}';
  drawOutput();
});

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

在链接中包含图标

一个常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。这样的图标通常看起来像一个指向盒子的小箭头，比如, 我们会使用 this great example from icons8.com.

让我们来看一些能给我们这个效果的 HTML 和 CSS。首先，一些简单的 HTML 样式：

<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

接着是 CSS:

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

p {
  line-height: 1.4;
}

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

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

那么这里发生了什么? 我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里我们在外部链接上插入了一个自定义背景图片，这和上篇 custom bullets on list items 文章的做法很像。这次我们使用了 background 简写代替了使用多个属性。我们设置了我们想要插入的图片的路径，指定 no-repeat ，所以我们只得到了一个插入的副本，然后指定位置是 100% 使其出现在内容的右边，然后距离上方是 0 px。

我们也使用 background-size 来指定要显示的背景图像的大小，这样对有一个大的图标，然后重新调整它的大小是很有帮助的，也是响应式网站设计的需要。但是，这仅适用于IE 9及更高版本。所以你如果需要支持那些老的浏览器，你只需要调整图像大小，然后插入它。

最后，我们在链接上设置 padding-right ，为背景图片留出空间，所以我们不会和文本重叠。

最后一句话，我们是如何只选中了外部链接的？如果你正确写了你的 HTML links ，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此 "http" 文本应该只出现在外部链接上，所以我们可以使用一个属性选择器 attribute selector: a[href*="http"] 选中 <a> 元素，但是只会选中那些拥有 href 属性，且属性的值包含 "http" 的 <a>的元素。

就这样啦，尝试重新审视上面的动手练习部分，尝试这种新技术！

注意: 不要担心，如果你目前不熟悉 backgrounds 和 responsive web design ; 这些会在其他地方解释。