連接

在過去，CSS3 標準的開發人員認爲將未單擊的連接、已訪問的連接、有效連接和鼠標所在的連接區分開是明智之舉。在 (X)HTML 中，它們所有具備相同的標記（也就是 <a> 標記），但具備不一樣的瀏覽器狀態。幸運的是，許多設計人員忽略了這些區別，他們經常向通常連接或鼠標所在的連接提供樣式。

一項幾乎必要的任務是向通常連接應用一種特定的樣式（進而設置它，不管它是未被單擊的、被訪問的、有效的仍是其餘類型的連接）。清單 2 提供了這樣一個應用程序的一個示例。

清單 2. 連接修飾的 CSS 示例

a, a:link, a:active, a:visited {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  background-color: #EEEEEE;
}
a:hover {
  text-decoration: underline;
  background-color: #FFFFAA;
}

此標記設置一個通常連接，將字體顏色設置爲黑色，取消默認的下劃線，將字體加粗，以及還將背景顏色設置爲白色。在懸停狀態下，它從新應用下劃線並建立一種黃色的新背景顏色來突出顯示。當在瀏覽器中測試此標記時，您將會注意到在鼠標懸停自連接上時，背景從淺灰色更改成黃色，當鼠標移開時，從黃色變回淺灰色。前面已經看到，還能夠向 a:hover 應用文本陰影。

當開發人員創建 CSS3 的概念時，他們撇開了任何與 <a> 標記相關的特定樣式，將更多精力放在泛型上。所以，本文不會介紹所謂的transform:rotate，舉例而言可將它用於導航中的<li> 標記。相反，結合本文已經介紹的內容，能夠獲得相似於清單 3 的樣式。

清單 3. 使用一些 CSS3 屬性加強的 CSS 導航示例

a, a:link, a:active, a:visited {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  background-color: #EEEEEE;
}
li {
  text-align: center;
  list-style-type: none;
  width: 50px;
  padding: 10px;
  margin: 10px;
  background-color:#EEEEEE;
  border: 1px solid #000000;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -moz-transform:rotate(-20deg);
  -webkit-transform:rotate(-20deg);
  transform:rotate(-20deg);
}
li:hover {
  text-decoration: underline;
  background-color: #FFFFAA;
}