设计之家 > 教程 > 網頁教程 > CSS教程 >

CSS產生的特殊效果

作者:佚名 來源:本站原創 時間:2006-03-14


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

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

例子1: 這個連接可以去頁面底部,但是沒有下劃線。

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

<style type="text/css">
<!--
a:link { text-decoration: none}
a:active { text-decoration: none }
a:visited { text-decoration: none }
-->
</style>

這樣瀏覽器在執行時,就明白:

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屬性的連接顯示不同的顏色,但是卻不會產生鼠標覆蓋變色效果。先看下面的代碼,使連接文字顯示綠色,正在點擊的連接顯示黃色,已經反復問過的連接顯示紅色。算是復習前面的內容(別忘記啊!):

<style type="text/css">
<!--
a:link { text-decoration: none ; color: green }
a:active { text-decoration: none ; color: yellow }
a:visited { text-decoration: none ; color: red }
-->
</style>

如果要產生變色效果,就要用到另一個屬性了,這就是 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。是不是變色了?而且字體由于大小變化,就有動感了,似乎一下子擴大了。

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

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

标签:CSS

推薦設計

最新文章