网站制作学习网DIV+CSS→正文:css格式化整个段落
字体:

css格式化整个段落

DIV+CSS 2009/4/15 15:25:27  点击:不统计

css可以利用line-height属性调整文本行之间的间距。行高越大,每行文本之间的间距显示就会越大,你可以利用px,em,或者percentage来设定行高的大小。

一般来说,percentage或者em比px更好,因为它们根据且随着文本font-size属性而改变。如果你设定行高为10px,后来又把字号调整的更大些(比如36px),因为行高保持10px,所有行就会重叠。然而,使用一个比例,就意味着行高间距在你改变font-size值时也会做适当的调整。

浏览器正常的line-height设置是120%。因此,当你要使行间距紧凑,就用一个小于120%的值,要使行分开,就使用大于120%的值。

css提供另一种专门针对行高的度量方法,它只是一个数字,像这样编写:

line-height:1.5;

在值的后面没有单位,浏览器用这个数字与字号相乘来决定行高。因此如果文本是1em,行高值是1.5,那么计算出来的行高就是1.5em。大多数时候,效果与指定的1.5em或者150%没什么不同。但是有时候这种倍增因素会派的上用场,尤其是但嵌套的标签继承了他们父标签的行高值时。

例如,你设定<body>标签的行高属性为150%,则网页里面的所有标签都将继承这一值。然而,百分比不会被继承,而是计算出来的行高被继承了。因此,假如该网页的字号设定为10px,10的150%就是15px,每一个标签都将继承一个15px的行高,而不是150%。因此如果你刚好有一个大一号的百分比和一个36px的文本,它的行高15px就会比文本小一些,使得文本行以一种难以阅读的混乱形式挤压在一起。

在这个例子中,不把150%的line-height应用在<body>标签上的代替做法可以通过设定line-height为1.5,让所有标签共享相同的基础比例的行高属性来实现。每一个标签不是继承一个精确的行高值,而只是简单的用1.5乘以它的字号。因此在上面这个例子中,段落文本为36px,行高就是1.5*36或者说是54px。

[b]注:[/b]为了确定文本行之间显示的间距量,浏览器会从行高中减去字号。这个结果称作leading,就是段落中行与行的间距量。假设字号是12px,行高(设置为150%)是18px,18px减去12px等于6px,因此浏览器在每一行之间增加6px的间距。

·上一篇:css解决IE浏览器下IMG标签下方的空白区域 >>    ·下一篇:css制作圆角的原理及方法 >>
推荐文章
最新文章