Home >Web Front-end >CSS Tutorial >How to use css text-decoration-line attribute
How to use css text-decoration-line attribute
- silencementOriginal
- 2019-05-27 15:07:432797browse
text-decoration-line attribute definition and usage
In css, the text-decoration-line attribute is used to specify text decoration requirements The type of line used. If you need to set the values of the text-decoration-line, text-decoration-style and text-decoration-color properties at the same time, you can use the text-decoration property. The text-decoration attribute can define these three attributes in one declaration. The text-decoration-line attribute supports multiple attribute values, such as using underline and overline (text-decoration-line:underline overline;) to display lines above and below the text.
text-decoration-line The attribute is a new attribute in CSS3. Currently, mainstream browsers do not support this attribute, but the Firefox browser supports another attribute that can replace this attribute (-moz-text-decoration-line attribute).
text-decoration-line attribute syntax format
css syntax: text-decoration-line: none/underline/overline/line-through/initial/inherit
JavaScript syntax: object.style.textDecorationLine="overline"
Attribute value description
none: Default value, stipulates that there are no lines for text decoration
underline: stipulates A line will be displayed below the text
overline: Specifies that a line will be displayed above the text
line-through: Specifies that a line will be displayed in the middle of the text
initial: Setting This attribute is its default value
inherit: inherit the value of the text-decoration-line attribute from the parent element
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css text-decoration-line属性文本修饰的线条类型</title>
<style type="text/css">
p{text-decoration: underline;}
#p1{text-decoration-line: overline;-moz-text-decoration-line: overline;}
#p2{text-decoration-line: underline;-moz-text-decoration-line: underline;}
#p3{text-decoration-line: line-through;-moz-text-decoration-line: line-through;}
#p4{text-decoration-line: overline underline;-moz-text-decoration-line: overline underline;}
</style>
</head>
<body>
<p id="p1">text-decoration-line属性演示1</p>
<p id="p2">text-decoration-line属性演示2</p>
<p id="p3">text-decoration-line属性演示3</p>
<p id="p4">text-decoration-line属性演示4</p>
</body>
</html> operation result
The above is the detailed content of How to use css text-decoration-line attribute. For more information, please follow other related articles on the PHP Chinese website!