4.2 下劃線、刪除線和頂劃線text-decoration

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 4.2 下劃線、刪除線和頂劃線text-decoration

編輯：CSS基礎知識

一、text-decoration屬性

在CSS中，使用text-decoration屬性來定義段落文本的下劃線、刪除線和頂劃線。

語法：

text-decoration:屬性值;

說明：

text-decoration屬性取值如下表：

表1 text-decoration屬性屬性值說明 none 默認值，可以用這個屬性值也可以去掉已經有下劃線或刪除線或頂劃線的樣式 underline 下劃線 line-through 刪除線 overline 頂劃線

舉例：

在線測試

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>text-decoration屬性</title>
    <style type="text/css">
        #p1{text-decoration:underline;}
        #p2{text-decoration:line-through;}
        #p3{text-decoration:overline;}
    </style>
</head>
<body>
    <p id="p1">這是“下劃線”效果</p>
    <p id="p2">這是“刪除線”效果</p>
    <p id="p3">這是“頂劃線”效果</p>
</body>
</html>

在浏覽器預覽效果如下：

我們在HTML入門教程中學習了刪除線用<s>標簽、下劃線用<u>標簽，現在我們學習了text-decoration屬性之後，這些效果都應該用CSS控制。

記住，前端開發中，對於樣式一般用CSS來控制，不建議使用標簽來控制。也就是說，我們應該摒棄純樣式標簽，如<s>、<u>等。

我們知道a標簽默認的樣式具有下劃線，例如“<a href="http://www.lvyestudy.com"> 學習網</a>”在浏覽器預覽效果如下：

那如何去除a標簽默認樣式中的下劃線呢？“text-decoration:none”這個屬性值就可以派上用場了。

舉例：

在線測試

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>text-decoration屬性</title>
    <style type="text/css">
        a{text-decoration:none;}
    </style>
</head>
<body>
    <a href="http://www.lvyestudy.com"> 學習網</a>
</body>
</html>

在浏覽器預覽效果如下：

“text-decoration:none”這個屬性值99%都是用於去除a標簽的默認樣式，絕大部分網站的超鏈接極少采用默認樣式，往往都是去掉下劃線的，因為a標簽的默認樣式實在是丑！大家要學會這個技巧，因為在實際編程中，你有非常多的機會用到它。