連結樣式

連結狀態

首先要了解的是連結狀態的概念——連結可以存在的不同狀態。這些可以使用不同的偽類進行樣式設定

• 連結：具有目標（即不只是一個命名的錨點）的連結，使用:link偽類進行樣式設定。
• 已訪問：已訪問過的連結（存在於瀏覽器歷史記錄中），使用:visited偽類進行樣式設定。
• 懸停：使用者滑鼠指標懸停在上面的連結，使用:hover偽類進行樣式設定。
• 焦點：處於焦點的連結（例如，鍵盤使用者使用Tab鍵或類似方式移動到，或使用HTMLElement.focus()進行程式設計聚焦）——這使用:focus偽類進行樣式設定。
• 活動：被啟用的連結（例如，點選），使用:active偽類進行樣式設定。

預設樣式

下面的示例說明了連結的預設外觀和行為；儘管 CSS 正在放大和居中文字以使其更突出。你可以將示例中預設樣式的外觀和行為與此頁面上應用了更多 CSS 樣式的其他連結的外觀和行為進行比較。預設連結具有以下屬性

• 連結帶有下劃線。
• 未訪問的連結是藍色的。
• 已訪問的連結是紫色的。
• 懸停連結會使滑鼠指標變為一個小手圖示。
• 獲得焦點的連結周圍有輪廓——你應該可以透過按 Tab 鍵在鍵盤上聚焦此頁面上的連結。
• 活動連結是紅色的。嘗試在點選連結時按住滑鼠按鈕。

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

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

有趣的是，這些預設樣式與 20 世紀 90 年代中期瀏覽器早期時期的樣式幾乎相同。這是因為使用者瞭解並已經習慣了這種行為——如果連結的樣式不同，會使很多人感到困惑。這並不意味著你不應該為連結設定樣式。這只是意味著你不應該偏離預期行為太遠。你至少應該

• 對連結使用下劃線，但不用於其他事物。如果你不想給連結加下劃線，至少以其他方式突出顯示它們。
• 使它們在懸停/聚焦時以某種方式做出反應，並在啟用時以稍微不同的方式做出反應。

預設樣式可以使用以下 CSS 屬性關閉/更改

• color 用於文字顏色。
• cursor 用於滑鼠指標樣式——除非你有很好的理由，否則你不應該關閉它。
• outline 用於文字輪廓。輪廓類似於邊框。唯一的區別是邊框會佔用盒子中的空間，而輪廓不會；它只是位於背景之上。輪廓是一種有用的輔助功能，因此不應在不新增其他指示聚焦連結的方法的情況下將其刪除。

連結樣式

現在我們已經詳細瞭解了預設狀態，讓我們看看一組典型的連結樣式。

首先，我們將編寫空的規則集

a {
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

這個順序很重要，因為連結樣式是相互建立的。例如，第一個規則中的樣式將應用於所有後續規則。當一個連結被啟用時，它通常也處於懸停狀態。如果你把它們放在錯誤的順序，並且你在每個規則集中都更改相同的屬性，事情就不會按你預期的方式工作。為了記住順序，你可以嘗試使用助記符，例如 LoVe Fears HAte。

現在我們新增更多資訊，以便正確設定樣式

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

<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 用於在連結被啟用時為其提供反轉的配色方案，以明確正在發生重要的事情！

自定義連結樣式

對於此任務，我們希望你採用我們空的規則集並新增你自己的宣告，使連結看起來非常酷。發揮你的想象力，盡情發揮。我們相信你可以想出比我們上面的示例更酷、功能更強大的東西。

1. 單擊下面程式碼塊中的**“播放”**以在 MDN Playground 中編輯示例。
2. 為連結提供一些預設樣式，這些樣式將始終應用於它們。你不必只堅持文字顏色，但要確保連結仍然可以識別為連結。
3. 為已訪問連結設定與你設定的預設連結樣式略有不同的顏色。
4. 為連結的聚焦和懸停狀態設定獨特的樣式，使其在其他連結中突出顯示。此外，當連結被聚焦/懸停時，刪除預設下劃線。
5. 再次為活動狀態設定不同的樣式。

如果你犯了錯誤，可以使用 MDN Playground 中的“重置”按鈕清除你的工作。如果你真的卡住了，可以在示例輸出下方檢視示例解決方案。

<p>
  There are several browsers available, such as
  <a href="https://www.mozilla.org/firefox/new/" target="_blank">Mozilla Firefox</a>,
  <a href="https://www.google.co.uk/chrome/" target="_blank">Google Chrome</a>, and
  <a href="https://www.microsoft.com/edge" target="_blank">Microsoft Edge</a>.
</p>

p {
  font-size: 1.2rem;
  font-family: sans-serif;
  line-height: 1.4;
}

a {
}

a:visited {
}

a:focus,
a:hover {
}

a:active {
}

a {
  outline-color: transparent;
  padding: 2px 1px 0;
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:hover,
a:focus {
  background: #bae498;
  text-decoration: none;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

在連結中包含圖示

一種常見的做法是在連結上包含圖示，以提供更多指示，說明連結指向哪種型別的內容。讓我們看一個非常簡單的示例，該示例將圖示新增到外部連結（指向其他站點的連結）。這樣的圖示通常看起來像一個從小方框中指出的箭頭。對於此示例，我們將使用icons8.com 上的外部連結圖示。

讓我們看一些 HTML 和 CSS，它們將給我們想要的效果。首先，一些簡單的 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

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>元素，但前提是它們具有以“http”開頭的href屬性值。

就是這樣。嘗試重新訪問上面的任務部分並嘗試這種新技術！

將連結樣式化為按鈕

你到目前為止本文中探索的工具也可以以其他方式使用。例如，懸停等狀態可以用於設定許多不同元素的樣式，而不僅僅是連結——你可能希望設定段落、列表項或其他事物的懸停狀態。

此外，在某些情況下，連結通常被樣式化為看起來和行為像按鈕。網站導航選單可以標記為一組連結，並且可以將其樣式化為一組控制按鈕或選項卡，為使用者提供訪問網站其他部分的許可權。讓我們探討一下如何實現。

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

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 定義了一個帶有 "container" 類的<nav>元素。<nav> 包含我們的連結。

CSS 包含容器及其包含的連結的樣式。

• 第二個規則說
  • 容器是一個彈性盒子。它包含的專案（在本例中是連結）將是彈性專案。
  • 彈性專案之間的間距將是容器寬度的 0.625%。
• 第三個規則為連結設定樣式
  • 第一個宣告 flex: 1 意味著專案的寬度將被調整，以便它們使用容器中所有可用空間。
  • 接下來，我們關閉預設的text-decoration和outline——我們不希望它們破壞我們的外觀。
  • 最後三個宣告是使每個連結內的文字居中，將line-height設定為 3 以使按鈕具有一定高度（這也具有垂直居中文字的優點），並將文字顏色設定為黑色。

總結

我們希望本文能為你提供所有你需要了解的連結知識——目前為止！我們的“樣式化文字”模組中的最後一篇文章詳細介紹瞭如何在你的網站上使用自定義字型（或眾所周知的網路字型）。

• 上一頁
• 概述：CSS 文字樣式
• 下一頁