連結的狀態

• link 沒有訪問過的
• visited 訪問過的
• hover 使用者滑鼠剛好停留在這個連結上時
• focus 通過TAB鍵或者程式設計方法將一個連結選中時
• active 連結被啟用時

預設的連結樣式

• 連結具有下劃線
• link狀態是藍色的
• visited狀態是紫色的
• hover狀態時游標變成一個小手
• active狀態是紅色的
• focus狀態，用tab鍵選中連結時，連結周圍有一個輪廓

將樣式應用到連結

　　最好根據 link visited focus hover active 的順序編寫連結樣式。 　　可以用 LoVeFearsHAte 的順序幫助記憶 link樣式 color visited樣式 color focus樣式 border background outline outline是繪製元素周圍的一條線，位於邊框的外圍，不會佔據元素空間，起到突出元素的作用，可以不是矩形。簡寫：color style width。 hover樣式 border background active樣式 color background 示例：

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

p {
  line-height
 
: 1.4;
}

a {
  outline: none;  /*取消focus狀態的外圍線*/
  text-decoration: none; /*取消下劃線*/
  padding: 2px 1px 0;  /*增加內邊距，上2px,左右1px, 下0px*/
}

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;
}

在連結中包含圖示

若要實現這樣的效果，即外部連結旁邊有一個帶箭頭的小圖示。外部連結是不屬於本站的連結，通常帶有"http"開頭。 那麼可以根據以下樣式編碼：

a {
  padding: 2px 1px 0;
}
a:link {}
a:visited {}
a:focus, a:hover {}
a:active {}
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;  /*設定右側內邊距，為背景圖片留出空間，不與文字重疊*/
}

屬性選擇器：a[href*="http"] 即，選中<a>元素，但是隻選中擁有href屬性，且屬性的值包含 "http" 的<a>的元素。

樣式化連結為按鈕

示例： 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%;  /*設定列表寬度是外部容器（body）的100%*/
}

li {
  display: inline;  /*將列表項設為內聯元素，就不會換行*/
}

a {
  outline: none; /*取消focus的外圍線*/
  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; 
  /*
  利用last-child選擇器選擇父元素中最後一個子元素，並且設定右側外邊距為0，
  但是在edge瀏覽器中彷佛不能實現。
  */
}

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

a:hover {     
  background: orange;
}

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