在HTML標籤中的文字中加入修飾線
- angryTom轉載
- 2019-11-28 17:26:292481瀏覽
text-decoration屬性介紹
#text-decoration屬性是用來設定文本修飾線呢，text-decoration屬性一共有4個值。
text-decoration屬性值說明表
（建議學習：HTML影片教學）
| #值 | 作用 |
|---|---|
| #none | 去掉文字修飾線 |
| underline | 設定底線 |
| overline | #設定上劃線 |
| ##overline |
line-through
設定刪除線
#HTML標籤自帶修飾線在開始在實踐text-decoration屬性之前，筆者先給大家普及下HTML中的標籤自帶修飾線如：u標籤、s標籤，若有不全大家可以在下面評論中告訴筆者,畢竟筆者也是前端的一個小白,希望和大家互相交流，互幫互助，共同進步。
u標籤
下面讓我們進入
標籤的實踐，u標籤自帶的是文字下劃線。 <pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置文本修饰线</title>
</head>
<body>
<u>成功不是击败别人，而是改变自己</u>
</body>
</html></pre>結果圖
u標籤也可以搭配HTML
中的其他標籤使用，範例：將u標籤嵌套到h1標籤中使用。
<h1><u>成功不是击败别人，而是改变自己</u></h1>
s標籤
下面讓我們進入
標籤的實踐，s標籤自帶的是文字刪除線。 <pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置文本修饰线</title>
</head>
<body>
<s>成功不是击败别人，而是改变自己</s>
</body>
</html></pre>結果圖
注意：
s標籤也可以嵌套，和u標籤一致，筆者就不過多的介紹了。 none去除修飾線
text-decoration
屬性的none
值實踐，實踐內容如：筆者將HTML
頁中的
標籤自帶的刪除線給移除掉。 程式碼區塊<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置文本修饰线</title>
<style>
s{
text-decoration: none;
}
</style>
</head>
<body>
<s>成功不是击败别人，而是改变自己</s>
</body>
</html></pre>結果圖
#注意：u
標籤、s標籤、包含text-decoration屬性值的所有的修飾線都可以去掉哦。 underline設定下劃線
text-decoration
屬性的underline
值實踐，實踐內容如：筆者將HTML
頁面中的
標籤中的文字設定一個底線。 程式碼區塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置文本修饰线</title>
<style>
h2{
text-decoration: underline;
}
</style>
</head>
<body>
<h2>成功不是击败别人，而是改变自己</h2>
</body>
</html>
結果圖#overline設定上劃線
text-decoration
屬性的overline
值實踐，實踐內容如：筆者將HTML
頁面中的
標籤中的文本設定一個上劃線。 程式碼區塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置文本修饰线</title>
<style>
h2{
text-decoration: overline;
}
</style>
</head>
<body>
<h2>成功不是击败别人，而是改变自己</h2>
</body>
</html>
結果圖#line-through設定刪除線
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置文本修饰线</title>
<style>
h2{
text-decoration: line-through;
}
</style>
</head>
<body>
<h2>成功不是击败别人，而是改变自己</h2>
</body>
</html>###結果圖################本文來自PHP中文網，###html教學###欄目，歡迎學習###以上是在HTML標籤中的文字中加入修飾線的詳細內容。更多資訊請關注PHP中文網其他相關文章！