如何去掉超連結下劃線用三個簡單的執行個體來說明

2023-03-05 07:55:15

去掉超連結的下劃線，需要用樣式表CSS來控制，如果你暫時不想深入了解CSS的概念，下面将舉三個簡單的執行個體來說明如何控制超連結的下劃線。用記事本打開網頁源代碼(也可以先用IE打開網頁，然後點選IE菜單欄的"檢視→源檔案")，然後彈出記事本視窗。

找到<head>和</head>這兩句，樣式表語句就加在它們中間。如下：

　　代碼如下:

　　<html>

<head>

</head><body>

一、僅僅在head與head中間加入<style>a{ TEXT-DECORATION:none }</style>

這一句就去掉超連結下劃線了，這是個最簡單的例子，你試着這樣做就會成功的。

二、上面的例子隻是告訴你如何一次性去掉超連結下劃線，如果你的網頁當中有的超連結需要下劃線，有的不需要，該怎麼辦呢？首

先你要構思好，你的網頁中的超連結大部分是有下劃線的，還是沒下劃線的？

如果大部分超連結不要下劃線，就可以加入

<a href=****><u>文字</a>。

·如果大部分超連結都要下劃線，就可以不要加入前面提到的這句。把它改為：<style>.n{ TEXT-DECORATION:none }</style>，

注意：n前面有個點，它表示類選擇符，然後在網頁的超連結當中可以多次引用，就可單獨去掉個别超連結了，例如：

　　代碼如下:

三、如何讓超連結去掉下劃線，滑鼠停留在上面時有下劃線？

可以在head與head之間加上這樣一句：<style>a{ TEXT-DECORATION:none}a:hover{TEXT-DECORATION:underline }</style>

說明：a表示超連結，a:hover在樣式表裡屬于僞類，表示滑鼠懸停時候的狀态。

确定你的網頁大部分超連結需要哪種效果。再舉個執行個體說明一下：

　　代碼如下:

　　<style>a{ TEXT-DECORATION:none }a.xh{ TEXT-DECORATION:none }

a:hover.xh{ TEXT-DECORATION:underline }</style>，它等價于<style>

a,a.xh{ TEXT-DECORATION:none }a:hover.xh{ TEXT-DECORATION:underline }</style>

加入這句之後，網頁内的超連結都沒有下劃線。

由上可以看出，我們又用了一次CSS僞類，它的定義格式是：選擇符.類選擇符{ 屬性;屬性值 }，例如前面提到的

a.xh{ TEXT-DECORATION:none }。

繼續閱讀