1、,第4章 CSS樣式基礎(chǔ),本章主要講述了CSS樣式的應(yīng)用方法，現(xiàn)如今網(wǎng)頁(yè)的排版格式越來(lái)越復(fù)雜，很多效果需要通過(guò)CSS來(lái)實(shí)現(xiàn)，現(xiàn)代網(wǎng)頁(yè)制作離不開(kāi)CSS技術(shù)，采用CSS技術(shù)可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制，只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的編輯，就可以改變同一頁(yè)面中的不同部分或頁(yè)數(shù)不同頁(yè)面的外觀和格式，用CSS不僅可以做出美觀工整令瀏覽者賞心悅目的網(wǎng)頁(yè)，還能給網(wǎng)頁(yè)添加許多神奇的效果。,4.1 CSS概述,CSS是由Cascading Style Sheets縮寫(xiě)來(lái)的。是一種對(duì)Web文檔添加樣式的簡(jiǎn)單機(jī)制，是一種表現(xiàn)HTML和XML等文件樣式的計(jì)算機(jī)語(yǔ)言，是一種叫做表樣

2、式的技術(shù)。對(duì)于設(shè)計(jì)者來(lái)說(shuō)它是一個(gè)非常靈活的工具，不必再把繁雜的樣式定義編寫(xiě)在文檔結(jié)構(gòu)中，可以將有關(guān)文檔的樣式指定的內(nèi)容全部脫離出來(lái)，在標(biāo)題中定義、在行內(nèi)定義，甚至作為外部樣式表文件供給HTML頁(yè)面調(diào)用。,4.1.1 CSS的特點(diǎn) 4.1.2 CSS的類型 4.1.3 CSS的基本語(yǔ)法,4.2 CSS樣式表的基本用法,要想在XHTML中應(yīng)用CSS樣式，首先要考慮的是選擇合適的選擇符，選擇符是CSS控制XHTML文檔中對(duì)象的一種方式，用來(lái)告訴瀏覽器這段樣式將應(yīng)用到哪個(gè)對(duì)象。,4.2.1 如何在HTML內(nèi)插入樣式表 在CSS樣式表中，最接近目標(biāo)的樣式定義優(yōu)先權(quán)越高，高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未

3、重疊定義但覆蓋重疊的定義。 4.2.2 CSS樣式表規(guī)則 CSS規(guī)則就是所有樣式表的基礎(chǔ)，每一條規(guī)則都是一條單獨(dú)的語(yǔ)句，它確定應(yīng)該如何設(shè)計(jì)樣式，以及應(yīng)該如何應(yīng)用這些樣式。因此，樣式表由規(guī)則列表組成，瀏覽器用它來(lái)確定頁(yè)面的顯示效果，甚至是聲音效果。 CSS由兩部分組成：選擇符和聲明，其中聲明由屬性和屬性值組成，所以簡(jiǎn)單的CSS規(guī)則如下：,4.3 CSS樣式表分類,CSS樣式表的分類可以分成三種：內(nèi)聯(lián)樣式(Inline Style)、內(nèi)部樣式表(Internal Style Sheet)和外部樣式表(External Style Sheet)。 4.3.1 內(nèi)聯(lián)樣式 內(nèi)聯(lián)樣式僅僅是XHTML標(biāo)簽對(duì)

4、于style屬性的支持所產(chǎn)生的一種CSS樣式表編寫(xiě)方式，并不符合表現(xiàn)與內(nèi)容分離的設(shè)計(jì)模式，使用內(nèi)聯(lián)樣式與表格式布局從代碼結(jié)構(gòu)上來(lái)說(shuō)完全相同，僅僅利用了CSS對(duì)于元素的精確控制優(yōu)勢(shì)，并沒(méi)能很好的實(shí)現(xiàn)表現(xiàn)與內(nèi)容的分離，所以這種書(shū)寫(xiě)方式應(yīng)當(dāng)盡量少用。 4.3.2 內(nèi)部樣式表 內(nèi)部樣式表是CSS樣式表的初級(jí)應(yīng)用形式，它只針對(duì)當(dāng)前頁(yè)面有效，不能跨頁(yè)面執(zhí)行，因此達(dá)不到CSS代碼多用的目的，在實(shí)際的大型網(wǎng)站開(kāi)發(fā)中，很少會(huì)用得到內(nèi)部樣式表。 4.3.3 外部樣式表 外部樣式表是CSS樣式表中較為理想的一種形式。將CSS樣式表代碼單獨(dú)編寫(xiě)在一個(gè)獨(dú)立文件之中，由網(wǎng)頁(yè)進(jìn)行調(diào)用，多個(gè)網(wǎng)頁(yè)可以調(diào)用同一個(gè)外部樣式表文件，

5、因此能夠?qū)嵱么a的最大化多用及網(wǎng)站文件的最優(yōu)化配。,4.4 CSS文檔結(jié)構(gòu),CSS通過(guò)與XHTML的文檔結(jié)構(gòu)相對(duì)應(yīng)的選擇器（selector）來(lái)達(dá)到控制頁(yè)面表現(xiàn)的目的，而文檔結(jié)構(gòu)不僅僅在CSS的應(yīng)用上非常重要，對(duì)于行為層同樣也非常重要。,4.4.1 結(jié)構(gòu) 4.4.2 繼承 4.4.3 特殊性 4.4.4 層疊 4.4.5 重要性,4.5 單位和值,在CSS選擇符中提到過(guò)，每一個(gè)CSS屬性的值均由兩種指定形式，一種是指定值范圍，如float屬性，只可能應(yīng)用left，right，none三種值，另一種為數(shù)值，如width能夠使用09999px或其他數(shù)學(xué)單位來(lái)指定，除了px像素單位之外，CSS提供了

6、許多其他類型的數(shù)學(xué)單位幫助進(jìn)行值的定義。,4.5.1 顏色值 4.5.2 定義值 4.5.3 群選擇符 4.5.4 派生選擇符 4.5.5 id選擇符,4.5.6 類選擇符 類型選擇符(Type Selectors)，以文檔語(yǔ)言對(duì)象類型作為選擇符，即以HTML標(biāo)簽（或叫做標(biāo)記、tag）作為選擇符，class選擇符與HTML選擇器實(shí)現(xiàn)了讓同類標(biāo)簽共享同一樣式 4.5.7 定義鏈接的樣式表 許多網(wǎng)站使用一個(gè)或多個(gè)全局樣式表，網(wǎng)站上每個(gè)頁(yè)面都與它相鏈接，使用全局中樣式表后，用戶改變某個(gè)文件，這個(gè)文件將影響用戶網(wǎng)站上每個(gè)頁(yè)面的外觀,4.6 課堂練習(xí),在網(wǎng)頁(yè)設(shè)計(jì)中利用CSS樣式起到了關(guān)鍵的作用，通過(guò)前面

7、的學(xué)習(xí)和了解，接下來(lái)我們將學(xué)到的知識(shí)運(yùn)用到實(shí)踐中。,4.6.1 設(shè)計(jì)分析 4.6.2 制作步驟 4.6.3 案例總結(jié),視頻位置：光盤視頻第4章4-6-1.swf 源文件位置：光盤源文件第4章4-6-1.html,4.7 課堂討論,本章向讀者講述了CSS樣式的就出，那么想知道通過(guò)學(xué)習(xí)本章你對(duì)CSS樣式基礎(chǔ)掌握的如何呢？嘗試回答下面的問(wèn)題吧。 4.7.1 問(wèn)題1 CSS能做什么 CSS樣式表可以用來(lái)改變從文本樣式到頁(yè)面布局的一切，并且能夠與JavaScript結(jié)合產(chǎn)生動(dòng)態(tài)顯示效果。文本格式和顏色、圖形外觀和布局、繪制頁(yè)面各部分的邊框和動(dòng)態(tài)操作。 4.7.2 問(wèn)題2CSS和HTML區(qū)別 超文本標(biāo)記語(yǔ)言（HTML，Hypertext Markup Language）由標(biāo)記文檔內(nèi)特定元素的一系列標(biāo)簽組成。這些元素都具有默認(rèn)表示樣式。默認(rèn)表示樣式由瀏覽器提供，基于HTML的正式規(guī)范。用戶通過(guò)鏈接到樣式表，甚至通過(guò)在HTML文件內(nèi)包括樣式表，可以對(duì)HTML頁(yè)面應(yīng)用樣式表，這樣可以重新定義每個(gè)元素的表示樣式。 HTML頁(yè)面可以包含設(shè)置表達(dá)樣式的屬性和標(biāo)簽，但是與CSS比較，它們的功能和效果有限。樣式表可以與HTML表達(dá)標(biāo)記一起使用，例如標(biāo)簽或者color=”red”屬性，或者可以完全