Styling links

讓我們看看一些鏈接

我們根據(jù)創(chuàng)建超級(jí)鏈接中的最佳做法查看了HTML中鏈接的實(shí)施方式。 在本文中，我們將基于此知識(shí)，向您展示鏈接的最佳做法。

鏈接狀態(tài)

首先要了解的是鏈接狀態(tài)的概念 - 鏈接可以存在的不同狀態(tài)，可以使用不同的 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.

默認(rèn)樣式

以下示例說明默認(rèn)情況下鏈接的行為(CSS只是放大和中心文本，使其更突出。)

<p><a  rel="external nofollow" target="_blank" >A link to the Mozilla homepage</a></p>

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

你會(huì)發(fā)現(xiàn)一些東西，你探索默認(rèn)樣式:

• 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.)

有趣的是，這些默認(rèn)樣式幾乎與1990年代中期瀏覽器早期的樣式相同。 這是因?yàn)橛脩糁啦⑵诖@種行為 - 如果鏈接的樣式不同，它會(huì)混淆很多人。 這并不意味著你不應(yīng)該樣式鏈接，只是你不應(yīng)該偏離預(yù)期的行為太遠(yuǎn)。 您應(yīng)該至少:

• 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屬性關(guān)閉/更改默認(rèn)樣式:

• 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.

為一些鏈接設(shè)置樣式

現(xiàn)在我們仔細(xì)查看了默認(rèn)狀態(tài)，讓我們來看看一組典型的鏈接樣式。

首先，我們將寫出我們的空規(guī)則集:

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

這個(gè)順序是重要的，因?yàn)殒溄訕邮奖舜私?，例如第一?guī)則中的樣式將應(yīng)用于所有后續(xù)樣式，并且當(dāng)鏈接被激活時(shí)，它也被懸停在其上。 如果你把這些在錯(cuò)誤的順序，事情將無法正常工作。 要記住此順序，您可以嘗試使用 L o V e F 耳 HA te的助記符。

現(xiàn)在，讓我們添加一些更多的信息，以正確地獲得這種風(fēng)格:

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來應(yīng)用CSS:

<p>There are several browsers available, such as <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >Mozilla
Firefox</a>, <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >Google Chrome</a>, and
<a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >Microsoft Edge</a>.</p>

把兩者放在一起給我們這個(gè)結(jié)果:

那么我們?cè)谶@里做什么？ 這看起來不同于默認(rèn)的樣式，但它仍然提供了熟悉的用戶體驗(yàn)，以便用戶知道發(fā)生了什么:

• 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!

主動(dòng)學(xué)習(xí):制作自己的鏈接

在這個(gè)主動(dòng)的學(xué)習(xí)會(huì)話中，我們希望你采用我們的空白規(guī)則，并添加你自己的聲明，使鏈接看起來很酷。 使用你的想象力，去野。 我們相信你可以提出一些更酷的功能，如我們的例子。

如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。 如果您遇到問題，請(qǐng)按顯示解決方案按鈕插入上面顯示的示例。

<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  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >Mozilla
 Firefox</a>, <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >Google Chrome</a>, and 
<a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >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);

在鏈接上包括圖標(biāo)

通常的做法是在鏈接上包括圖標(biāo)以提供關(guān)于鏈接指向什么樣的內(nèi)容的更多指示符。 讓我們來看一個(gè)非常簡單的例子，它向外部鏈接(通向其他網(wǎng)站的鏈接)添加一個(gè)圖標(biāo)。這樣的圖標(biāo)通?？雌饋硐褚粋€(gè)指向框外的小箭頭 - 在本例中，我們將使用 "https://icons8.com/web-app/741/external-link"class ="external">來自icons8.com的這個(gè)很好的示例。

讓我們看看一些HTML和CSS，它們會(huì)給我們想要的效果。 首先，一些簡單的HTML風(fēng)格:

<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
look at <a  rel="external nofollow" target="_blank" >weather on Wikipedia</a>, or check
out <a  rel="external nofollow" target="_blank" >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;
}

那么這里發(fā)生了什么？ 我們將跳過大部分的CSS，因?yàn)樗皇悄阋郧翱催^的相同的信息。 然而，最后一條規(guī)則很有趣 - 我們?cè)谕獠挎溄由喜迦胱远x背景圖片的方式與我們?nèi)绾翁幚?a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">自定義項(xiàng)目符號(hào) 列表項(xiàng)，但這次我們使用 背景 速記，而不是單個(gè)屬性。 我們?cè)O(shè)置要插入的圖像的路徑，指定 no-repeat ，這樣我們只能插入一個(gè)副本，然后將位置指定為圖像右側(cè)的100％ 和從頂部開始的0個(gè)像素。

我們還使用 background-size 指定 我們想要顯示背景圖像的大小 - 有一個(gè)更大的圖標(biāo)，然后重新調(diào)整大小，像這樣響應(yīng)網(wǎng)頁設(shè)計(jì)的目的是有用的。 但這只適用于IE 9和更高版本，所以如果你需要支持那些舊的瀏覽器，你只需要調(diào)整圖像的大小并插入它。

最后，我們?cè)O(shè)置了一些 padding-right 鏈接以使背景圖像出現(xiàn)的空間，因此我們不會(huì)與文本重疊。

最后一句話 - 我們?nèi)绾芜x擇外部鏈接？ 如果您正在正確撰寫 HTML鏈接，則應(yīng)該只對(duì)外部鏈接使用絕對(duì)網(wǎng)址，使用相對(duì)鏈接更有效地鏈接到 您自己網(wǎng)站的其他部分。 因此，文本"http"應(yīng)該只顯示在外部鏈接中，我們可以使用屬性選擇器選擇此選項(xiàng): > a [href * ="http"] 選擇 < a> 元素，但前提是他們有 attr-http"> http 屬性，其中的值包含"http"。

這就是它 - 嘗試重溫上面的主動(dòng)學(xué)習(xí)部分，并嘗試這種新技術(shù)出來！

將鏈接設(shè)為按鈕

您在本文中迄今為止探討的工具也可以以其他方式使用。 例如，像hover這樣的狀態(tài)可以用來為許多不同的元素設(shè)置樣式，而不僅僅是鏈接 - 你可能想要設(shè)置段落，列表項(xiàng)或其他東西的懸停狀態(tài)。

此外，鏈接通常被設(shè)計(jì)為在某些情況下看起來和行為像按鈕 - 網(wǎng)站導(dǎo)航菜單通常被標(biāo)記為包含鏈接的列表，并且這可以容易地被風(fēng)格化以看起來像一組控制按鈕或標(biāo)簽，其提供 用戶可以訪問網(wǎng)站的其他部分。 讓我們探索如何。

首先，一些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>

現(xiàn)在我們的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;
}

這給我們以下結(jié)果:

讓我們解釋一下這里發(fā)生了什么，集中在最有趣的部分:

• 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.

概要

我們希望本文為您提供了所有您需要了解的鏈接 - 現(xiàn)在！ 我們的樣式文本模塊中的最后一篇文章詳細(xì)介紹了如何在您的網(wǎng)站上使用自定義字體，或者更好地了解網(wǎng)絡(luò)字體。