css教程：美化網頁段落的排版

2024-07-11 08:25:04

字體：大中小

來源：轉載

供稿：網友

上四篇的內容是把常用的XHTML標簽拿出來介紹了一下，不是很詳細。不過沒關系，重點是要能先知道用他們，以后深入了再去細細研究更為詳細的特性以及使用方法就容易多了。上篇已經說了在第五篇會開始講CSS，剛開始講不能講得復雜，我們還是由淺入深，一步步來。還是那句話：先用起來，然后再去研究。即然我們第一篇講的是段落，那我們這篇初講CSS當然也還是要從段落開始，讓我們的段落先漂亮起來。觀看更多css教程請點這里。
在沒有講CSS之前我們先去想一下什么樣的段落才看起來才是最舒服的？如果大家一時還沒有什么想法或是還不清楚如何去分析這個問題不妨先看一下《網頁設計技巧系列之一淺談文本排版》。不論如何至少我們的小學老師告訴我們每一段的第一行應該空兩個字。這可能是我們接受到的第一個關于如何劃分段落的方法。并且可能更多人已經產生了思維定式，認為段落必需要首行空兩格。而我則認為區分段落的首要素同段距，其次才能是段落首行的處理。而首行的處理是否只有縮進兩字呢？我個人認為不是，因為我們還可以用“首字下沉”、“首行突出兩字”等來表現。有人會說：“首字下沉我就見過，比如作者的博客就用了這個效果，但是首行突出兩字似乎有點奇怪。”然而事實上首行突出兩字必不是作者發明的，在中國古代的奏本上就常采用這種格式，不同的是因為他們常需要在行首寫上一些頌語，而要表達這種頌語就需要抬高其地位，比如“君”“圣上”等字眼，所以才會突出兩字，久之則形成了一種特別的排版形式，這種形式現在的文體是用得少了，不過大家可以多多了解一下，方便以后表達不同的文體時可以用得著。

即然段距是段落區分的第一要素，那么我們就先來解決這個段距的的樣式問題。即然是一段一段的那么我們每一段都是由一組<p></p>組合而成的，而我們的CSS只要通過對這個段落標簽的描述就可以實現我們所需要的效果了。那么基本形式是：

p {這里是樣式描述內容}
我們注意到了，在CSS中這個段落標簽是不需要加尖括號的，只需要一個"p"即可以了。所有的標簽都是如此處理。那么我們需要給每個段落設個段距，這里我們有兩個描述屬性，一個是padding，另一個是margin，這兩個表現的效果看起來有點像，但是卻有著本質上的區別，如果我們把段落表示成盒子，在這個盒子里裝著一些東西，padding就是這些東西與盒子內側邊的距離，而margin則是盒子與盒子之間的距離。這里很顯然，我們里應該是使用margin。寫法是：margin:1em 0;這是一種簡寫的方法，如果寫全了應該是：margin-top:1em; margin-right:0; margin-bottom:1em; margin-left:0; 這很明顯太冗余了，所以一般我們通常是寫成：margin:1em 0 1em 0;這里的順序是上右下左，由于上下的數值是一樣的，左右的數值是一樣的，那么就可以再縮寫成：margin:1em 0; 這里的em是指相對長度單位，相對于當前對象內文本的字體尺寸。有關于單位的知識請查閱沈蘇小雨編制的《CSS2.0中文手冊》。那為什么要用em而不用px或是pt呢，這是因為我們現在的流覽器大多都有字體放大的功能，這也是方便讀者的能看得更清楚文字內容，那么如果我們用px來設定段距那么當字體放大時段距卻不會變動，那么當放大到一定數值時這個段距的特性也就不存在了。所以我們使用em這個單位，也就是希望當字體變大時段距也跟著相應變大，方便識別。

上一篇：div css網頁適應不同分辨率技巧

下一篇：CSS高級技巧:陰影效果