Home > Article > Web Front-end > Add decorative lines to text in HTML tags
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)
Value | Function |
---|---|
Remove text modification line | |
Set underline | |
Set overline | |
Set strikethrough |
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 ofu 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 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 ofs 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 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 thenone 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.
<!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 Note:
u tag,
s Tags and all decorative lines including the
text-decoration attribute value can be removed.
underline Setting underline
Let us enter theunderline 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.
<!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 ##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
##line-through setting strikethrough
Let us enter the line-through
value practice of thetext-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, html tutorial
column, welcome to learnThe 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!