經(jīng)常有朋友問(wèn):如何使有超級(jí)連接的文字不出現(xiàn)下劃線(xiàn),如何使鼠標(biāo)移動(dòng)到超連上產(chǎn)生變色的效果?其實(shí)這些通過(guò)傳統(tǒng)的方法是辦不到的。而使用CSS的控制卻可以非常輕松地作到,而且,頁(yè)面的代碼也不會(huì)臃腫。
★★先看看超連沒(méi)有下劃線(xiàn)的例子:
例子1: 這個(gè)連接可以去頁(yè)面底部,但是沒(méi)有下劃線(xiàn)。
是如何作到這一點(diǎn)的呢?在<head>和</head>之間加上如下的CSS語(yǔ)法控制:
<style type=”text/css”>
<!–
a:link { text-decoration: none}
a:active { text-decoration: none }
a:visited { text-decoration: none }
–>
</style>
這樣瀏覽器在執(zhí)行時(shí),就明白:
a:link 指正常的未被訪(fǎng)問(wèn)過(guò)的鏈接
a:active 指正在點(diǎn)擊的鏈接
a:visited 指已經(jīng)訪(fǎng)問(wèn)過(guò)的鏈接
其中,text-decoration是文字修飾效果的意思,none參數(shù)表示使有超級(jí)鏈接的文字不顯示下劃線(xiàn)。如果講none替換成underline就表示有下劃線(xiàn),換成overline則給超連文字加上劃線(xiàn),換成 line-through給超連文字加上刪除線(xiàn),blink則使文字在閃爍。
★★類(lèi)似的控制:使粗體文字加上刪除線(xiàn)。
例子2: 閃爍的粗體文字 使用的代碼是:B { text-decoration: line-through }
★★類(lèi)似的控制:是粗體文字中所有的字母大寫(xiě)。
使用代碼: B { text-transform: uppercase }
例子3:產(chǎn)生既大寫(xiě),又有顏色,又有刪除線(xiàn)的效果 hello welcome and enjoy them !
以上的代碼是:b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF}
類(lèi)似的,用lowercase使所有字母小寫(xiě)顯示,capitalize 使每個(gè)單詞的首字母大寫(xiě)顯示。
★★下面則是產(chǎn)生連接變色效果的內(nèi)容:
在上面的“例子1”中,如果作一點(diǎn)修飾,可以使具有l(wèi)ink,active,visited屬性的連接顯示不同的顏色,但是卻不會(huì)產(chǎn)生鼠標(biāo)覆蓋變色效果。先看下面的代碼,使連接文字顯示綠色,正在點(diǎn)擊的連接顯示黃色,已經(jīng)反復(fù)問(wèn)過(guò)的連接顯示紅色。算是復(fù)習(xí)前面的內(nèi)容(別忘記啊?。?/P>
<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>
如果要產(chǎn)生變色效果,就要用到另一個(gè)屬性了,這就是 hover,看下面的代碼。
a:hover { text-decoration: none ; color: yellow } 表示鼠標(biāo)移動(dòng)到連接文字上時(shí),文字修飾風(fēng)格為“無(wú)”(即沒(méi)有下劃線(xiàn)),同時(shí)顯示黃色。
a:hover { text-decoration: underline; color: green } 表示鼠標(biāo)移動(dòng)到連接文字上時(shí),文字修飾風(fēng)格為“underline”(即下劃線(xiàn)),同時(shí)顯示綠色。
★★擴(kuò)展一下:如果我們同時(shí)用下面2種屬性,會(huì)產(chǎn)生什么效果呢?
a:link { text-decoration: none ; color: yelloe ; font-size: 9pt }
a:hover { text-decoration: underline; color: green ; font-size: 12pt }
連接文字沒(méi)有下劃線(xiàn),黃色顯示,9pt大小。鼠標(biāo)移動(dòng)到連接上時(shí)出現(xiàn)下劃線(xiàn),顏色為綠色,字符大小12pt。是不是變色了?而且字體由于大小變化,就有動(dòng)感了,似乎一下子擴(kuò)大了。
總之,所有前面講過(guò)的方法,要綜合運(yùn)用才可以呀。
★★注意:并不是所有的瀏覽器都支持所有的選項(xiàng)屬性。自己在多個(gè)瀏覽器上測(cè)試一下。
