第9章-CSS樣式基礎(chǔ)

9.1

了解CSS樣式CSS樣式是對(duì)HTML語(yǔ)言的有效補(bǔ)充，通過(guò)使用CSS樣式，能夠節(jié)省許多重復(fù)性的格式設(shè)置，例如網(wǎng)頁(yè)文字的大小和顏色等。通過(guò)CSS樣式可以輕松地設(shè)置網(wǎng)頁(yè)元素的顯示位置和格式，還可以使用CSS3.0新增的樣式屬性，在網(wǎng)頁(yè)中實(shí)現(xiàn)動(dòng)態(tài)的交互效果，大大提升網(wǎng)頁(yè)的美觀性。為什么要使用CSS樣式

在HTML中，雖然有<b>、<u>、<i>和<p>等標(biāo)簽可以控制文本或圖像等內(nèi)容的顯示效果，但這些標(biāo)簽的功能非常有限，而且對(duì)有些特定的網(wǎng)站需求，用這些標(biāo)簽是不能夠完成的，所以需要引入CSS樣式。

CSS樣式的版本發(fā)展隨著CSS的廣泛應(yīng)用，CSS技術(shù)也越來(lái)越成熟。CSS現(xiàn)在有3個(gè)不同層次的標(biāo)準(zhǔn)，即CSS1、CSS2和CSS3。CSS1主要定義了網(wǎng)頁(yè)的基本屬性，如字體、顏色和空白邊等。CSS2在此基礎(chǔ)上添加了一些高級(jí)功能，如浮動(dòng)和定位，以及一些高級(jí)選擇器，如子選擇器和相鄰選擇器等。CSS3開(kāi)始遵循模塊化開(kāi)發(fā)，這將有助于理清模塊化規(guī)范之間的不同關(guān)系，減少完整文件的大小。

CSS3.0的發(fā)展

目前CSS3.0規(guī)范尚處于完善之中，因此瀏覽器的支持程度各有不同。為了讓用戶能夠體驗(yàn)到CSS3.0的好處，各主流瀏覽器都定義了自己的私有屬性。CSS3.0開(kāi)始遵循模塊化的開(kāi)發(fā)。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，CSS3.0把它分解為多個(gè)小的模塊，這樣，有助于理清各個(gè)模塊規(guī)范之間的關(guān)系。瀏覽器對(duì)CSS3.0的支持情況盡管CSS3.0的很多新的特性很受開(kāi)發(fā)者的歡迎，但并不是所有的瀏覽器都支持它。各個(gè)主流瀏覽器都定義了各自的私有屬性，以便能夠讓用戶體驗(yàn)CSS3.0的新特性。了解CSS3.0的全新功能與之前的版本相比，CSS3.0的改進(jìn)是非常大的。CSS3.0不僅僅進(jìn)行了修訂和完善，更增加了很多新的特性，把樣式表的功能發(fā)揮得淋漓盡致。之前的很多效果都借助圖片和腳本來(lái)實(shí)現(xiàn)，現(xiàn)在只需要幾行代碼就能搞定了。這不僅簡(jiǎn)化了設(shè)計(jì)師的工作，頁(yè)面代碼也更加簡(jiǎn)潔和清晰。CSS樣式是純文本格式文件，在編輯CSS時(shí)，可以使用一些簡(jiǎn)單的純文本編輯工具，例如記事本，同樣也可以使用專業(yè)的CSS編輯工具，例如Dreamweaver。CSS樣式是由若干條樣式規(guī)則組成的，這些樣式規(guī)則可以應(yīng)用到不同的元素或文檔中來(lái)定義他們所顯示的外觀。

9.2

CSS樣式語(yǔ)法

CSS樣式基本語(yǔ)法CSS樣式由選擇器和屬性構(gòu)成，CSS樣式的基本語(yǔ)法如下。CSS選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;……}

CSS規(guī)則構(gòu)成所有CSS樣式的基礎(chǔ)就是CSS規(guī)則，每一條規(guī)則都是一條單獨(dú)的語(yǔ)句，確定應(yīng)該如何設(shè)計(jì)樣式，以及應(yīng)該如何應(yīng)用這些樣式。因此，CSS樣式由規(guī)則列表組成，瀏覽器用它來(lái)確定頁(yè)面的顯示效果。CSS由兩部分組成：選擇器和聲明，其中聲明由屬性和屬性值組成。選擇器聲明屬性屬性值在CSS樣式中提供了多種類型的CSS選擇器，包括通配符選擇器、標(biāo)簽選擇器、類選擇器、ID選擇器和偽類選擇器等，還有一些特殊的選擇器，在創(chuàng)建CSS樣式時(shí)，首先需要了解各種選擇器類型的作用。

9.3

CSS選擇器通配選擇器所謂的通配符選擇器，也是指對(duì)對(duì)象可以使用模糊指定的方式進(jìn)行選擇。CSS的通配符選擇器可以使用*作為關(guān)鍵字，使用方法如下。*{

屬性:屬性值;}標(biāo)簽選擇器HTML文檔是由多個(gè)不同的標(biāo)簽組成，CSS標(biāo)簽選擇器可以用來(lái)控制標(biāo)簽的應(yīng)用樣式。標(biāo)簽名{屬性:屬性值;……}實(shí)戰(zhàn)練習(xí)——?jiǎng)?chuàng)建通配選擇器和標(biāo)簽選擇器最終文件：光盤\最終文件\第9章\9-3-2.html視頻：光盤\視頻\第9章\9-3-2.swf

ID選擇器在CSS樣式中，ID選擇器使用#進(jìn)行標(biāo)識(shí)，如果需要對(duì)id名為top的標(biāo)簽設(shè)置樣式，應(yīng)當(dāng)使用如下格式。#top{屬性:屬性值;……}類選擇器類選擇器用來(lái)為一系列的標(biāo)簽定義相同的顯示樣式，其基本語(yǔ)法如下。.類名稱{屬性:屬性值;……}實(shí)戰(zhàn)練習(xí)——?jiǎng)?chuàng)建ID選擇器和類選擇器最終文件：光盤\最終文件\第9章\9-3-4.html視頻：光盤\視頻\第9章\9-3-4.swf偽類和偽對(duì)象選擇器偽類及偽對(duì)象是一種特殊的類和對(duì)象，由CSS樣式自動(dòng)支持，屬CSS的一種擴(kuò)展類型和對(duì)象，名稱不能被用戶自定義，使用時(shí)只能夠按標(biāo)準(zhǔn)格式進(jìn)行應(yīng)用。實(shí)戰(zhàn)練習(xí)——?jiǎng)?chuàng)建超鏈接偽類選擇器群組選擇器使用逗號(hào)對(duì)選擇器進(jìn)行分隔，使得頁(yè)面中所有的<h1>、<h2>、<h3>、<p>和<span>標(biāo)簽都將具有相同的樣式定義，這樣做的好處是對(duì)于頁(yè)面中需要使用相同樣式的地方只需要書寫一次CSS樣式即可實(shí)現(xiàn)，減少代碼量，改善CSS代碼的結(jié)構(gòu)。派生選擇器當(dāng)僅僅想對(duì)某一個(gè)對(duì)象中的“子”對(duì)象進(jìn)行樣式設(shè)置時(shí)，派生選擇器就被派上了用場(chǎng)，派生選擇器指選擇器組合中前一個(gè)對(duì)象包含后一個(gè)對(duì)象，對(duì)象之間使用空格作為分隔符。實(shí)戰(zhàn)練習(xí)——?jiǎng)?chuàng)建群組選擇器和派生選擇器最終文件：光盤\最終文件\第9章\9-3-5.html視頻：光盤\視頻\第9章\9-3-5.swf最終文件：光盤\最終文件\第9章\9-3-7.html視頻：光盤\視頻\第9章\9-3-7.swf在CSS樣式表中，選擇器是一個(gè)非常重要的功能。伴隨著CSS3和HTML5的發(fā)展，選擇器的功能已經(jīng)超出了CSS的應(yīng)用范圍，發(fā)展成為一個(gè)獨(dú)立的選擇器規(guī)范。針對(duì)CSS樣式表選擇器，在CSS3.0中新增了4種選擇器類型，分別是屬性選擇器、結(jié)構(gòu)偽類選擇器、UI元素狀態(tài)偽類選擇器和偽元素選擇器。

9.4

CSS3.0新增選擇器屬性選擇器屬性選擇器是指直接使用屬性控制HTML標(biāo)簽樣式，它可以根據(jù)某個(gè)屬性是否存在或者通過(guò)屬性值來(lái)查找元素，具有很強(qiáng)大的效果。實(shí)戰(zhàn)練習(xí)——在網(wǎng)頁(yè)中使用屬性選擇器結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器是指運(yùn)用文檔結(jié)構(gòu)樹來(lái)實(shí)現(xiàn)元素過(guò)濾，簡(jiǎn)單的來(lái)說(shuō)，就是利用文檔結(jié)構(gòu)之間的相互關(guān)系來(lái)匹配指定的元素，用來(lái)減少文檔內(nèi)對(duì)class屬性以及id屬性的定義，從而可以使整個(gè)文檔更加簡(jiǎn)練。最終文件：光盤\最終文件\第9章\9-4-1.html視頻：光盤\視頻\第9章\9-4-1.swf

UI元素狀態(tài)偽類選擇器UI元素狀態(tài)包括可用、不可用、選中、未選中、獲取焦點(diǎn)、失去焦點(diǎn)、鎖定和待機(jī)等。在CSS3.0中提供了UI元素狀態(tài)偽類選擇器，可以設(shè)置元素處在某種狀態(tài)下的樣式，在人機(jī)交互過(guò)程中，只要元素的狀態(tài)發(fā)生了變化，選擇器就有可能會(huì)匹配成功。偽元素選擇器在CSS3.0中，還有一種偽元素選擇器，它并不是針對(duì)真正的元素使用的選擇器，而是針對(duì)CSS已經(jīng)定義好的偽元素使用的選擇器。實(shí)戰(zhàn)練習(xí)——在網(wǎng)頁(yè)中使用偽元素選擇器最終文件：光盤\最終文件\第9章\9-4-4.html視頻：光盤\視頻\第9章\9-4-4.swfCSS樣式能夠很好的控制頁(yè)面的顯示，以達(dá)到分離網(wǎng)頁(yè)內(nèi)容和樣式代碼。CSS樣式可以用來(lái)改變從文本樣式到頁(yè)面布局的一切，并且能夠與JavaScript結(jié)合產(chǎn)生動(dòng)態(tài)顯示效果。

9.5應(yīng)用CSS樣式應(yīng)用CSS樣式的4種方式在網(wǎng)頁(yè)中應(yīng)用CSS樣式表有4種方式：內(nèi)聯(lián)CSS樣式、內(nèi)部CSS樣式、鏈接外部CSS樣式表文件和導(dǎo)入外部CSS樣式表文件。實(shí)戰(zhàn)練習(xí)——?jiǎng)?chuàng)建并鏈接外部CSS樣式表文件

CSS樣式的特性CSS通過(guò)與HTML的文檔結(jié)構(gòu)相對(duì)應(yīng)的選擇符來(lái)達(dá)到控制頁(yè)面表現(xiàn)的目的，在CSS樣式的應(yīng)用過(guò)程中，還需要注意CSS樣式的一些特性，包括繼承性、特殊性、層疊性和重要性。最終文件：光盤\最終文件\第9章\9-5-1