CSS產生的特殊效果

css     經常有朋友問：如何使有超級串連的文字不出現底線，如何使滑鼠移動到超連上產生變色的效果？其實這些通過傳統的方法是辦不到的。而使用CSS的控制卻可以非常輕鬆地作到，而且，頁面的代碼也不會臃腫。

    ★★先看看超連沒有底線的例子：

    例子1： 這個串連可以去頁面底部，但是沒有底線。

    是如何作到這一點的呢？在和之間加上如下的CSS文法控制：

    如果要產生變色效果，就要用到另一個屬性了,這就是 hover，看下面的代碼。

a:hover { text-decoration: none ; color: yellow } 表示滑鼠移動到串連文字上時，文字修飾風格為“無”（即沒有底線），同時顯示黃色。

a:hover { text-decoration: underline; color: green } 表示滑鼠移動到串連文字上時，文字修飾風格為“underline”（即底線），同時顯示綠色。

    ★★擴充一下：如果我們同時用下面2種屬性，會產生什麼效果呢？

a:link { text-decoration: none ; color: yelloe ; font-size: 9pt }

a:hover { text-decoration: underline; color: green ; font-size: 12pt }

    串連文字沒有底線，黃色顯示，9pt大小。滑鼠移動到串連上時出現底線，顏色為綠色，字元大小12pt。是不是變色了？而且字型由於大小變化，就有動感了，似乎一下子擴大了。

    總之，所有前面講過的方法，要綜合運用才可以呀。

    ★★注意：並不是所有的瀏覽器都支援所有的選項屬性。自己在多個瀏覽器上測試一下。