龙空技术网

前端修饰文本使用text-decoration时,你要记住的总共有三个属性

小郑搞码事 381

前言:

现在大家对“前端设置文字属性”大概比较重视,咱们都想要了解一些“前端设置文字属性”的相关资讯。那么小编在网络上网罗了一些有关“前端设置文字属性””的相关资讯,希望大家能喜欢,咱们快快来了解一下吧!

点击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

说到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。

标签: #前端设置文字属性