程序员人生 网站导航

如何使用 CSS 设置段落间距

栏目:htmlcss时间:2013-10-31 05:10:28

段落间距网页设计里一个提升阅读体验的重要因素。但网页排版不想Word那样简单,你能否通过CSS有效率地设置段落间距呢?

网页设计里的文字排版问题

作为网页设计师,我们必须为文章的每个小标题和段落都预留一定的余量(在CSS通常使用margin),但一个段落里所包含的元素(HTML标签)并不是一成不变的,这意味着你必须为这些可能存在的元素都设置一个明确的样式,避免产生多余的代码。

在逐步向W3C的标准过渡的前提下,目前设置段落间距的方法主要有两种:

通过类(Class)
为段落的第一个元素指定一个Class值,赋予margin-top:0。

HTML:

<div id="articles">
<h1 class="first">Heading</h1>
<p>Welcome to Bolo's blog...</p>
</div>

CSS:
.first { margin-top: 0; }

这种方法的缺点是:引入了一个新的Class,这意味着它会降低我们的效率。你可能需要修改以前写下的文章,而且也不利于文章内容的增减。

通过CSS伪类
CSS伪类已经逐渐被一些先进的浏览器支持。

HTML:
<div id="articles">
<h1>Heading</h1>
<p>Welcome to Bolo's blog...</p>
</div>

CSS:
#articles > :first-child { margin-top: 0; }

通过CSS伪类把margin-top:0赋予#articles的第一个子元素。这个方法不需要我们手动地引入一个多余的Class,因此你无需再去调整文章的代码。适应性非常强。

这种方法在CSS2标准里已经被承认,但一直得不到普及,原因就是IE6不支持(因此消灭IE6是所有Web Developer共同的责任—译者注)。

你写的CSS对IE兼容吗?
此处开始是精华啊—译者注

以上的内容只是对当前CSS可以实现的部分功能的简述,如何发挥CSS的威力靠的是网页设计师的使用方法。下面将介绍几个强大的工具,可是很方便地对IE浏览器进行最真实的兼容性测试,让你选择最好的CSS编写方案。

ie7-js
ie7-js是一个JavaScript库,它会使IE表现得像一个兼容W3C标准的浏览器,你可以在这个测试页查看某个版本的IE对这种CSS语法的兼容性,以及它们的兼容写法。

在“IE7 – js”项目有两个主要的JavaScript脚本:IE7.js和IE8.js。当你决定使用IE8-js时就不需要同时使用IE7-js,因为IE8-js已经包含了IE7-js的所有功能。你可以在这个页面找到所有关于这个项目的说明。

ie-css3.js
IE-css3.js可是令IE提供对CSS3规则的支持。但美中不足的是这个脚本并不可以令IE完全支持CSS3,而只能作为对IE的CSS引擎的扩展。毕竟CSS3还是一个未完成的标准。

eCSStender
这应该是目前最强大的JavaScript写的IE扩展了,它整合了上述两个扩展的一些突出功能,并添加了一些额外的支持。你可以在这个页面查看关于这个库的详细说明。

Bolo的看法
无论消灭IE6呼声多么高,最好的办法还是尽量去兼容它,这才不至于令自己损失读者。因此在写浏览器端的代码时,都应该优先采用兼容性强的方法。实在不行了再去写hack吧。

对于本文推荐的几个JavaScript库,如果真的用在线上的网站的话,其缺点是非常致命的(浏览器禁用了JavaScript的情况下),而且容易引起其他的不兼容(主要是和其他JavaScript脚本冲突)。因此,我推荐大家用这些库来了解IE的性能,这才是一劳永逸的做法。
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐