Home > Article > Web Front-end > Add decorative lines to text in HTML tags

Add decorative lines to text in HTML tags

angryTomforward: 2019-11-28 17:26:292467browse

text-decoration attribute introduction

text-decoration attribute is used to set text As for the decoration line, the text-decoration attribute has a total of 4 values.

text-decoration attribute value description table

(recommended learning: HTML video tutorial)

##noneRemove text modification lineunderlineSet underlineoverlineSet overlineline-throughSet strikethrough

Value	Function

HTML tag comes with modified line

At the beginning Before practicing the text-decoration attribute, I will first popularize the tags in HTML with their own modification lines, such as u tags and s tags. If there are any deficiencies, you can tell me in the comments below. After all, I am also a novice on the front end. I hope to communicate with everyone, help each other and make progress together.

u tag

Let us enter the practice of

u tag. The u tag comes with text underlining.

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

Result graph

Add decorative lines to text in HTML tags

Note: The

u tag can also be used with other tags in HTML, Example: Nest the u tag into the h1 tag.

<h1><u>成功不是击败别人，而是改变自己</u></h1>

s tag

Let us enter the practice of

s tag. The s tag comes with text deletion Wire.

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

Result graph

Add decorative lines to text in HTML tags

Note:

s tags can also be nested, consistent with u tags, The author will not introduce too much.

none removes modified lines

Let us enter the

none value practice of the text-decoration attribute. The practice content is as follows: The author removed the strikethrough from the s tag in the HTML page.

Code block

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

Result graph

Add decorative lines to text in HTML tags

Note:

u tag, s Tags and all decorative lines including the text-decoration attribute value can be removed.

underline Setting underline

Let us enter the

underline value practice of the text-decoration attribute. The practice content is as follows: The author Set an underline to the text in the h2 tag in the HTML page.

Code block

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

Result graph

Add decorative lines to text in HTML tags

##overline setting overline

Let We enter the

overline

value practice of the text-decoration attribute. The practice content is as follows: The author will put the text in the h2 tag in the HTML page Set an overline. Code block

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

Result graph

Add decorative lines to text in HTML tags ##line-through setting strikethrough

Let us enter the line-through

value practice of the

text-decoration attribute. The practice content is as follows: The author sets a delete for the text in the h2 tag in the HTML page Wire. Code Block

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

Result Picture

This article comes from PHP Chinese website, Add decorative lines to text in HTML tags html tutorial

column, welcome to learn

The above is the detailed content of Add decorative lines to text in HTML tags. For more information, please follow other related articles on the PHP Chinese website!

php html

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：What is the HTML tag and is it useful?Next article：What is the HTML tag and is it useful?

See more

Add decorative lines to text in HTML tags

Related articles