如何給HTML標籤中的文本設置修飾線

時間 2019-11-17

標籤如何 html 標籤文本設置修飾欄目 HTML 简体版

原文原文鏈接

text-decoration屬性介紹

text-decoration屬性是用來設置文本修飾線呢，text-decoration屬性一共有4個值。

text-decoration屬性值說明表

值	做用
none	去掉文本修飾線
underline	設置下劃線
overline	設置上劃線
line-through	設置刪除線

HTML標籤自帶修飾線

在開始實踐text-decoration屬性以前，筆者先給你們普及下HTML中的標籤自帶修飾線如：u標籤、s標籤，如有不全你們能夠在下面評論中告訴筆者,畢竟筆者也是前端的一個小白,但願和你們相互交流，互幫互助，共同進步。

u標籤

下面讓咱們進入u標籤的實踐，u標籤自帶的是文本下劃線。
代碼塊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>
  
</head>
<body>
    <u>成功不是擊敗別人，而是改變本身</u>
</body>
</html>

結果圖前端

注意：u標籤也能夠配合HTML中的其餘標籤使用，舉例：將u標籤嵌套到h1標籤中使用。ui
代碼塊code

<h1><u>成功不是擊敗別人，而是改變本身</u></h1>

s標籤

下面讓咱們進入s標籤的實踐，s標籤自帶的是文本刪除線。
代碼塊htm

<!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>

結果圖blog

注意：s標籤也能夠嵌套，和u標籤一致，筆者就不過多的介紹了。it

none屬性值

讓咱們進入text-decoration屬性的none值實踐，實踐內容如：筆者將HTML頁面中的s標籤自帶的刪除線給去除掉。io
代碼塊table

<!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>

結果圖class

注意：u標籤、s標籤、包括text-decoration屬性值的全部的修飾線均可以去掉哦。

underline屬性值

讓咱們進入text-decoration屬性的underline值實踐，實踐內容如：筆者將HTML頁面中的h2標籤中的文本設置一個下劃線。
代碼塊

<!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頁面中的h2標籤中的文本設置一個上劃線。
代碼塊

<!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屬性值

讓咱們進入text-decoration屬性的line-through值實踐，實踐內容如：筆者將HTML頁面中的h2標籤中的文本設置一個刪除線。
代碼塊

<!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>

結果圖

相關文章

相關標籤/搜索

網站建設指南

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<