CSS中text-decoration详解

前不久偶然发现了关于CSS的text-decoration属性的一些有趣现象,打算为它写几篇文章。这篇文章只是详细解说一下text-decoration的相关知识,也许就有你不知道的。本文适合爱刨根问底的人阅读。

text-decoration,直译过来就是文字装饰的意思。关于它的一些基本信息,可查看w3cschool上的文章。我这里只说几点值得强调的知识。

1,text-decoration是文字装饰的意思

前面其实已经提到了,之所以强调它是想说,你无法把它加在非文字的元素上,比如img,比如table。

2,text-decoration的颜色由color决定

之所以如此,是因为文字的颜色就是由color定义的。如果你发觉文字颜色与划线颜色不一致,那你得确定下你在什么上面加的text-decoration。

3,text-decoration的粗细不受文字大小影响

事实证明,即使是12px与120px的文字各加上text-decoration,它们的划线粗细都是一样的(貌似永远是1px粗)。

4,text-decoration:overline;是定义上划线

不是中划线,中划线是line-through。overline的意思很容易搞混,所幸的是,上划线几乎是一个从未派上用场的属性。

5,text-decoration不会额外增加文字的行高

overline(上划线)和underline(下划线)都是如此(中划线更不说了)。虽然它有1像素的高度,但文字加上它后高度并不会产生变化。

————————–

说完了。

3 评论

发表评论

电子邮件地址不会被公开。