CSS中行高中行高line-height属性的一些使用技巧属性的一些使用技巧
主要介绍了CSS中行高line-height属性的一些使用技巧,包括为每行文本指定不同颜色和文本中间添加线时用到
的一些操作方法,需要的朋友可以参考下
先来回顾一下line-height的基础知识:
语法: line-height : normal | <实数> | <长度> | <百分比> | inherit
说明: 设置元素中行的高度。
值: normal:默认行高,一般为1到1.2; 实数:实数值,缩放因子; 长度:合法的长度值,可为负数; 百分比:百分比取值
基于元素的字体尺寸。
初始值: normal
继承性: 继承
适用于: 所有元素
媒体: 视觉
计算值: 长度和百分比值为绝对值;其他同指定值。
CSS中的line-height属性控制着两行文本之间的空白多少,通常是会设置成一个无单位数值(比如line-height:1.4),表明其与
font-size属性所构成的比例。line-height在排版上是非常重要的一个属性,太低的话,文字的行与行之间会尴尬地挤在一起,
太高的话它们又会尴尬地分的太开,无论哪一种都对阅读不利。不过你也许早就知道这一点了。
这篇文章中我们会着重介绍一些技巧,如果你知道(或者能搞清楚)line-height的确切值,你可以做得更有趣 。
为每一行文本指定不同颜色为每一行文本指定不同颜色
不幸的是,我们并没有::nth-line这个选择器。我们也不能指望<span>会靠得住,数不清的原因可能导致文本在某处被断开。
有一个办法,虽然不标准,就是利用元素的背景来充当文字的背景。
CSS
也有另一个技巧,你可以用linear-gradient()加上色彩点来控制颜色之间不会互相渐变,让一个颜色结束之后突然开始另一个颜
色。我们假设line-height的值为22px,那我们就可以让渐变每逢22px断开一次。
Sass
CSS Code复制内容到剪贴板
1. .text {
2. background-image: linear-gradient(
3. to bottombottom,
4. #9588DD,
5. #9588DD 22px,
6. #DD88C8 22px,
7. #DD88C8 44px,
8. #D3DD88 44px,
9. #D3DD88 66px,
10. #88B0DD 66px,
11. #88B0DD)
12. }
两个技巧结合之后:
如果你的浏览器不支持text的background-clip,比如Firefox,那你就会看到位于文字背后的色彩长条,可能你会觉得这样看起
来很酷甚至会很喜欢,但或许你宁可回到设置文字颜色的老路上来。如果是后者的话,你可以用@support来设置成:如果浏