百科狗-知识改变命运!
--

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

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

text-decoration

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

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

.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

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

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