連結樣式

在對連結進行樣式化時，瞭解如何使用偽類來有效地對它們的狀態進行樣式化非常重要。瞭解如何對連結進行樣式化以便在內容不同的常見介面功能（如導航選單和選項卡）中使用也很重要。我們將在本文中介紹這兩個主題。

先決條件	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 以給按鈕一些高度（這也具有垂直居中文字的優點），並將文字顏色設定為黑色。

摘要

我們希望本文為你提供了有關連結的所有必要資訊——暫時如此！我們關於設定文字樣式的模組中的最後一篇文章詳細介紹瞭如何在網站上使用自定義字型（或更確切地說，網頁字型）。