text-decoration

简介

text-decoration 这个 CSS 属性是用于设置文本排版（下划线、顶划线、删除线或者闪烁）。下划线和顶划线修饰于文本的下部，删除线位于文本之上。

文本修饰属性会延伸到后代元素。这意味着如果祖先元素指定了文本修饰属性，后代元素则不能将其删除。例如，在如下标记中<p>This text has <em>some emphasized words</em> in it.</p>，应用样式p { text-decoration: underline } 会对整个段落添加下划线，再添加样式 em { text-decoration: none } 则不会引起任何改变；整个段落仍然有下划线修饰。然而，新加样式 em { text-decoration: overline } 则会在<em>标记的文字上添加另一种新样式。

语法

/*关键值*/
text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/

/*全局值*/
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

值

text-decoration属性是一种简写属性，并且可以使用普通属性三个值中的任何一个。普通属性如下：text-decoration-line，text-decoration-color和text-decoration-style

语法形式

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

例子

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

<h1 class="under">Underlined Header</h1>
<p class="line">If you want to strike out text, use line-through.</p>
<p class="blink">This text might blink for you - if you use Explorer, it will not.</p>
<h1 class="over">and now an overlined header.</h1>
<p>This <a class="none" href="textdecoration.html">link will not be underlined</a> , as most links are by default.  Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</p>
<p class="underover">This text has both underline and overline.</p>

规范

浏览器兼容性

[1]blink value没有任何效果.

[2]Safari 不支持text-decoration-style.

[3]这个版本的Gecko有一部分实现.

See also

参见

• The list-style attribute controls the appearance of items in HTML <ol> and <ul> lists.