Html 基本說明（08）-如何改變連結的風格－雲橙雨林

當在設計網頁的時候，橙子經常都要設定連結，而連結的位置和風格並非都是一樣的，有時要多種改變，就必須做點設定，像是平常未點連結時是一個顏色，當滑鼠滑過後，是另外個顏色，當連結過後，連結又是另一個顏色...等，在以前的網頁設計中，無法很容易改變其性質，現在可以利用虛擬類別選擇器來設定！

橙子先寫個html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>
<body>
<p><a href="http://goliimage.pixnet.net/blog">魚與橙的結合</a></p>
</body>
</html>

執行結果：

2012-07-23_180123

結果可得以上畫面，各位可看到"魚與橙的結合"的字樣變成藍色的，我們將滑鼠移到連結上，不按任何鍵，發現沒有任何變化，再當我們在連結上，點住滑鼠右鍵不放，可發現以下結果

2012-07-23_180412

連結的地方變成了紅色的字了，在放開後完成了連結，就連結到別得位置，橙子再將回到原連結畫面，可發現當下的連結字樣變成了紫色了。

2012-07-23_180606

現在橙子就開始說明了，裡面包含了4個動作，

1、原連結（滑鼠不在連結上）- a:link。

2、滑鼠滑過（滑鼠在連結上）- a:hover。

3、滑鼠點下（滑鼠在連結上）- a:active。

4、連結已點過（表示連結已參訪過）- a:visited。

就以上4個動作，咋使用呢？就以下程式來說明，橙子先來想一個風格

1、連結的字為白字粗體

2、連結剛開始是背景是灰色

3、滑鼠滑過後，背景為黑色

4、滑鼠點下連結，背景為紅色

5、連結連過後，連結變成藍色的

我將以上的程式一次寫完，再來說明

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚和橙的結合</title>
<style type="text/css">
a:link {
    color: white;
    background-color: gray;
}
a:hover {
    background-color: black;
}
a:active {
    background-color: red;
}
a:visited {
    background-color: blue;
}
</style>
</head>
<body>
<p><a href="http://goliimage.pixnet.net/blog">魚與橙的結合</a></p>
</body>
</html>

CSS部份

<style type="text/css">
a:link {
    color: white;
    background-color: gray;
}
a:hover {
    background-color: black;
}
a:active {
    background-color: red;
}
a:visited {
    background-color: blue;
}
</style>