本例著(zhù)重介紹在網(wǎng)頁(yè)設計時(shí)對正文文本樣式的設置，并進(jìn)一步制作網(wǎng)頁(yè)時(shí)講述CSS文字和段落的排版方法。
【操作步驟】
第1步，構建網(wǎng)頁(yè)結構。
使用<h1>標簽定義文章的標題，同時(shí)增加了3個(gè)<p>標簽，添加段落文本。
<h1><img src="images/logo.gif" >春</h1>
<p>盼望著(zhù)，盼望著(zhù)，東風(fēng)來(lái)了，春天的腳步近了。一切都像剛睡醒的樣子，欣欣然張開(kāi)了眼。山朗潤起來(lái)了，水漲起來(lái)了，太陽(yáng)的臉紅起來(lái)了。小草偷偷地從土地里鉆出來(lái)，嫩嫩的，綠綠的。園子里，田野里，瞧去，一大片一大片滿(mǎn)是的。坐著(zhù)，躺著(zhù)，打兩個(gè)滾，踢幾腳球，賽幾趟跑，捉幾回迷藏。風(fēng)輕悄悄的，草軟綿綿的。</p>
<p>桃樹(shù)，杏樹(shù)，梨樹(shù)，你不讓我，我不讓你，都開(kāi)滿(mǎn)了花趕趟兒。紅的像火，粉的像霞，白的像雪?；ɡ飵е?zhù)甜味；閉了眼，樹(shù)上仿佛已經(jīng)滿(mǎn)是桃兒，杏兒，梨兒?；ㄏ鲁汕С砂俚拿鄯湮宋说聂[著(zhù)，大小的蝴蝶飛來(lái)飛去。野花遍地是：雜樣兒，有名字的，沒(méi)名字的，散在草叢里像眼睛像星星，還眨呀眨的?！按得娌缓畻盍L(fēng)”，不錯的，像母親的手撫摸著(zhù)你，風(fēng)里帶著(zhù)些新翻的泥土的氣息，混著(zhù)青草味兒，還有各種花的香，都在微微潤濕的空氣里醞釀。鳥(niǎo)兒將巢安在繁花嫩葉當中，高興起來(lái)了，呼朋引伴的賣(mài)弄清脆的歌喉，唱出婉轉的曲子，跟清風(fēng)流水應和著(zhù)。牛背上牧童的短笛，這時(shí)候也成天嘹亮的響著(zhù)。 雨是最尋常的，一下就是三兩天?？蓜e惱?？?，像牛毛，像花針，像細絲，密密地斜織著(zhù)，人家屋頂上全籠著(zhù)一層薄煙。樹(shù)葉卻綠得發(fā)亮，小草也青得逼你的眼。傍晚時(shí)候，上燈了，一點(diǎn)點(diǎn)黃暈的光，烘托出一片安靜而和平的夜。在鄉下，小路上，石橋邊，有撐著(zhù)傘慢慢走著(zhù)的人，地里還有工作的農民，披著(zhù)蓑戴著(zhù)笠。他們的房屋稀稀疏疏的，在雨里靜默著(zhù)。 天上的風(fēng)箏漸漸多了，地上的孩子也多了。城里鄉下，家家戶(hù)戶(hù)，老老小小，也趕趟似的，一個(gè)個(gè)都出來(lái)了。舒活舒活筋骨，抖擻抖擻精神，各做各的一份事兒去?！耙荒曛嬙谟诖骸?，剛起頭兒，有的是功夫，有的是希望。春天像剛落地的娃娃，從頭到腳都是新的，它生長(cháng)著(zhù)。</p>
<p>春天像小姑娘，花枝招展的，笑著(zhù)走著(zhù)。</p>
<p>春天像健壯的青年，有鐵一般的胳膊和腰腳，領(lǐng)著(zhù)我們向前去。</p>
此時(shí)的顯示效果極其簡(jiǎn)單，僅僅是簡(jiǎn)單的文字和標題。
第2步，定義網(wǎng)頁(yè)基本屬性、標題屬性，與上一節示例基本相同。
body {
margin:20px; /*邊界*/
background:url(images/bg.jpg); /*背景圖片*/
font-size:14px; /*網(wǎng)頁(yè)字體大小*/
font-family:"宋體", Arial, Helvetica, sans-serif; /*網(wǎng)頁(yè)字體默認類(lèi)型*/}h1{
font-family:"黑體";
color:#086916;
padding-bottom:24px;
text-align:center;
border-bottom:2px solid #cecaca;}img{
position:relative;
bottom:-24px;
有讀者可能會(huì )產(chǎn)生這樣的疑問(wèn)，在<body>標簽中設置了字體為宋體，為什么在<h1>標簽中又設置為黑體呢？到底頁(yè)面會(huì )顯示出哪種字體呢？
CSS是這樣規定的，在網(wǎng)站建設中，下級標簽的屬性可以繼承其父級的屬性，在<.body>標簽中定義了字體為宋體，如果<h1>標簽中沒(méi)有再定義字體屬性，那么<h1>標簽的字體屬性會(huì )繼承<body>中的屬性，其內容將會(huì )以宋體顯示，在此例中<h1>標簽又重新定義了字體為黑體，那么標題將會(huì )以黑體顯示。第3步，設置正文樣式，即<p>標簽中的段落內容。
p{
line-height:1.6em; /*行間距*/
font-size:13px; /*字體大小*/
color:#000; /*字體顏色*/
text-indent:2em; /*定義首行縮進(jìn)2個(gè)字*/ margin:0; /*四周補白為0*/
此時(shí)<p>標簽加入了CSS設置，包括字體大小和字體顏色和行間距等，但是并沒(méi)有設置字體類(lèi)型，所以<p>將會(huì )繼承其父級屬性，顯示為宋體。
當前文章標題：設計網(wǎng)頁(yè)正文樣式
當前URL：http://amzcoolest.com/news/wzzz/3066.html
