CSS的a標簽代表超鏈接,是頁面中最常用的標簽之一。a標簽既可以作為鏈接,也可以用來制作按鈕,但當用戶點擊a標簽時,它的外觀往往會發生變化。這種變化就是a標簽被選中的效果,下面我們來學習如何使用CSS來控制a標簽被選中時的外觀。
a:link{ color:blue; text-decoration:none; } a:hover{ color:red; text-decoration:underline; } a:active{ color:green; }
上面這段CSS代碼中,我們定義了a標簽的三種狀態:link、hover和active。當a標簽處于未被訪問的狀態時(即link狀態),文字顏色為藍色,沒有下劃線。當鼠標懸停在a標簽上時(即hover狀態),文字顏色變成紅色,下劃線出現。當用戶點擊a標簽時(即active狀態),文字顏色變成綠色。
需要注意的是,這三種狀態的樣式定義順序不能改變,因為它們的優先級是按照定義順序來的。也就是說,當一個鏈接被點擊時先觸發的是:active狀態,然后才是:hover和:link狀態。此外,我們還可以給選中的a標簽添加其他樣式,比如背景色、邊框等等,只要在相應的狀態下添加對應的屬性即可。
a:visited{ color:gray; } a:link{ color:blue; text-decoration:none; } a:hover,a:active{ color:red; text-decoration:underline; background-color:yellow; }
在這段代碼中,我們新增了一個:visited狀態的定義,即當a標簽被訪問過時,文字顏色為灰色。同時,我們還在:hover和:active狀態下添加了背景色為黃色的效果。
總之,要想讓頁面上的鏈接看起來更美觀、更易于操作,就需要掌握a標簽的樣式控制技巧,并且要在各種效果中找到最適合自己網站的樣式。
下一篇css a樣式 失效