CSS text-decoration 属性 详解
css3基础 2022-07-14 17:33:38小码哥的IT人生shichen
CSS text-decoration 属性
定义和用法
text-decoration 属性规定添加到文本的修饰。
注释：修饰的颜色由 "color" 属性设置。
说明
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。
另请参阅：
CSS 教程：CSS 文本
HTML DOM 参考手册：textDecoration 属性
实例
设置 h1、h2、h3、h4 元素的文本修饰：
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
完整实例【亲自试一试】：
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.phpcodeweb.com/index.html">这是一个链接</a></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 语法
text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| text-decoration-line | 设置要使用的文本装饰类型（如下划线、上划线、划线）。 |
| text-decoration-color | 设置文字装饰的颜色。 |
| text-decoration-style | 设置文本装饰的样式（如实心、波浪形、点线、虚线、双线）。 |
| text-decoration-thickness | 设置装饰线的粗细。 |
| initial | 将此属性设置为其默认值。请参阅 initial。 |
| inherit | 从其父元素继承此属性。请参阅 inherit。 |
技术细节
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.textDecoration="overline" |
更多实例
完整实例【修饰文本】：
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.phpcodeweb.com/index.html">这是一个链接</a></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何向文本添加修饰。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
