Styling links

先决条件:	基本计算机知识，HTML基础(学习 HTML简介)，CSS基础知识(学习 CSS简介) )， CSS文本和字体基础。
目的:	了解如何设置链接状态样式，以及如何有效地在常见UI功能（如导航菜单）中使用链接。

让我们看看一些链接

我们根据创建超级链接中的最佳做法查看了HTML中链接的实施方式。在本文中，我们将基于此知识，向您展示链接的最佳做法。

链接状态

首先要了解的是链接状态的概念 - 链接可以存在的不同状态，可以使用不同的 pseudo 类:

Link (unvisited): The default state that a link resides in, when it isn't in any other state. This can be specifically styled using the :link pseudo class.
Visited: A link when it has already been visited (exists in the browser's history), styled using the :visited pseudo class.
Hover: A link when it is being hovered over by a user's mouse pointer, styled using the :hover pseudo class.
Focus: A link when it has been focused (for example moved to by a keyboard user using the Tab key or similar, or programmatically focused using HTMLElement.focus()) — this is styled using the :focus pseudo class.
Active: A link when it is being activated (e.g. clicked on), styled using the :active pseudo class.

默认样式

以下示例说明默认情况下链接的行为(CSS只是放大和中心文本，使其更突出。)

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

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

你会发现一些东西，你探索默认样式:

Links are underlined.
Unvisited links are blue.
Visited links are purple.
Hovering a link makes the mouse pointer change to a little hand icon.
Focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (On Mac, you may need enable the Full Keyboard Access: All controls option by pressing Ctrl + F7 before this will work.)
Active links are red (Try holding down the mouse button on the link as you click it.)

有趣的是，这些默认样式几乎与1990年代中期浏览器早期的样式相同。这是因为用户知道并期待这种行为 - 如果链接的样式不同，它会混淆很多人。这并不意味着你不应该样式链接，只是你不应该偏离预期的行为太远。您应该至少:

Use underlining for links, but not for other things. If you don't want to underline links, at least highlight them in some other way.
Make them react in some way when hovered/focused, and in a slightly different way when activated.

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

color for the text color.
cursor for the mouse pointer style — you shouldn't turn this off unless you've got a very good reason.
outline for the text outline (an outline is similar to a border, the only difference being that border takes up space in the box and an outline doesn't; it just sits over the top of the background). The outline is a useful accessibility aid, so think carefully before turning it off; you should at least double up the styles given to the link hover state on the focus state too.

注意:您不仅限于使用上述属性来设置您的链接风格 - 您可以自由使用任何您喜欢的属性。只是尽量不要太疯狂！

为一些链接设置样式

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

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

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

这个顺序是重要的，因为链接样式彼此建立，例如第一规则中的样式将应用于所有后续样式，并且当链接被激活时，它也被悬停在其上。如果你把这些在错误的顺序，事情将无法正常工作。要记住此顺序，您可以尝试使用 L o V e F 耳 HA te的助记符。

现在，让我们添加一些更多的信息，以正确地获得这种风格:

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/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>

把两者放在一起给我们这个结果:

那么我们在这里做什么？这看起来不同于默认的样式，但它仍然提供了熟悉的用户体验，以便用户知道发生了什么:

The first two rules are not that interesting to this discussion.
The third rule uses the a selector to get rid of the default text underline and focus outline (which varies across browsers anyway), and adds a tiny amount of padding to each link — all of this will become clear later on.
Next, we use the a:link and a:visited selectors to set a couple of color variations on unvisited and visited links, so they are distinct.
The next two rules use a:focus and a:hover to set focused and hovered links to have different background colors, plus an underline to make the link stand out even more. Two points to note here are:
- The underline has been created using border-bottom, not text-decoration — some people prefer this because the former has better styling options than the latter, and is drawn a bit lower, so doesn't cut across the descenders of the word being underlined (e.g. the tails on g and y).
- The border-bottom value has been set as 1px solid, with no color specified. Doing this makes the border adopt the same color as the element's text, which is useful in cases like this where the text is a different color in each case.
Finally, a:active is used to give the links an inverted color scheme while they are being activated, to make it clear something important is happening!

主动学习:制作自己的链接

在这个主动的学习会话中，我们希望你采用我们的空白规则，并添加你自己的声明，使链接看起来很酷。使用你的想象力，去野。我们相信你可以提出一些更酷的功能，如我们的例子。

如果发生错误，您可以随时使用重置按钮重置。如果您遇到问题，请按显示解决方案按钮插入上面显示的示例。

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/en-US/firefox/">Mozilla
 Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and 
<a href="https://www.microsoft.com/en-us/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);

在链接上包括图标

通常的做法是在链接上包括图标以提供关于链接指向什么样的内容的更多指示符。让我们来看一个非常简单的例子，它向外部链接(通向其他网站的链接)添加一个图标。这样的图标通常看起来像一个指向框外的小箭头 - 在本例中，我们将使用 "https://icons8.com/web-app/741/external-link"class ="external">来自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，因为它只是你以前看过的相同的信息。然而，最后一条规则很有趣 - 我们在外部链接上插入自定义背景图片的方式与我们如何处理自定义项目符号列表项，但这次我们使用 背景 速记，而不是单个属性。我们设置要插入的图像的路径，指定 no-repeat ，这样我们只能插入一个副本，然后将位置指定为图像右侧的100％和从顶部开始的0个像素。

我们还使用 background-size 指定我们想要显示背景图像的大小 - 有一个更大的图标，然后重新调整大小，像这样响应网页设计的目的是有用的。但这只适用于IE 9和更高版本，所以如果你需要支持那些旧的浏览器，你只需要调整图像的大小并插入它。

最后，我们设置了一些 padding-right 链接以使背景图像出现的空间，因此我们不会与文本重叠。

最后一句话 - 我们如何选择外部链接？如果您正在正确撰写 HTML链接，则应该只对外部链接使用绝对网址，使用相对链接更有效地链接到您自己网站的其他部分。因此，文本"http"应该只显示在外部链接中，我们可以使用属性选择器选择此选项: > a [href * ="http"] 选择 < a> 元素，但前提是他们有 attr-http"> http 属性，其中的值包含"http"。

这就是它 - 尝试重温上面的主动学习部分，并尝试这种新技术出来！

注意:如果您不熟悉背景和 / zh-CN / docs / Web / Apps / Progressive / Responsive / responsive_design_building_blocks">响应式网页设计; 这些在其他地方解释。

将链接设为按钮

您在本文中迄今为止探讨的工具也可以以其他方式使用。例如，像hover这样的状态可以用来为许多不同的元素设置样式，而不仅仅是链接 - 你可能想要设置段落，列表项或其他东西的悬停状态。

此外，链接通常被设计为在某些情况下看起来和行为像按钮 - 网站导航菜单通常被标记为包含链接的列表，并且这可以容易地被风格化以看起来像一组控制按钮或标签，其提供用户可以访问网站的其他部分。让我们探索如何。

首先，一些HTML:

<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

现在我们的CSS:

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

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {     
  background: orange;
}

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

这给我们以下结果:

让我们解释一下这里发生了什么，集中在最有趣的部分:

Our second rule removes the default padding from the <ul> element, and sets its width to span 100% of the outer container (the <body>, in this case).
<li> elements are normally block by default (see types of CSS boxes for a refresher), meaning that they will sit on their own lines. In this case, we are creating a horizontal list of links, so in the third rule we set the display property to inline, which causes the list items to sit on the same line as one another — they now behave like inline elements.
The fourth rule — which styles the <a> element — is the most complicated here; let's go through it step by step:
- As in previous examples, we start by turning off the default text-decoration and outline — we don't want those spoiling our look.
- Next, we set the display to inline-block — <a> elements are inline by default and, while we don't want them to spill onto their own lines like a value of block would achieve, we do want to be able to size them. inline-block allows us to do this.
- Now onto the sizing! We want to fill up the whole width of the <ul>, leave a little margin between each button (but not a gap at the right hand edge), and we have 5 buttons to accommodate that should all be the same size. To do this, we set the width to 19.5%, and the margin-right to 0.625%. You'll notice that all this width adds up to 100.625%, which would make the last button overflow the <ul> and fall down to the next line. However, we take it back down to 100% using the next rule, which selects only the last <a> in the list, and removes the margin from it. Done!
- The last three declarations are pretty simple and are mainly just for cosmetic purposes. We center the text inside each link, set the line-height to 3 to give the buttons some height (which also has the advantage of centering the text vertically), and set the text color to black.

注意:您可能已经注意到HTML中的列表项目都放在同一行上 - 这是因为在行内块元素之间的空格/换行符在页面上创建空格，就像词之间的空格，这样的空格会破坏我们的水平导航菜单布局。所以我们删除了空格。您可以在战斗中找到有关此问题(和解决方案)的详细信息内联块元素之间的空间。

概要

我们希望本文为您提供了所有您需要了解的链接 - 现在！我们的样式文本模块中的最后一篇文章详细介绍了如何在您的网站上使用自定义字体，或者更好地了解网络字体。

w3cschool 编程狮，随时随地学编程

Styling links

让我们看看一些链接

链接状态

默认样式

为一些链接设置样式

主动学习:制作自己的链接

Playable code

在链接上包括图标

将链接设为按钮

概要

Web开发入门

HTML—构建网络

HTML介绍

Multimedia_and_embedding

Introduction_to_CSS

Accessibility

Styling_text

First_steps

Tools_and_testing

Building_blocks

CSS_layout

Objects

Express_Nodejs

Django