譯文:網頁樣式表 - 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