译文:网页样式表 - CSS的提示与窍门
英文: http://www.w3.org/Style/Examples/007/indent
说明:

翻译: Chinese Translation Services

 

网页样式表
CSS的提示与窍门

缩格的段落

Eiffel tower

袖珍法国公园里的艾菲尔铁塔缩小模型

这是简单的一件事: 把每段的第一行缩格. 多数人们认为那样比起两段之间有空行易于阅读,尤其是长篇文件, 而且也容许保留空行作为比较重要的文章分隔.

问题在此,只须缩格前有分段的段落. 一页的第一段不需缩格, 而在图标,标题之后或是偏离文字的段落也不须要. 这规则实际上是非常简单的:

p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

这样只会缩格那些前有分段之段落的首行. 如此也缩减全部段落之下及缩格段落之上的空间.然而在运用时你会发现还须要有例外.

在这页, 譬如有P 字符应用在图像标题 (查看 “Figures & captions” 例子). 我们已将它们置中, 因此他们不应缩格. 一个简单的'p.caption {text-indent: 0}' 就解决它了. 你可见我们在这例子真正的用到那规则.

我们现在可运用不同量的空白在段落之间来标示文件里重要的分隔. 让我们为这三种不同分隔等级下定义; stb (小主题的分隔), mtb (中主题的分隔), 以及 ltb (大主题的分隔). 我们已给予这段落stb (小主题的分隔) 等级, 因此你可看到此效果.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 17 Jan 2001;
last updated $Date: 2009/09/08 13:41:53 $ GMT