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

  • 2019-07-29 16:28:57
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

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

定義字體類型

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

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

font-family : namefont-family : ncursive | 

fantasy | monospace 

| serif | sans-serif

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

?font是一個復(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è)置字體大小和字體類型,且必須放在后面,否則無效。前面可以自由定義字體樣式、字體粗細(xì)、大小寫和行高,詳細(xì)講解將在后面內(nèi)容中分別介紹。

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

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

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

body {    font-family:Arial, Helvetica, 

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

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

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

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

定義字體大小

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

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(最大)表示絕對字體尺寸,這些特殊值將根據(jù)對象字體進行調(diào)整。

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

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

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

<div>     

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

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

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

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

<p class="p5">明月幾時有?  2pc<

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

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

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

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

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

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

當(dāng)前文章標(biāo)題:如何在網(wǎng)頁制作時使用CSS定義文本樣式(一)

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3062.html

上一篇:如何在網(wǎng)頁設(shè)計時設(shè)置格式和列表

下一篇:如何在網(wǎng)頁制作時使用CSS定義文本樣式(二)

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)