css text-decoration上划线下划线

text-decoration 属性规定添加到文本的修饰。

text-decoration介绍

在CSS中，使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。

语法：

text-decoration:属性值;

text-decoration属性取值如下表：

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

text-decoration实例

设置h1，h2，h3和h4元素文本装饰：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>

</html>

在线运行

我们在HTML教程中学习了删除线用<s>标签、下划线用<u>标签，现在我们学习了text-decoration属性之后，这些效果都应该用CSS控制。

记住，前端开发中，对于样式一般用CSS来控制，不建议使用标签来控制。也就是说，我们应该摒弃纯样式标签，如<s>、<u>等。