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