前言:
现在大家对“前端设置文字属性”大概比较重视,咱们都想要了解一些“前端设置文字属性”的相关资讯。那么小编在网络上网罗了一些有关“前端设置文字属性””的相关资讯,希望大家能喜欢,咱们快快来了解一下吧!点击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
说到text-decoration,用的最多的地方,可能就是a标签了,用来将a标签文本的下划线去掉,我们通常设置:
a{text-decoration:none}
有没有很熟悉的样子,然而text-decoration其实是三个属性的缩写,如下所示:
text-decoration-line
text-decoration-color
text-decoration-style
非常有意思,下面我带大家来一一看一下:
一、看一下用法
1、text-decoration-line
定义:用来规定文本修饰要使用的线条类型。
取值:大概就是:none,underline,line-through(规定文本中间将显示一条线)等等。
兼容性:看下面图吧
咋一看,也还可以,firefox和Chrome,safari都还蛮好的。
接下来两个主要看一下定义:
2、text-decoration-color
定义:用来规定文本修饰(下划线 underline、上划线 overline、中划线 line-through)的颜色。
取值:所有颜色表示法。
兼容性:同上。
3、text-decoration-style
定义:用来规定线条如何显示。
取值:solid和double和dotted和dashed等等。
兼容性:同上。
二、搞一个demo,让概念在脑子里更清晰
发现自己最会搞demo了,同样关于这几个属性的用法,我也来搞一个简单的demo,看一下:
dom结构就是三个不同class值的a标签(这里不贴代码了)。
看一下样式代码如何写:
就是按着上面概念,将text-decoration分三个属性来写。看一下展示结果:
没有出乎意料之外,完毕了。接下来在总结里说两个使用时的注意事项。
简单总结一下:
注意几个问题:
1、从概念上看,这个属性是用于文本修饰,如P,h1~h4等,不仅是A元素。
2、这三种属性可以简写,如:text-decoration: underline red solid。
标签: #前端设置文字属性