在過去,CSS3 標準的開發人員認爲將未單擊的連接、已訪問的連接、有效連接和鼠標所在的連接區分開是明智之舉。在 (X)HTML 中,它們所有具備相同的標記(也就是 <a> 標記),但具備不一樣的瀏覽器狀態。幸運的是,許多設計人員忽略了這些區別,他們經常向通常連接或鼠標所在的連接提供樣式。 web
一項幾乎必要的任務是向通常連接應用一種特定的樣式(進而設置它,不管它是未被單擊的、被訪問的、有效的仍是其餘類型的連接)。清單 2 提供了這樣一個應用程序的一個示例。 瀏覽器
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 的樣式。 字體
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; }