在網頁設計中我們經常使用CSS控制超級連結樣式。但是我們必須注意標籤的先後順序，否則可能達不到預期的效果。
筆者在製作網頁的時候曾按下列順序排列這幾個標籤：
a:link{font-size:18px;color:#0000FF;text-decoration:underline}
a:hover{font-size:18px;color:#0000FF;text-decoration:none;font-style:italic}
a:visited{font-size:18px;color:#0000FF;text-decoration:none}
第一次用瀏覽器開啟時一切正常，滑鼠未放上去時為藍色，放上滑鼠時為綠色斜體，單擊連結到目的地址再返回該頁時，連結變為紅色(同visited中所
設)，再次放上滑鼠時，文本仍然保持visited樣式，hover樣式卻失效。筆者百思不得其解，經反覆實驗發現問題出在三列標籤的順序上，只要把
visited放在hover前面，就一切正常了。
同樣道理，active和link的位置也會對最終效果產生影響。
通過反覆實驗，筆者總結了一條經驗：只要保證visited在前，hover在後，active在兩者中間，link位置任意，都能夠保證四種樣式互不影響，正常顯示。
再談超級連結技巧
在預設的情況下，滑鼠是一個向左上方翹起的箭頭，下載頁面時是一個沙漏的形狀而當滑鼠移動到超級連結上時則是一個手的形狀，在許多Windows的應用程式中滑鼠的樣子可以說是千變萬化，新鮮而有趣，我們的網頁中一樣也做到了這一點。先看一個例子：
現在許多網站上都有“協助”這樣一個連結，目的是讓瀏覽者更好的瀏覽網站，當我們讓瀏覽者把滑鼠移動到協助連結的時候，滑鼠指標就會變成表示協助的左上方箭頭加上一個問號的形狀，下面是代碼：
<a style="cursor:help" href=help.htm>協助</a>
結構如下：<target style= "attribute1:value1;attribute2:value2;…">
在這裡屬性是cursor（游標），屬性值是help。藉助不同的屬性值游標還會有很多的形狀：當屬性值為text的時候，滑鼠會變成一個“I”形；
當屬性值為move的時候是一個帶四方箭頭的十字形；屬性值為hand時是一個手形；屬性值為crosshair表示十字形；屬性值為e－resize表
示向右箭頭；屬性值為ne－resize則表示向右上方箭頭；屬性值為nw－resize表示向左上方箭頭；屬性值為n－resize表示向上方箭頭；屬
性值為se－resize表示向右下方箭頭；屬性值為Wait表示沙漏。
Web頁預設的連結方式（未訪問過的連結是藍色文字帶藍色的底線，訪問過的超級連結變為深紫色的文字帶深紫色的底線）千篇一律，並且很有可能與你的背景色不搭配。下面介紹一下超級連結標籤<a>在CSS方面的一些比較常見的應用，代碼如下：
在HTML檔案的<head>……</head>之間加入
<style type=“text/css”>
<!--
A:link {text－decoration: none; color:blue}
A:visited {color:red; text－decoration:line－through}
A:active {color:white; text－decoration:underline}
A:hover {text－decoration:none;color:yellow;background－color:black}
-->
</style>
這裡 說明是內嵌式的網頁樣式表單，它一般在<HEAD>……</HEAD>中申明，它只對本網頁起作用，同時如果你已經使用了外部樣式表單，那麼它將被內嵌式的網頁樣式表單屏蔽。
A:link {text－decoration: none; color:blue}是說明了超級連結還沒有被訪問，它沒有底線，顏色為藍色。
A:visited {color:red; text－decoration:line－through}說明了超級連結被訪問後，它的顏色變成了紅色，有了一根刪除線。
A:active {color:white; text－decoration:underline}說明超級連結處於活動狀態的時候，它的顏色變成了白色，有了底線。
A:hover {text－decoration:none;color:#FF0000;background－color:black}說明滑鼠移動到超級連結後，它沒有底線，文字顏色變成了黃色，背景顏色是黑色。
採取以上的辦法你就可以隨心所欲控制你的連結了，而你的首頁是不是也有了自己的風格呢？
轉載自：http://hi.baidu.com/h007ming/blog/item/c37568b7a70683fe30add1c3.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
