設定 CSS a 連結動作判斷
a:link {
//設定還沒瀏覽過的連結樣式
}
a:visited {
//設定已經瀏覽過的連結樣式
}
a:hover {
//設定滑鼠移到連結上的樣式
}
a:active {
//設定正在被點選的連結樣式
}
CSS 的 a 連結樣式動作判斷允許網頁設計師使用以上四種不同的動作判斷，幾乎涵蓋了所有連結可能會發生的動作，至於樣式的部份常用的設定有顏色（color）、字型（font-family）、大小（font-size）、文字特效（text-decoration）... 等，我們現在套用到範例中看效果。//設定還沒瀏覽過的連結樣式
}
a:visited {
//設定已經瀏覽過的連結樣式
}
a:hover {
//設定滑鼠移到連結上的樣式
}
a:active {
//設定正在被點選的連結樣式
}
CSS a 連結樣式效果設計範例
<style type="text/css">
a:link{
//設定還沒有瀏覽過的連結
text-decoration:none;
background-color:#ffffff;
}
a:visited {
//設定已經瀏覽過的連結
color:#ffffff;
background-color:red;
}
a:hover {
//設定滑鼠移經的連結
text-decoration:underline;
background-color:#fafafa;
color:gray;
}
a:active {
//設定正在點選的連結
text-decoration:none;
background-color:gray;
color:#fafafa;
}
</style>
<a href="http://www.wibibi.com">Wibibi 網頁設計教學百科</a>
範例的呈現效果我們在範例中分別將 CSS a 連結的各種動作套用不同的樣式效果，還沒有瀏覽過的連結是白色的背景色，不會出現底線，已經瀏覽過的連結是紅色背景色，文字為白色，滑鼠移經連結會變成淺灰色的背景以及深灰色的文字，點選會變成深灰色的背景以及淺灰色的文字，這就是簡單的 CSS a 連結樣式設計範例，你也可以透過修改各種屬性來調整出不同的效果，這幾個屬性可以參考看看。a:link{
//設定還沒有瀏覽過的連結
text-decoration:none;
background-color:#ffffff;
}
a:visited {
//設定已經瀏覽過的連結
color:#ffffff;
background-color:red;
}
a:hover {
//設定滑鼠移經的連結
text-decoration:underline;
background-color:#fafafa;
color:gray;
}
a:active {
//設定正在點選的連結
text-decoration:none;
background-color:gray;
color:#fafafa;
}
</style>
<a href="http://www.wibibi.com">Wibibi 網頁設計教學百科</a>
更多網頁連結設計