CSS a 連結樣式效果設計

CSS a 連結樣式效果設計可以提供網頁內的連結(a href)在被使用時的效果,例如滑鼠移到某一條連結上,讓連結產生不同的顏色,或是標注網友已經看過的連結為不同顏色,這些都可以利用 CSS 提供的 a 連結樣式設計功能來處理,讓原本一成不變的連結有了更多的變化,CSS 的 a 連結樣式設計概念是這樣的,首先要先設定好連結發生的動作,例如滑鼠移上去、被點選、點選中或是已經看過,這幾項設計好之後,就可以給各種動作不同的顯示樣式,例如要顯示為不同的顏色、字型、粗細 ... 等,這些效果我們在範例中呈現,先來看看如何設定連結的動作,語法如下。

設定 CSS a 連結動作判斷
a:link {
 //設定還沒瀏覽過的連結樣式
}
a:visited {
 //設定已經瀏覽過的連結樣式
}
a:hover {
 //設定滑鼠移到連結上的樣式
}
a:active {
 //設定正在被點選的連結樣式
}
CSS 的 a 連結樣式動作判斷允許網頁設計師使用以上四種不同的動作判斷,幾乎涵蓋了所有連結可能會發生的動作,至於樣式的部份常用的設定有顏色(color)、字型(font-family)、大小(font-size)、文字特效(text-decoration)... 等,我們現在套用到範例中看效果。

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 連結樣式設計範例,你也可以透過修改各種屬性來調整出不同的效果,這幾個屬性可以參考看看。
更多網頁連結設計
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 2012~2016 Englsih version聯絡我們
PHP Smarty MySQL JQuery Apache W3C