連接

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

一項幾乎必要的任務是向通常連接應用一種特定的樣式(進而設置它,不管它是未被單擊的、被訪問的、有效的仍是其餘類型的連接)。清單 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;
}
相關文章
相關標籤/搜索