CSS 連結

1CSS 連結的四種狀態：

a:link --普通的、未被訪問的連結a:visited --使用者已造訪的連結a:hover --滑鼠指標位於連結的上方a:active --連結被點擊的時刻

下面我們就來動手先設定下這幾個對應行為的顏色屬性：還是跟以前的流程一樣我們先創建一個index.html，然後再建立一個test.css 文件，將其連結到html 。以下是html 檔案內容：

<!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="//m.sbmmt.com">php</a>
</body>
</html>

以下是CSS 檔案內容：

a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */

我們先來看看效果：這是未被存取的顏色：

QQ截图20161208104329.png

這是滑鼠移到連結上面的顏色：

QQ截图20161208104336.png

這是正在被點擊的顏色：

QQ截图20161208104343.png

這是被點擊之後的顏色：

QQ截图20161208104348.png

這裡我們要注意的是這四個屬性設定要遵循的順序問題： a:hover 必須位於a :link 和a:visited 之後a:active 必須位於a:hover 之後

1.2CSS 設定連結背景顏色

這個一樣的簡單，修改對應的屬性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 修改連結下劃線

不是所有的時候我們都需要連結下面的下劃線，有時很影響美觀。所以這裡我們要在 link 屬性中加入 text-decoration 屬性，將傳指改為空就行，修改過後就是下面的結果：

QQ截图20161208104515.png

繼續學習

新建檔案

<!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="//m.sbmmt.com">php</a> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear