SAMPLE4.2任務(wù)二美化“關(guān)于我們”文本內(nèi)容項目四使用CSS樣式美化頁面——簡單快捷規(guī)范制作頁面通常頁面都是使用div控制頁面結(jié)構(gòu)，然后再通過使用CSS樣式控制頁面顯示效果，本任務(wù)將使用CSS美化頁面中的文本內(nèi)容，完成頁面效果如圖4-37所示。圖4-37任務(wù)描述—分析“關(guān)于我們”頁面結(jié)構(gòu)1技術(shù)引入—使用CSS控制字體234

任務(wù)實施—美化頁面文字

新手試煉—制作網(wǎng)站公告任務(wù)二1任務(wù)描述—分析“關(guān)于我們”頁面結(jié)構(gòu)任務(wù)描述——分析“關(guān)于我們”頁面結(jié)構(gòu)接下來制作“關(guān)于我們”頁面中的文本內(nèi)容。頁面中一共包含6個DIV,頁面效果如圖4-38所示。通過使用類樣式完成對頁面中文字的美化操作。圖4-382技術(shù)引入—使用CSS控制字體

id樣式通常智能用來控制div，對于頁面中的其他元素就無能為力了。因為，就需要使用類（class）選擇符，來達到特殊效果的設(shè)置。類選擇符用來為一系列的標(biāo)簽定義相同的顯示樣式，其基本語法如下。使用CSS控制字體.類名稱{屬性：屬性值；}類名稱標(biāo)書類選擇符的名稱，其基本名稱由CSS定義者自己命名。在定義類選擇符時，需要在類名稱前面加一個英文句點（.）。.font01{color：black;}.font02{font-size:12px;}

以上定義了兩個類選擇符，分別是font01和font02。類的名稱可以是任意英文字符串，也可以是以英文字母開頭與數(shù)字組合的名稱，統(tǒng)稱情況下，這些名稱都是其功效與功能的簡要縮寫?？梢允褂肏TML標(biāo)簽的Class屬性來飲用類選擇符。使用CSS控制字體.<pclass=”font01”>class屬性地被用來飲用類選擇符的屬性</p>以上所定義的類選擇符被應(yīng)用于指定的HTML標(biāo)簽中（如<p>標(biāo)簽），同時它還可以應(yīng)用于不同的HTML標(biāo)簽中，使其顯示相同的樣式。類CSS樣式在網(wǎng)頁中的應(yīng)用非常廣泛，可以應(yīng)用于頁面中的任意元素，并且可以多次應(yīng)用。需要注意的是，類CSS樣式必須應(yīng)用于網(wǎng)頁中的元素，才能對該元素起作用，而標(biāo)簽CSS樣式和IDCSS樣式都是針對網(wǎng)頁中特定元素的，并不需要應(yīng)用。<pclass="font01">段落樣式</p><h1class="font01">標(biāo)題樣式</h1>提示：在新建CSS樣式時，在類CSS樣式名稱前有一個默認(rèn)的“.”。這個“.”說明了此CSS樣式是一個類CSS樣式（class），根據(jù)CSS樣式可以在一個HTML元素中被多次調(diào)用。CSS所支持的字體樣式主要包含字體、字號、顏色等基本屬性其他字體的微調(diào)控制方式，在了解這些屬性之前，還是先來看一下CSS所支持的字體屬性如表4-1所示。使用CSS控制字體表4-1CSS所支持的字體屬性屬性描述可用值注釋color用于設(shè)置文字的顏色color顏色font-family用于設(shè)置文字名稱，可以使用多個名稱使用逗號分隔，瀏覽器按照先后順序依次使用可用字體font-name字體font-size用于設(shè)置文字的尺寸Inheritxx-small

x-small

small

medium

large

x-large

xx-large

smaller

larger

length%繼承絕對字體尺寸。根據(jù)對象字體進行調(diào)整。最小絕對字體尺寸。根據(jù)對象字體進行調(diào)整。較小絕對字體尺寸。根據(jù)對象字體進行調(diào)整。小默認(rèn)值。絕對字體尺寸。根據(jù)對象字體進行調(diào)整。正常絕對字體尺寸。根據(jù)對象字體進行調(diào)整。大絕對字體尺寸。根據(jù)對象字體進行調(diào)整。較大絕對字體尺寸。根據(jù)對象字體進行調(diào)整。最大相對字體尺寸。相對于父對像字體尺寸進行相對減小。使用成比例的em單位計算相對字體尺寸。相對于父對像字體尺寸進行相對增大。使用成比例的em單位計算長度表示法使用CSS控制字體font-size用于設(shè)置文字的尺寸Inheritxx-small

x-small

small

medium

large

x-large

xx-large

smaller

larger

length%繼承絕對字體尺寸。根據(jù)對象字體進行調(diào)整。最小絕對字體尺寸。根據(jù)對象字體進行調(diào)整。較小絕對字體尺寸。根據(jù)對象字體進行調(diào)整。小默認(rèn)值。絕對字體尺寸。根據(jù)對象字體進行調(diào)整。正常絕對字體尺寸。根據(jù)對象字體進行調(diào)整。大絕對字體尺寸。根據(jù)對象字體進行調(diào)整。較大絕對字體尺寸。根據(jù)對象字體進行調(diào)整。最大相對字體尺寸。相對于父對像字體尺寸進行相對減小。使用成比例的em單位計算相對字體尺寸。相對于父對像字體尺寸進行相對增大。使用成比例的em單位計算長度表示法font-style用于設(shè)置文字樣式normalitalicoblique正常斜體斜體font-weight用于設(shè)置文字的加粗樣式normalboldbolderlighter100200300400500600700800900正常等同于400粗體等同于700更粗更細(xì)100~900為字體粗細(xì)值表4-1CSS所支持的字體屬性使用CSS控制字體表4-1CSS所支持的字體屬性font-variant用于設(shè)置英文文本為小型的大寫字母字體normalsmall-caps使用正常小寫字母定義小型的大寫字母text-transform用于設(shè)置英方文本的大小寫方式nonecapitalizeuppercaselowercase不更改任何效果每個單詞的第一個字母大寫將所有小寫字母更改為大寫將所有大寫字母更改為小寫text-decoration用于設(shè)置文本的下劃線noneunderlineline-throughoverline不顯示任何效果在文本底端之下畫一條線在文本中間畫一條線在文本頂端之上畫一條線了解id選擇符CSS的具體代碼如下。在正常情況下，id的屬性值在文檔中具有唯一性，只有具備id屬性的標(biāo)簽，才可以使用id選擇符定義樣式。同時idCSS樣式是網(wǎng)頁中唯一的特定針對id名稱的元素，盡量不要在一個網(wǎng)頁中設(shè)置多處id名稱相同的元素，idCSS樣式的命名必須以井號（#）開頭，并且可以包含任何字母和數(shù)字組合。#menu{width:120px;height:100%;text-align:right;padding-right:20px;font-size:14px;font-weight:bold;line-height:50px;color:#FFF;background-color:#F60;position:absolute;top:0px;right:0px;}提示：id選擇符在頁面的標(biāo)簽中只能使用一次；id選擇符比類選擇符具有更高的優(yōu)先級別，當(dāng)id選擇符與類選擇符發(fā)生沖突時，將會優(yōu)先使用id選擇符。03在站點名稱位置單擊右鍵，在彈出的快捷菜單中選擇“新建文件”命令，新建一個index.html文件，如圖2-18所示。練一練——制作網(wǎng)站歡迎頁面01執(zhí)行“文件>打開”命令，打開頁面“素材\項目四\4-3.html”，效果如圖4-39所示。切換到4-3.css文件中，定義一個名為.font01的類CSS樣式，如圖4-40所示。02執(zhí)行“窗口>屬性”命令，將“屬性”面板打開，如圖4-41所示。選中頁面中的welcome文字，在“屬性”面板上“類”下拉列表中選擇.font01，頁面如圖4-42所示。圖4-39圖4-40圖4-41圖4-4203在站點名稱位置單擊右鍵，在彈出的快捷菜單中選擇“新建文件”命令，新建一個index.html文件，如圖2-18所示。練一練——制作網(wǎng)站歡迎頁面03切換到4-3.css文件中，定義一個名為.font02的類CSS樣式，如圖4-43所示選中頁面底部文字，在“屬性”面板上“類”下拉列表中選擇.font01，頁面如圖4-44所示。04執(zhí)行“文件>保存”命令，保存頁面和外部CSS樣式文件，在瀏覽器中預(yù)覽頁面，效果如圖4-45所示。圖4-43圖4-44圖4-453任務(wù)實施—美化頁面文字美化頁面文字01執(zhí)行“文件>打開”命令，將about1.html文件打開。在源代碼視圖中，將光標(biāo)移動到top后面，單擊“插入”面板上的Div按鈕，插入id為crumbs的div，如圖4-46所示。在代碼中輸入如圖4-47所示文本。

02切換到div.css中，創(chuàng)建如圖4-48所示id樣式。頁面效果如圖4-49所示。圖4-46圖4-47圖4-48圖4-49圖4-29美化頁面文字03繼續(xù)在crumbs后插入一個id為main-bg的div。在div.css中創(chuàng)建一個如圖4-50所示的id樣式。繼續(xù)在main-bg中插入一個div，如圖4-51所示。圖4-50圖4-5104在div.css中創(chuàng)建類樣式，如圖4-52所示。選中新建div，在“屬性”面板總為其制定類樣式，如圖4-53所示。圖4-52圖4-53圖4-56美化頁面文字05繼續(xù)在div中插入一個div，并修改文字內(nèi)容如圖4-54所示。在div.css中創(chuàng)建一個名為ind-title2的類樣式，如圖4-55所示。06在“屬性”面板中將ind-title2樣式指定給新建div，如圖4-56所示。應(yīng)用樣式后的頁面效果如圖4-57所示。提示：除了使用“屬性”面板應(yīng)用類樣式外，用戶還可以直接在html代碼中輸入代碼，實現(xiàn)css的應(yīng)用。圖4-54圖4-55圖4-56圖4-57圖4-56美化頁面文字07繼續(xù)在main-bg后插入一個id為guide-left的div，并修改文字內(nèi)容如圖4-58所示。在div.css中創(chuàng)建如圖4-59所示樣式。08應(yīng)用央視后的效果如圖4-60所示。繼續(xù)插入一個id為guide-right的div，修改為內(nèi)容。在div.css文件中創(chuàng)建如圖4-61所示id樣式。圖4-58圖4-59圖4-60圖4-61圖4-56美化頁面文字09創(chuàng)建如圖4-62所示類樣式。并將其應(yīng)用到guide-right上，完成效果如圖4-63所示。10在div.css中創(chuàng)建如圖4-64所示樣式，觀察頂部導(dǎo)航圖片顯示效果如圖4-65所示。圖4-62圖4-63圖4-64圖4-65圖4-56美化頁面文字11執(zhí)行“文件>保存”命令，將文件保存為about2.html。單擊軟件界面右下角的“實時預(yù)覽”按，選擇在瀏覽器中預(yù)覽，預(yù)覽效果如圖4-66所示。圖4-664新手試煉——制作網(wǎng)站公告

文本的屬性非常多，通過使用CSS，可以基本控制文本的樣式。接下來通過一個案例，講解使用CSS定義字間距和行間距的方法。

01執(zhí)行“文件>打開”名列，將素材文件打開。02定義名為font01的類樣式。并應(yīng)用到文字標(biāo)題上。

03繼續(xù)創(chuàng)建一個名為font02的類樣式，并將其應(yīng)用到正文文本。04完成網(wǎng)站公告的制作，預(yù)覽頁面，觀察文本效果。PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/資料下載：/ziliao/