《網(wǎng)頁(yè)制作三合一教程》項(xiàng)目七 使用CSS樣式美化網(wǎng)頁(yè)

網(wǎng)頁(yè)制三合一項(xiàng)目教程了解與創(chuàng)建CSS樣式設(shè)置CSS樣式表任務(wù)一任務(wù)二項(xiàng)目七

使用CSS樣式美化網(wǎng)頁(yè)層疊樣式表的管理任務(wù)三一、了解CSS的基本語(yǔ)法二、在網(wǎng)頁(yè)中引用CSS的方式任務(wù)一

了解與創(chuàng)建CSS樣式三、新建CSS樣式

在默認(rèn)狀態(tài)下，新建的空白文檔中沒(méi)有定義任何CSS樣式，在“屬性”面板的“樣式”下拉列表中僅顯示“無(wú)”選項(xiàng)，即沒(méi)有CSS樣式。本任務(wù)首先了解CSS的基本知識(shí)，然后重點(diǎn)介紹如何創(chuàng)建CSS新樣式。一、了解CSS的基本語(yǔ)法

CSS的樣式規(guī)則由兩部分組成：選擇器和聲明。選擇器{屬性:值}選擇器就是樣式的名稱(chēng)，包括自定義的類(lèi)（也稱(chēng)“類(lèi)樣式”）、HTML標(biāo)簽、ID和復(fù)合內(nèi)容。

自定義的類(lèi)：可以將樣式屬性應(yīng)用到任何文本范圍或文本塊中。所有類(lèi)樣式均以句點(diǎn)“．”開(kāi)頭。例如，可以創(chuàng)建名稱(chēng)為.red的類(lèi)樣式，設(shè)置其color屬性為紅色，然后將該樣式應(yīng)用到一部分已定義樣式的段落文本中。HTML標(biāo)簽：可以重定義特定標(biāo)簽（如p或h1）的格式。創(chuàng)建或更改h1標(biāo)簽的CSS規(guī)則時(shí)，所有用h1標(biāo)簽設(shè)置了格式的文本都會(huì)立即更新。ID和復(fù)合內(nèi)容：可以重定義特定元素組合的格式，或其他CSS允許的選擇器形式的格式。例如，a:link就是定義未單擊過(guò)的超鏈接的高級(jí)樣式。一、了解CSS的基本語(yǔ)法

而聲明則用于定義樣式元素。聲明由兩部分組成：屬性和值。在下面的示例中，H1是選擇器，介于花括號(hào)（{}）之間的所有內(nèi)容都是聲明。H1{font-size:16pixels；font-family:Helvetica；font-weight:bold；}二、在網(wǎng)頁(yè)中引用CSS的方式

當(dāng)CSS與網(wǎng)頁(yè)中的內(nèi)容建立關(guān)系時(shí)，即可稱(chēng)為CSS樣式的引用。CSS樣式的引用主要有以下幾種方式：1．直接添加在HTML標(biāo)記中

這是應(yīng)用CSS最簡(jiǎn)單的方法，語(yǔ)法如下：<標(biāo)記style="CSS屬性：屬性值">內(nèi)容</標(biāo)記>2．將樣式表內(nèi)嵌到HTML文件中

將CSS樣式代碼添加到HTML的<style></style>標(biāo)簽之間，然后插入到網(wǎng)頁(yè)的頭部位置，如圖7-1所示。二、在網(wǎng)頁(yè)中引用CSS的方式圖7-1內(nèi)嵌樣式二、在網(wǎng)頁(yè)中引用CSS的方式3．將外部樣式表鏈接到HTML文件上圖7-2外鏈樣式二、在網(wǎng)頁(yè)中引用CSS的方式4．聯(lián)合使用樣式表圖7-3聯(lián)合使用樣式表三、新建CSS樣式下面將介紹如何在DreamweaverCS6中創(chuàng)建CSS新樣式，其具體操作方法如下：圖7-4單擊“新建CSS規(guī)則”按鈕

三、新建CSS樣式圖7-5“新建CSS規(guī)則”對(duì)話(huà)框三、新建CSS樣式圖7-6“將樣式表文件另存為”對(duì)話(huà)框

三、新建CSS樣式圖7-7設(shè)置CSS規(guī)則屬性任務(wù)二

設(shè)置CSS樣式表六、設(shè)置“列表”屬性二、設(shè)置“背景”屬性三、設(shè)置“區(qū)塊”屬性四、設(shè)置“方框”屬性九、設(shè)置“過(guò)渡”屬性一、設(shè)置“類(lèi)型”屬性七、設(shè)置“定位”屬性八、設(shè)置“擴(kuò)展”屬性五、設(shè)置“邊框”屬性CSS樣式主要集中在“CSS規(guī)則定義”對(duì)話(huà)框的“分類(lèi)”列表框中，共有“類(lèi)型”、“背景”、“區(qū)塊”、“方框”、“邊框”、“列表”、“定位”、“擴(kuò)展”和“過(guò)渡”九大類(lèi)。下面將學(xué)習(xí)如何設(shè)置CSS樣式表。一、設(shè)置“類(lèi)型”屬性圖7-8單擊“新建CSS規(guī)則”按鈕

一、設(shè)置“類(lèi)型”屬性

圖7-9“新建CSS規(guī)則”對(duì)話(huà)框一、設(shè)置“類(lèi)型”屬性圖7-10設(shè)置“類(lèi)型”屬性

一、設(shè)置“類(lèi)型”屬性圖7-11選擇“font01”樣式

一、設(shè)置“類(lèi)型”屬性圖7-12預(yù)覽應(yīng)用樣式效果

一、設(shè)置“類(lèi)型”屬性

圖7-13為其他表格應(yīng)用樣式二、設(shè)置“背景”屬性圖7-14單擊“新建CSS規(guī)則”按鈕二、設(shè)置“背景”屬性圖7-15“新建CSS規(guī)則”對(duì)話(huà)框二、設(shè)置“背景”屬性圖7-16單擊“瀏覽”按鈕二、設(shè)置“背景”屬性圖7-17“選擇圖像源文件”對(duì)話(huà)框二、設(shè)置“背景”屬性圖7-18設(shè)置背景圖片重復(fù)二、設(shè)置“背景”屬性圖7-19選擇bg01樣式二、設(shè)置“背景”屬性圖7-20查看屬性設(shè)置二、設(shè)置“背景”屬性圖7-21預(yù)覽應(yīng)用樣式效果三、設(shè)置“區(qū)塊”屬性圖7-22設(shè)置CSS規(guī)則屬性三、設(shè)置“區(qū)塊”屬性圖7-23設(shè)置“區(qū)塊”屬性

三、設(shè)置“區(qū)塊”屬性圖7-24選擇wenzi樣式三、設(shè)置“區(qū)塊”屬性圖7-25預(yù)覽應(yīng)用樣式效果四、設(shè)置“方框”屬性圖7-26設(shè)置CSS規(guī)則屬性

四、設(shè)置“方框”屬性圖7-27設(shè)置“方框”屬性四、設(shè)置“方框”屬性圖7-28選擇fk樣式

四、設(shè)置“方框”屬性圖7-29查看應(yīng)用樣式效果五、設(shè)置“邊框”屬性圖7-30設(shè)置CSS規(guī)則屬性

五、設(shè)置“邊框”屬性圖7-31設(shè)置“邊框”屬性五、設(shè)置“邊框”屬性圖7-32選擇bk樣式

五、設(shè)置“邊框”屬性圖7-33預(yù)覽應(yīng)用樣式效果六、設(shè)置“列表”屬性

“列表”屬性主要用于定義列表的各種屬性，如列表項(xiàng)目符號(hào)、位置等，其屬性項(xiàng)如圖7-34所示。其中：List-style-type（類(lèi)型）：用于設(shè)置項(xiàng)目列表和編號(hào)列表的符號(hào)。List-style-image（項(xiàng)目符號(hào)圖像）：用于為項(xiàng)目列表自定義符號(hào)，可以選擇使用圖像作為項(xiàng)目列表的符號(hào)。List-style-Position（位置）：用于設(shè)置列表項(xiàng)文本是否換行和縮進(jìn)，如果選擇“外”選項(xiàng)，則縮進(jìn)文本；如果選擇“內(nèi)”選項(xiàng)，則文本換行到左邊距。六、設(shè)置“列表”屬性圖7-34“列表”屬性七、設(shè)置“定位”屬性

“定位”屬性主要用于定義層的大小、位置、可見(jiàn)性、溢出方式和剪輯等屬性。這些屬性項(xiàng)主要用于設(shè)置層的屬性，或?qū)⑺x文本更改為新層，其中：Position（類(lèi)型）：用于設(shè)置瀏覽器定位層的方式。Visibility（顯示）：用于設(shè)置內(nèi)容的可見(jiàn)性，其中包括“繼承”、“可見(jiàn)”和“隱藏”三種方式。Width（寬）：用于設(shè)置層的寬度。Height（高）：用于設(shè)置層的高度。Z-Index（Z軸）：用于設(shè)置內(nèi)容的疊放順序，其中的數(shù)值可以設(shè)置為正，也可以設(shè)置為負(fù)。Overflow（溢位）：用于設(shè)置當(dāng)容器（如DIV或P）的內(nèi)容超出容器的顯示范圍時(shí)的處理方式，可以選擇“可見(jiàn)”、“隱藏”、“滾動(dòng)”和“自動(dòng)”選項(xiàng)進(jìn)行處理。Placement（置入）：用于設(shè)置內(nèi)容塊的位置和大小。Clip（裁切）：用于設(shè)置內(nèi)容的可見(jiàn)部分。八、設(shè)置“擴(kuò)展”屬性

“擴(kuò)展”屬性用于設(shè)置打印頁(yè)面時(shí)分頁(yè)、指針樣式和濾鏡特殊效果，該類(lèi)屬性的屬性項(xiàng)如圖7-36所示。其中：break-before（之前）：用于設(shè)置打印時(shí)在樣式所控制的元素對(duì)象之前強(qiáng)制分頁(yè)。break-after（之后）：用于設(shè)置打印時(shí)在樣式所控制的元素對(duì)象之后強(qiáng)制分頁(yè)。Cursor（光標(biāo)）：用于設(shè)置鼠標(biāo)指針懸停在樣式所控制的元素對(duì)象之上時(shí)的形狀。Filter（過(guò)濾器）：用于設(shè)置樣式所控制元素對(duì)象的特殊效果。八、設(shè)置“擴(kuò)展”屬性圖7-36“擴(kuò)展”屬性九、設(shè)置“過(guò)渡”屬性

使用CSS過(guò)渡效果面板可將平滑屬性變化更改應(yīng)用于基于CSS的頁(yè)面元素，以響應(yīng)觸發(fā)器事件，如懸停、點(diǎn)擊和聚焦，如圖7-37所示。圖7-37“過(guò)渡”屬性任務(wù)三

層疊樣式表的管理三、刪除CSS層疊樣式二、鏈接外部CSS樣式表文件一、編輯CSS層疊樣式

對(duì)于已經(jīng)創(chuàng)建的CSS樣式，可以對(duì)其進(jìn)行編輯修改或刪除重新創(chuàng)建等操作，也可以對(duì)CSS樣式進(jìn)行導(dǎo)入或?qū)С龅炔僮?。一、編輯CSS層疊樣式圖7-38單擊“編輯樣式”按鈕

一、編輯CSS層疊樣式

圖7-39修改CSS樣式二、鏈接外部CSS樣式表文件圖7-40