木笛雅設

嫌網頁藍色的超連結很醜嗎
透過CSS的樣式表可以更改各種連結效果
而且一個網頁裡還能套用各種不一樣的連結樣式呢

很久以前就在用DW的CSS編輯器為網頁訂制連結效果
但那時只懂得編一套連結樣式讓每個網頁共同使用
其實CSS強大的地方不止於此
可以在同一個網頁裡表現一種以上的連結樣式
滑鼠的連結狀態有四種
link:就是一般的連結狀態
hover:當滑鼠移到連結上時的狀態
active:當滑鼠按下時的連結狀態
visited:當連結按過時的狀態

最簡單的連結樣式作法
就是在＜head＞＜/head＞之間插入以下語法
<style type="text/css">
a:link {
font-size: 12px;
color: #FF9966;
text-decoration: none;
}
a:visited {
font-size: 12px;
color: #FF9966;
text-decoration: none;
}
a:hover {
font-size: 12px;
color: #FF9966;
text-decoration: underline;
}
</style>
但這種方法會作用於所有網頁中的連結
你就無法替不同的連結制定不同的樣式了

下面就介紹另一種方法
在相同網頁製作不同類型的連結
.linkstyle - 先定義單純的文字樣式表
.linkstyle a - 表示當文字成為連結時的樣式
.linkstyle a:visited - 表示已經拜訪過的連結樣式
.linkstyle a:hover - 表示這個連結滑鼠移過時的樣式
.linkstyle a:active - 表示作用中的連結樣式
所以透過這種方法你可以設定很多種連結樣式
在一個網頁套用不同性質的連結

各位可參考範列網頁:CSS語法應用-連結樣式

無底線連結

.linkstyle-1 {
font-size: 12px;
color: #FF9966;
}
.linkstyle-1 a{
font-size: 12px;
color: #FF9966;
text-decoration: none;
}
.linkstyle-1 a:hover{
font-size: 12px;
color: #FF9966;
text-decoration: underline;
}
這大概是最常用的一種樣式
至少木笛很常用啦
因為我很不喜歡連結底線
雖然有提示的作用但連結一多
會使得畫面出現密密麻麻的線
所以平時無底線當滑鼠移過時才出現底線提示

背景變色連結

.linkstyle-2 {
font-size: 12px;
color: #9B9BDD;
}
.linkstyle-2 a{
font-size: 12px;
color: #9B9BDD;
text-decoration: underline;
}
.linkstyle-2 a:hover{
font-size: 12px;
color: #9B9BDD;
text-decoration: underline;
background-color: #4A4A71;
}
有些人會用背景變色的效果
因為他的視覺效果會比較明顯

虛線連結

.linkstyle-3 {
font-size: 12px;
color: #CCFF66;
}
.linkstyle-3 a{
font-size: 12px;
color: #CCFF66;
text-decoration: none;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #CCFF66;
}
.linkstyle-3 a:hover{
font-size: 12px;
color: #CCFF66;
text-decoration: none;
border-bottom-style: none;
}
虛線連結慢慢開始普遍
主要還是大家對實線連結已經厭倦
而且這種虛線連結只有用CSS能做出來
不然就得用影像處理軟體做圖案連結了
不過虛線連結不適合用來做導覽連結
比較適合用在像是清單項目類的次要連結

Q.為什麼我設定了visited和hover的樣式，但是怎麼都不會出現滑鼠移過的效果?
會發生這個問題是因為visited樣式表在hover樣式表的後面，只要把hover樣式表的程式碼移到visited後面就解決這個問題了。

Q.四種樣式有一定都要設定嗎?顏色該如何選擇呢?
不需要，但link和hover是必要的。visited看個人喜好，active幾乎沒在用了。一般都是根據網站的色調來決定，hover建議根據link的顏色做深淺的變化或是互補色的變化。而visited則用異於link的深色調。
我是很少在設定visited，因為拜訪過的連結變色會讓版面色調太複雜，而且一般非入口型網站的連結都不多，使用者容易知道什麼連結拜訪過，所有用visited提示並沒有幫助。另一種情況是使用者會在各網頁間反覆瀏覽的話，也不需要設visited。但如果是入口型網站或是網站提供各種不同類型的內容，使用visited連結是比較恰當的。