如何在網(wǎng)頁(yè)制作時(shí)使用CSS定義文本樣式(一)

制作網(wǎng)站時(shí),字體樣式涉及文字型體效果,包括字體類型、字體大小、字體顏色等基本效果,還包括字體粗細(xì)、下劃線、斜體、大小寫(xiě)等特殊效果。文本樣式主要涉及文本排版效果?!?/span>

定義字體類型

CSS使用font-family屬性來(lái)定義字體類型,另外使用font屬性也可以定義字體類型。   

?font-family是字體類型專用屬性,用法如下:

font-family : namefont-family : ncursive | 

fantasy | monospace 

| serif | sans-serif

name表示字體名稱,可指定多種字體,多個(gè)字體將按優(yōu)先順序排列,以逗號(hào)隔開(kāi)。在網(wǎng)頁(yè)設(shè)計(jì)時(shí),如果字體名稱包含空格,則應(yīng)使用引號(hào)括起。第二種聲明方式使用所列出的字體序列名稱,如果使用fantasy序列,將提供默認(rèn)字體序列。   

?font是一個(gè)復(fù)合屬性,該屬性能夠設(shè)置多種字體屬性,用法如下:

font : font-style || font-variant || font-weight || font-size || line-height || 

font-familyfont : caption | icon | menu | message-box | small-caption | status-bar屬性值之間以空格分隔。

font屬性至少應(yīng)設(shè)置字體大小和字體類型,且必須放在后面,否則無(wú)效。前面可以自由定義字體樣式、字體粗細(xì)、大小寫(xiě)和行高,詳細(xì)講解將在后面內(nèi)容中分別介紹。

【示例】啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁(yè),保存為test.html,在<body>標(biāo)簽內(nèi)輸入一行段落文本。

<p>定義字體類型</p>

在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式,用來(lái)定義網(wǎng)頁(yè)字體的類型。

body {    font-family:Arial, Helvetica, 

sans-serif;       /*字體類型*/}

p {/* 段落樣式 */    font:14px "黑體";                              

/*14像素大小的黑體字體*/}

中文網(wǎng)頁(yè)字體一般多定義為宋體類型,對(duì)于標(biāo)題或特殊提示信息,如果需要特殊字體,則建議采用圖像形式來(lái)間接實(shí)現(xiàn)。原因在網(wǎng)頁(yè)設(shè)計(jì)時(shí)是中文字體類型比較少,通用字體類型就更少了,字體的表現(xiàn)力比較弱,即使存在各種藝術(shù)字體,但是恐于藝術(shù)字體的應(yīng)用范圍窄,很少被設(shè)計(jì)師用來(lái)作為網(wǎng)頁(yè)字體使用。

定義字體大小

CSS使用font-size屬性來(lái)定義字體大小,該屬性用法如下:

font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length

其中,xx-small(最小)、x-small(較?。?、small(小)、medium(正常)、large(大)、x-large(較大)、xx-large(最大)表示絕對(duì)字體尺寸,這些特殊值將根據(jù)對(duì)象字體進(jìn)行調(diào)整。

larger(增大)和smaller(減少)這對(duì)特殊值能夠根據(jù)父對(duì)象中字體尺寸進(jìn)行相對(duì)增大或者縮小處理,使用成比例的em單位進(jìn)行計(jì)算。

length可以是百分?jǐn)?shù),或者浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值,但不可為負(fù)值。其百分比取值是基于父對(duì)象中字體的尺寸來(lái)計(jì)算,與em單位計(jì)算相同。

【示例】啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁(yè),保存為test.html,在<body>標(biāo)簽中輸入以下內(nèi)容:

<div>     

<p class="p1">明月幾時(shí)有?  0.6in</p>     

<p class="p2">明月幾時(shí)有?  0.8em</p>     

<p class="p3">明月幾時(shí)有?  2cm</p>     

<p class="p4">明月幾時(shí)有?  16pt</p>     

<p class="p5">明月幾時(shí)有?  2pc<

/p></div>在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式,分別設(shè)置各個(gè)段落中的字體大小。div{font-size:20px;}                  /*以像素為單位設(shè)置div標(biāo)簽字體大小*/

.p1{ font-size: 0.6in; }              /*以英寸為單位設(shè)置字體大小*/

.p2{ font-size: 0.8em; }              /*以父級(jí)字體大小為參考設(shè)置大小*/

.p3{ font-size: 2cm ; }               /*以厘米為單位設(shè)置字體大小*/

.p4{ font-size: 16pt; }               /*以點(diǎn)為單位設(shè)置字體大小*/

.p5{ font-size: 2pc; }                /*以皮卡為單位設(shè)置字體大小*/

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))