html的text-decoration,CSS属性参考text-decoration
CSS text-decoration 属性⽤于设置⽂本的装饰线(下划线、上划线和删除线),或移除已有的⽂本装饰线。
在CSS3中,text-decoration属性是text-decoration-line、text-decoration-color和text-decoration-style属性的简写属性。与其它CSS简写属性⼀样,text-decoration属性中没有明确指出的具体属性将会被设置为它们的初始值。
text-decoration属性可以忽略text-decoration-color和text-decoration-style属性,它们会被设置为初始值。这意味着CSS3级text-decoration属性是完全兼容CSS2和CSS1中的text-decoration属性的。如果浏览器不⽀持CSS3 text-decoration属性,则会使⽤CSS2或CSS1级的text-decoration属性。
下⾯是⼏种⽂本装饰线的效果:
⽂本装饰线效果,从上到下分别是:下划线,上划线和删除线。
text-decoration属性可以接收多个装饰线值,各个值之间使⽤空格来分开。
装饰线中有⼀个取值blink是⽂本闪烁效果,这是⼀个过时的属性,不建议使⽤。某些浏览器可能不⽀持这个效果。
值line-through是删除线效果,⽤于表⽰某个事物已经过时或被删除。建议使⽤HTML标记或来表⽰被删除的⽂本,这样在语义上能够很好的体现。
text-decoration属性会级联,意思是在⽗元素上设置了某种⽂本装饰线效果,其后代元素不能将装饰线删除。例如有下⾯的⼀段HTML代码:
This text has some emphasized words in it.
如果为
元素应⽤了装饰线属性:
p { text-decoration: underline }
则会对整段⽂字添加下划线效果。如果后⾯再为元素设置text-decoration: none,想要取消元素的下划线效果是不能办到的。此时整个段落仍然有下划线效果。但是可以通过下⾯的代码为元素添加新的装饰线样式。
em { text-decoration: overline }
官⽅语法
text-decoration: none | overline | line-through | underline | blink
新的CSS3语法如下:
text-decoration: || ||
参数:
none:不为⽂本添加装饰线。如果⽂本已经存在装饰线则将装饰线删除。
overline:装饰线在⽂本上⽅。多⾏⽂本中,每⼀⾏⽂本上⽅都有⼀条装饰线。
line-through:删除线样式装饰线。多⾏⽂本中,每⼀⾏⽂本都有删除线。
underline:装饰线在⽂本下⽅。多⾏⽂本中,每⼀⾏⽂本下⽅都有⼀条装饰线。
blink:⽂本闪烁。这个值已经过时,不建议使⽤。
text-decoration属性的初始值为none。
应⽤范围
text-decoration属性可以应⽤在所有元素上。
⽰例代码
text-decoration: none;
text-decoration: underline red;
text-decoration: underline wavy red;
text-decoration: inherit;
为⼀段⽂本添加下划线效果。
p.underlined {
text-decoration: underline;
}
在线演⽰
下⾯的例⼦演⽰了各种装饰线的效果。
这是下划线效果。
这是上划线效果。css特效文字
这是删除线效果。
同时带有上划线和下划线的效果。
浏览器⽀持
所有现代浏览器都⽀持text-decoration属性,包括:Chrome, Firefox, Safari, Opera, IE, Android 和 iOS。各个具体的装饰线属性⽬前只有Firefox 6+浏览器才⽀持。
相关阅读
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论