美化網(wǎng)頁(yè)段落排版的css教程

　　上四篇的內(nèi)容是把常用的XHTML標(biāo)簽?zāi)贸鰜?lái)介紹了一下，不是很詳細(xì)。不過沒關(guān)系，重點(diǎn)是要能先知道用他們，以后深入了再去細(xì)細(xì)研究更為詳細(xì)的特性以及使用方法就容易多了。上篇已經(jīng)說(shuō)了在第五篇會(huì)開始講CSS，剛開始講不能講得復(fù)雜，我們還是由淺入深，一步步來(lái)。還是那句話：先用起來(lái)，然后再去研究。即然我們第一篇講的是段落，那我們這篇初講CSS當(dāng)然也還是要從段落開始，讓我們的段落先漂亮起來(lái)。

　　在沒有講CSS之前我們先去想一下什么樣的段落才看起來(lái)才是最舒服的？如果大家一時(shí)還沒有什么想法或是還不清楚如何去分析這個(gè)問題不妨先看一下《網(wǎng)頁(yè)設(shè)計(jì)技巧系列之一 淺談文本排版》。不論如何至少我們的小學(xué)老師告訴我們每一段的第一行應(yīng)該空兩個(gè)字。這可能是我們接受到的第一個(gè)關(guān)于如何劃分段落的方法。并且可能更多人已經(jīng)產(chǎn)生了思維定式，認(rèn)為段落必需要首行空兩格。而我則認(rèn)為區(qū)分段落的首要素同段距，其次才能是段落首行的處理。而首行的處理是否只有縮進(jìn)兩字呢？我個(gè)人認(rèn)為不是，因?yàn)槲覀冞�可以用“首字下沉”、“首行突出兩字”等來(lái)表現(xiàn)。有人會(huì)說(shuō)：“首字下沉我就見過，比如作者的博客就用了這個(gè)效果，但是首行突出兩字似乎有點(diǎn)奇怪。”然而事實(shí)上首行突出兩字必不是作者發(fā)明的，在中國(guó)古代的奏本上就常采用這種格式，不同的是因?yàn)樗麄兂Ｐ枰�在行首寫上一些頌語(yǔ)，而要表達(dá)這種頌語(yǔ)就需要抬高其地位，比如“君”“圣上”等字眼，所以才會(huì)突出兩字，久之則形成了一種特別的排版形式，這種形式現(xiàn)在的文體是用得少了，不過大家可以多多了解一下，方便以后表達(dá)不同的文體時(shí)可以用得著。

　　即然段距是段落區(qū)分的第一要素，那么我們就先來(lái)解決這個(gè)段距的的樣式問題。即然是一段一段的那么我們每一段都是由一組

　　組合而成的，而我們的CSS只要通過對(duì)這個(gè)段落標(biāo)簽的描述就可以實(shí)現(xiàn)我們所需要的效果了。那么基本形式是： p {這里是樣式描述內(nèi)容}

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

　　這里值得注意的是，當(dāng)我們使用margin的時(shí)候兩個(gè)段落之間的margin會(huì)有重疊，那么看上圖中右側(cè)的圖我們可以發(fā)現(xiàn)在兩段之間的margin是被重疊了原本應(yīng)該是兩個(gè)高度相加的結(jié)果還是一個(gè)高度，但是上圖中間的示意padding卻沒有重疊他們的高度是相加的，這點(diǎn)大家要注意到，這不是什么BUG，而是一種特性。那么我們就寫一句CSS來(lái)設(shè)定我們的段落： p {margin:1em 0;}

　　說(shuō)了段距自然就會(huì)說(shuō)到行距，有看過《網(wǎng)頁(yè)設(shè)計(jì)技巧系列之一 淺談文本排版》的朋友就會(huì)明白行距的重要性，那么你是否有給自己的頁(yè)面設(shè)置行距呢，是如何設(shè)置的？ 設(shè)置行距有一個(gè)專門的屬性：line-height，這個(gè)應(yīng)該稱之為行高。因?yàn)槲覀円�設(shè)定的是一行的高度，而不是行與行之間的距離。這也就是為什么我們總發(fā)現(xiàn)Photoshop里設(shè)置行距的數(shù)據(jù)與做網(wǎng)頁(yè)設(shè)置的數(shù)值不一樣的原因了。但是行距依然是可以通過我們?cè)O(shè)定的行高最終產(chǎn)生，所以方法不同，但是目標(biāo)是一致的。一般我們的行高一定是要超過字體高度的，否則行與行之間就會(huì)重疊，當(dāng)然我們不排除使用這種式做一些特別的效果，但是至少在閱讀文本上我們需要行行清楚。行距不宜太大，太大了閱讀效率不高，如果太小了又容易讀錯(cuò)行。所以一般行高不應(yīng)超過兩個(gè)字的高度。振之最常用的是1.6em~1.8em之間，如果寬度很大，我們就需要加大行距不然我們很容易讀錯(cuò)行，如果寬度小的時(shí)候行距過大則失去了閱讀的效率。那么我們把剛才的段落的CSS做一下增加，標(biāo)注一下我們的行距： p {margin:1em 0; line-height:1.6em; }

　　這樣對(duì)于一個(gè)基本的段落設(shè)置就已經(jīng)完成了，如果需要給這個(gè)段落加個(gè)首行縮進(jìn)，還可以為這個(gè)段落設(shè)置一下字體，字大小，字樣式，色彩等等： p {margin:1em 0; text-indent:2em; font:normal normal 12px/1.6em "宋體";color:#000; }

　　這里關(guān)于字體的屬性也是個(gè)縮寫形式，順序是：“font : font-style || font-variant || font-weight || font-size || line-height || font-family ”，這些知識(shí)在沈蘇小雨的CSS2.0中文手冊(cè)中都有講述。我這里就不重復(fù)了。這里的color是文字的色彩，#后面的數(shù)值應(yīng)該是6位，可以直接復(fù)制Photoshop拾色板里的數(shù)值。但是我們也常常會(huì)縮寫�？s寫方式是，奇數(shù)位與偶數(shù)位的值相同時(shí)即可合并為3位的色值。比如：#4488cc，可以縮寫為#48c，如果需要首突出，那么不光需要把text-indent的值設(shè)為負(fù)值，還需要修改padding的數(shù)值，因?yàn)橥怀鋈サ囊簿褪浅�出了�?nèi)容區(qū)那么如果padding區(qū)沒有空間那么這兩個(gè)突出去的字就無(wú)法顯示。那我們?cè)俳o出一個(gè)首行突出兩字的CSS p {margin:1em 0; padding:0 0 0 2em; text-indent:-2em; font:normal normal 12px/1.6em "宋體";color:#000; }

【美化網(wǎng)頁(yè)段落排版的css教程】相關(guān)文章：

css屬性定位教程07-23

CSS入門教程01-25

CSS閉合浮動(dòng)元素教程06-26

CSS選擇器教程06-05

CSS教程之盒模型10-17

關(guān)于CSS教程:復(fù)合型條狀圖表01-25

HTML語(yǔ)言的網(wǎng)頁(yè)教程06-14

Word段落添加邊框的教程09-22

CSS基礎(chǔ)教程之背景圖片07-31

CSS-層疊樣式表基礎(chǔ)教程08-10