百科狗-知识改变命运!

text-decoration - 文本修饰线外观的 - css 文本样式

乐乐2年前 (2023-11-21)阅读数 26#技术干货
文章标签属性

text-decoration

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的(下划线、上划线、贯穿线/删除线或闪烁)它是text-decoration-line,text-decoration-color,text-decoration-style,和新出现的text-decoration-thickness属性的缩写。
文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性,子元素则不能将其删除。例如,在如下标记中

This text hassome emphasized wordsin 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 | blink
  • text-decoration-style:指定文本装饰的样式。如波浪线wavy、实线solid、虚线dashed
  • text-decoration-color:指定文本装饰的颜色。
  • text-decoration-thickness:文本修饰线的粗细(CSS4新增加注意这个属性还不是正式的,还没有明确。)

说明:

复合属性。检索或设置对象中的文本的装饰。

  • 所有浏览器均支持CSS2.1中的text-decoration属性,在CSS3中,该属性定义被移植到其新的分解属性text-decoration-line上;
  • 相关属性:text-decoration-skip||text-underline-position
  • 对应的脚本特性为textDecoration
默认值

作为速记的每个属性:

  • text-decoration-color: currentcolor
  • text-decoration-style: solid
  • text-decoration-line: none
适用于所有元素。它也适用于::first-letter和::first-line。
继承性
动画性

作为速记的每个属性:

  • text-decoration-color:颜色
  • text-decoration-style:离散
  • text-decoration-line:离散
  • text-decoration-thickness:按计算值类型
计算值

作为速记的每个属性:

  • text-decoration-line:作为指定
  • text-decoration-style:作为指定
  • text-decoration-color:计算的颜色
  • text-decoration-thickness:作为指定

例子

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.

text-decoration - 文本修饰线外观的 - css 文本样式

.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; }

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)
{if $zbp->Config('yd1125')->foot}