在網(wǎng)站建設時(shí)，CSS使用font-weight屬性來(lái)定義字體粗細，該屬性用法如下：
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-weight屬性取值比較特殊，其中normal關(guān)鍵字表示默認值，即正常的字體，相當于取值為400。bold關(guān)鍵字表示粗體，相當于取值為700，或者使用<b>標簽定義的字體效果。bolder（較粗）和lighter（較細）相對于normal字體粗細而言。
另外在制作網(wǎng)頁(yè)時(shí)也可以設置值為100、200、300、400、500、600、700、800、900，它們分別表示字體的粗細，是對字體粗細的一種量化方式，值越大就表示越粗，相反就表示越細。
【示例】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<body>標簽中輸入以下內容：
<p>明月幾時(shí)有？ 文字粗細是normal</p>
<h1>明月幾時(shí)有？文字粗細是700</h1>
<div>明月幾時(shí)有？ 文字粗細是bolder</div>
<p class="bold">明月幾時(shí)有？ 文字粗細是bold</p>
在<head>標簽內添加<style type="text/css">標簽，定義一個(gè)內部樣式表，然后輸入下面樣式，分別定義段落文本、一級標題、<div>標簽包含字體的粗細效果，同時(shí)定義一個(gè)粗體樣式類(lèi)。
p { font-weight: normal } /*等于400*/
h1 { font-weight: 700 } /*等于bold*/
div{ font-weight: bolder } /*可能為500*/.
bold { font-weight:bold; } /*加粗顯示*/設置字體的粗細提示：設置字體粗細也可以稱(chēng)為定義字體的重量。對于中文網(wǎng)頁(yè)設計來(lái)說(shuō)，一般僅用到bold（加粗）、normal（普通）兩個(gè)屬性值即可。
在制作網(wǎng)頁(yè)的時(shí)候，CSS使用font-style屬性來(lái)定義字體傾斜效果，該屬性用法如下：font-style : normal | italic | oblique其中，normal表示默認值，即正常的字體；italic表示斜體；oblique表示傾斜的字體。italic和oblique兩個(gè)取值只能在英文等西方文字中有效。
【示例】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<head>標簽內添加<styletype= "text/css">標簽，定義一個(gè)內部樣式表，輸入下面樣式，定義一個(gè)斜體樣式類(lèi)。
.italic
{font-size:24px;
font-style:italic; /*斜體*/}
然后在<body>標簽中輸入一行段落文本，并把斜體樣式類(lèi)應用到該段落文本中。
<p>設置<span class="italic">文字斜體
</span></p>
CSS使用text-decoration屬性來(lái)定義字體下劃線(xiàn)、刪除線(xiàn)和頂劃線(xiàn)效果，該屬性用法如下：text-decoration : none || underline || overline || line-through || blink其中，none表示默認值，即無(wú)裝飾字體；un-derline表示下劃線(xiàn)效果；line-through表示刪除線(xiàn)效果，overline表示頂劃線(xiàn)效果；blink表示閃爍效果。
【示例】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<head>標簽內添加<styletype= "text/css">標簽，定義一個(gè)內部樣式表，然后輸入下面樣式，定義3個(gè)裝飾字體樣式類(lèi)。
.underline {text-decoration:underline;} /*下劃線(xiàn)樣式類(lèi)*/
.overline {text-decoration:overline;} /*頂劃線(xiàn)樣式類(lèi)*/
.line-through {text-decoration:line-through;} /*刪除線(xiàn)樣式類(lèi)*/
然后在<body>標簽中輸入3行段落文本，并分別應用上面的裝飾類(lèi)樣式。
<p class="underline">設置下劃線(xiàn)</p>
<p class="overline">設置頂劃線(xiàn)</p>
<p class="line-through">設置刪除線(xiàn)</p>
CSS使用font-variant屬性來(lái)定義字體大小效果，該屬性用法如下：font-variant : normal | small-caps其中，normal表示默認值，即正常的字體；small-caps表示小型的大寫(xiě)字母字體。
【示例1】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<head>標簽內添加<styletype= "text/css">標簽，定義一個(gè)內部樣式表，然后輸入下面樣式，定義一個(gè)類(lèi)樣式。
.small-caps {/*小型大寫(xiě)字母樣式類(lèi)*/ font-variant:small-caps;}
然后在<body>標簽中輸入一行段落文本，并應用上面定義的類(lèi)樣式。
<p class="small-caps">font-variant </p>
注意：font-variant僅支持英文為代表的西文字體，中文字體沒(méi)有大小寫(xiě)效果區分。如果設置了小型大寫(xiě)字體，但是該字體沒(méi)有找到原始小型大寫(xiě)字體，則瀏覽器會(huì )模擬一個(gè)。例如，可通過(guò)使用一個(gè)常規字體，并將其小寫(xiě)字母替換為縮小過(guò)的大寫(xiě)字母。
【拓展】CSS還定義了一個(gè)text-transform屬性，該屬性也能夠定義字體大小寫(xiě)效果。不過(guò)該屬性主要定義單詞大小寫(xiě)樣式，用法格式如下：text-transform : none | capitalize | uppercase | lowercase其中，none表示默認值，無(wú)轉換發(fā)生；capi-talize表示將每個(gè)單詞的第一個(gè)字母轉換成大寫(xiě)，其余無(wú)轉換發(fā)生；uppercase表示把所有字母都轉換成大寫(xiě)；lowercase表示把所有字母都轉換成小寫(xiě)。
【示例2】新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<head>標簽內添加<style type="text/css">標簽，定義一個(gè)內部樣式表，然后輸入下面樣式，定義3個(gè)類(lèi)樣式。
.capitalize {/ text-transform:capitalize; /*首字母大寫(xiě)*/}
.uppercase { text-transform:uppercase; /*全部大寫(xiě)*/}
.lowercase { text-transform:lowercase; /*全部小寫(xiě)*/}
然后在<body>標簽中輸入3行段落文本，并分別應用上面定義的類(lèi)樣式。
<p class="capitalize">
text-transform:capitalize;</p>
<p class="uppercase">
text-transform:uppercase;
</p><p class="lowercase">
text-transform:lowercase;</p>
分別在IE和Firefox瀏覽器中預覽，則會(huì )發(fā)現：IE認為只要是單詞就把首字母轉換為大寫(xiě)；而Firefox認為只有單詞通過(guò)空格間隔之后，才能夠成為獨立意義上的單詞，所以幾個(gè)單詞連在一起時(shí)就算作一個(gè)詞。
當前文章標題：如何在網(wǎng)頁(yè)制作時(shí)使用CSS定義文本樣式（二）
當前URL：http://amzcoolest.com/news/wzzz/3063.html
