下面我們做一個這樣的連結：未被點擊時超連結顯示文字無底線，顯示為藍色；當滑鼠在連結上時有底線，連結文字顯示為紅色；當點選連結後，連結無底線，顯示為綠色。
實現方法很簡單，在原始碼的<head>和<head>之間加上如下的CSS文法控制：
<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
-－>
</style>
其中：
a:link 指正常的未被訪問過的連結；
a:active 指正在點的連結；
a:hover 指滑鼠在連結上；
a:visited 指已經訪問過的連結；
text-decoration是文字修飾效果的意思；
none參數表示超連結顯示文字不顯示底線；
underline參數表示超連結的文字有底線
<style>
A:visited{TEXT-DECORATION:none;COLOR:#009999}
A:link{text-decoration:none}
A:hover{TEXT-DECORATION:COLOR:#FF0000;FONT-WEIGHT:bold;FONT-STYLE:italic}
A.1:link{text-decoration:none}
A.1:visited{TEXT-DECORATION:none;COLOR:#000000}
A.1:hover{TEXT-DECORATION:none;COLOR:#FFffff;FONT-WEIGHT:bold;FONT-STYLE:italic}
//上面這句TEXT-DECORATION:沒有賦值
</style>
<a class="1" href=".....">adfadfas</a>
class引用自訂類時，要直接用類名，就是.後面的部分，儘管我不知道用純數字直接去定義會不會有bug，不過，用含有字母的字串去定義應該是個好的習慣。
定義的順序是link,visited,active,hover,為了頁面的美觀，一般只用link和hover就可以了
在訪問一個頁面的時候，我們會發現，當滑鼠移動到具有超級串連的文字上的時候，有的會產生相應的底線。然而有些網頁卻沒有。首頁超連結的底線是如何去掉的呢。
我們在<HEAD>...</HEAD>之間插入下面的代碼。
<style>B {font-weight: 700; }
P {padding: 5px 0px;
margin: 0px;
font-family: 宋體,黑體,宋體;
}
A {text-decoration: none}
TD { font-family: 宋體,黑體,宋體; }
</style>
<script language="javascript">
var contents = true;
</script>
更簡單的方法是：
<style>
<!--
a {text-decoration:none}
a:hover {color: red;text-decoration:none}
--!>
</style>
下面我們在看一看效果，試著將滑鼠移動到下面的超級連結上去，是不是超級連結不會產生底線了。
3、有些網頁的連結，原先沒有底線，你把滑鼠指向連結處，才會出現底線，滑鼠移掉底線就又沒有了。如何?這種效果呢。
可用層疊樣式表（CSS）來實現的，在Dreamweaver3中編輯層疊樣式表不用編寫代碼，具體操作方法如下：
1）在快速啟動欄中點擊層疊樣式表按鈕（就是把滑鼠放上去顯示“show css styles”的那個按鈕），在彈出的CSS Styles面板上雙擊（none）；
2）此時，可看到彈出的Edit Style Sheet 面板，在該面板上按New按鈕；
3）再在彈出的New Style 面板上點取Redefine HTML Tag（重新定義HTML標記）再在Tag中選擇“a”（超級連結標記）標記後按OK按鈕；
4）這時可看到彈出的Style dehinition for a 的對話方塊，在此對話方塊中可以設定超級連結的許多屬性，你可以按你的意願設定，但我們這裡主要是要去掉那討厭的底線，所以我們在decoration 屬性中選擇“none”，這樣就把底線去掉了；然後我們再選擇顏色為：#339966。按ＯＫ按鈕返回到Edit Style Sheet 面板；
5）在Edit Style Sheet 面板上再按New按鈕；
6）在彈出的New Style 面板上點取Use CSS Selector ，再在該面板上的selector選擇框中選擇“a:hover”（定義當滑鼠在超級連結上時連結的屬性），按ＯＫ按鈕；
7）在彈出的Style dehinition for a:hover 的對話方塊中，我們在decoration 屬性中選擇“underline”，這樣就把底線又加上了；然後我們再選擇顏色為：#FF3300。按ＯＫ按鈕返回到Edit Style Sheet 面板；
8）在Edit Style Sheet 面板上再按Don按鈕，至此所有設定結束，你在Dreamweaver3的原始碼檢視窗中將看到在<head>與</head>之間如下所示的代碼：
<style type="text/css">
<!--
a { color: #339966; text-decoration: none}
a:hover { color: #FF3300; text-decoration: underline}
-->
</style>
有了這段代碼，你在該網頁上的所有文字連結在瀏覽器中顯示時沒有底線，當你把滑鼠指向連結處，才會出現底線，滑鼠移掉底線就又沒有了。若你想在 其它網頁中也具有這種效果，你可以用上述方法設定或更簡單點，直接把這段代碼複製，粘貼到<head>與</head>之間即 可。注意：若不是在a 中定義除去底線而是在a: link中定義除去底線，在實際使用時不能除去底線，我是在IE4.0環境下測試的。
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
