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

9.1

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

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

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

CSS3.0的發(fā)展

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

9.2

CSS樣式語法

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

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

9.3

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

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

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

9.4

CSS3.0新增選擇器屬性選擇器屬性選擇器是指直接使用屬性控制HTML標(biāo)簽樣式，它可以根據(jù)某個屬性是否存在或者通過屬性值來查找元素，具有很強(qiáng)大的效果。實(shí)戰(zhàn)練習(xí)——在網(wǎng)頁中使用屬性選擇器結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器是指運(yùn)用文檔結(jié)構(gòu)樹來實(shí)現(xiàn)元素過濾，簡單的來說，就是利用文檔結(jié)構(gòu)之間的相互關(guān)系來匹配指定的元素，用來減少文檔內(nèi)對class屬性以及id屬性的定義，從而可以使整個文檔更加簡練。最終文件：光盤\最終文件\第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ī)交互過程中，只要元素的狀態(tài)發(fā)生了變化，選擇器就有可能會匹配成功。偽元素選擇器在CSS3.0中，還有一種偽元素選擇器，它并不是針對真正的元素使用的選擇器，而是針對CSS已經(jīng)定義好的偽元素使用的選擇器。實(shí)戰(zhàn)練習(xí)——在網(wǎng)頁中使用偽元素選擇器最終文件：光盤\最終文件\第9章\9-4-4.html視頻：光盤\視頻\第9章\9-4-4.swfCSS樣式能夠很好的控制頁面的顯示，以達(dá)到分離網(wǎng)頁內(nèi)容和樣式代碼。CSS樣式可以用來改變從文本樣式到頁面布局的一切，并且能夠與JavaScript結(jié)合產(chǎn)生動態(tài)顯示效果。

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

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