CSS text-decoration 属性

实例

设置 h1、h2、h3、h4 元素的文本修饰：

  1. h1 {text-decoration:overline}
  2. h2 {text-decoration:line-through}
  3. h3 {text-decoration:underline}
  4. h4 {text-decoration:blink}

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

所有主流浏览器都支持 text-decoration 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

注释：IE、Chrome 或 Safari 不支持 "blink" 属性值。

定义和用法

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

注释：修饰的颜色由 "color" 属性设置。

说明

这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。

默认值： none
继承性： no
版本： CSS1
JavaScript 语法： object.style.textDecoration="overline"

可能的值

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

实例

修饰文本

本例演示如何向文本添加修饰。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. h1 {text-decoration: overline}
  5. h2 {text-decoration: line-through}
  6. h3 {text-decoration: underline}
  7. h4 {text-decoration:blink}
  8. a {text-decoration: none}
  9. </style>
  10. </head>
  12. <body>
  13. <h1>这是标题 1</h1>
  14. <h2>这是标题 2</h2>
  15. <h3>这是标题 3</h3>
  16. <h4>这是标题 4</h4>
  17. <p><a href="http://www.jishuchi.com/">这是一个链接</a></p>
  18. </body>
  20. </html>

相关页面

CSS 教程：CSS 文本

HTML DOM 参考手册：textDecoration 属性