CSS 連結(jié)
1CSS 連結(jié)的四種狀態(tài):
a:link --普通的、未被訪問的連結(jié)a:visited --使用者已造訪的連結(jié)a:hover --滑鼠指標位於連結(jié)的上方a:active --連結(jié)被點擊的時刻
下面我們就來動手先設(shè)定下這幾個對應(yīng)行為的顏色屬性: 還是跟以前的流程一樣我們先創(chuàng)建一個index.html,然後再建立一個test.css 文件,將其連結(jié)到html 。 以下是html 檔案內(nèi)容:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css test</title> <script src="app.js"></script> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body > <a href="http://ipnx.cn">php</a> </body> </html>
以下是CSS 檔案內(nèi)容:
a:link {color:#FF0000;} /* 未被訪問的鏈接 */ a:visited {color:#00FF00;} /* 已被訪問的鏈接 */ a:hover {color:#FF00FF;} /* 鼠標指針移動到鏈接上 */ a:active {color:#0000FF;} /* 正在被點擊的鏈接 */
我們先來看看效果: 這是未被存取的顏色:
這是滑鼠移到連結(jié)上面的顏色:
這是正在被點擊的顏色:
這是被點擊之後的顏色:
這裡我們要注意的是這四個屬性設(shè)定要遵循的順序問題: a:hover 必須位於a :link 和a:visited 之後a:active 必須位於a:hover 之後
1.2CSS 設(shè)定連結(jié)背景顏色
這個一樣的簡單,修改對應(yīng)的屬性background-color 就好。 我們動手實驗的話,就將剛才的CSS 檔案替換或新增:
a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
大家可以實驗,這裡就不再一一截圖了
1.3 修改連結(jié)下劃線
不是所有的時候我們都需要連結(jié)下面的下劃線,有時很影響美觀。所以這裡我們要在 link 屬性中加入 text-decoration 屬性,將傳指改為空就行,修改過後就是下面的結(jié)果: