text-decoration - 文本修饰线外观的 - css 文本样式
text-decoration
text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的(下划线、上划线、贯穿线/删除线或闪烁)它是text-decoration-line
,text-decoration-color
,text-decoration-style
,和新出现的text-decoration-thickness
属性的缩写。
文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性,子元素则不能将其删除。例如,在如下标记中
This text has some emphasized words in it.
,应用样式p{text-decoration: underline}会对整个段落添加下划线,此时再添加样式 em{text-decoration: none}则不会引起任何改变,整个段落仍然有下划线修饰。然而,新加样式 em{text-decoration: overline}则会在标记的文字上再添加上这种overline样式。示例
text-decoration: underline; text-decoration: underline dotted; text-decoration: underline dotted red; text-decoration: green wavy underline; text-decoration: underline overline #FF3028;
浏览器支持
浏览器都支持text-decoration |
语法:
text-decoration:text-decoration-line
||text-decoration-style
||text-decoration-color
||text-decoration-thickness
取值:
text-decoration-line
:指定文本装饰的种类。相当于CSS2.1的text-decoration
属性,可取值:none | underline | overline | line-through | blinktext-decoration-style
:指定文本装饰的样式。如波浪线wavy、实线solid、虚线dashedtext-decoration-color
:指定文本装饰的颜色。text-decoration-thickness
:文本修饰线的粗细(CSS4新增加注意这个属性还不是正式的,还没有明确。)
说明:
复合属性。检索或设置对象中的文本的装饰。
- 所有浏览器均支持CSS2.1中的
text-decoration
属性,在CSS3中,该属性定义被移植到其新的分解属性text-decoration-line
上; - 相关属性:
text-decoration-skip
||text-underline-position
- 对应的脚本特性为textDecoration。
默认值 | 作为速记的每个属性:
|
适用于 | 所有元素。它也适用于::first-letter和::first-line。 |
继承性 | 否 |
动画性 | 作为速记的每个属性:
|
计算值 | 作为速记的每个属性:
|
例子
h1{text-decoration:overline} h2{text-decoration:line-through} h3{text-decoration:underline}
this text has a line underneath it.
this text has a line over it.
this text has a line going through it.
this link will not be underlined, as links generally are by default. be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks.
this text has lines above and below it.
this text might blink for you, depending on the browser you use.
.under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .blink { text-decoration: blink; }
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!