CSS產生的特殊效果

作者：佚名　來源：本站原創　時間：2006-03-14　標簽： CSS

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

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

是如何作到這一點的呢？在<head>和</head>之間加上如下的CSS語法控制：

這樣瀏覽器在執行時，就明白：

a:link 指正常的未被訪問過的鏈接
a:active 指正在點擊的鏈接
a:visited 指已經訪問過的鏈接
其中，text-decoration是文字修飾效果的意思，none參數表示使有超級鏈接的文字不顯示下劃線。如果講none替換成underline就表示有下劃線，換成overline則給超連文字加上劃線，換成 line-through給超連文字加上刪除線，blink則使文字在閃爍。

★★類似的控制：使粗體文字加上刪除線。

例子2： 閃爍的粗體文字 使用的代碼是：B { text-decoration: line-through }

★★類似的控制：是粗體文字中所有的字母大寫。

使用代碼： B { text-transform: uppercase }

例子3：產生既大寫，又有顏色，又有刪除線的效果 hello welcome and enjoy them !

以上的代碼是：b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF}

類似的，用lowercase使所有字母小寫顯示，capitalize 使每個單詞的首字母大寫顯示。

★★下面則是產生連接變色效果的內容：

在上面的“例子1”中，如果作一點修飾，可以使具有link,active,visited屬性的連接顯示不同的顏色，但是卻不會產生鼠標覆蓋變色效果。先看下面的代碼，使連接文字顯示綠色，正在點擊的連接顯示黃色，已經反復問過的連接顯示紅色。算是復習前面的內容（別忘記啊！）：

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

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

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