1、第3章 CSS的基本語法,CSS語法中最基本的語法是選擇器的概念和選擇器的聲明。本章將詳述CSS的各種選擇器，正確使用CSS選擇器能為建立標準的XHTML頁面帶來很多的好處。本章還將講述CSS的繼承和層疊，理解和掌握這些概念是使用CSS樣式表的重要基礎。本章內(nèi)容包括： 深入講解CSS語句的基本組成部分：選擇器和聲明 講解CSS的繼承和層疊.,3.1 選擇器,選擇器是CSS語法中最重要最基本的概念。使用選擇器可以指定XHTML文檔中特定標簽應用CSS樣式。選擇器有許多類型，包括標簽選擇器、類選擇器、ID選擇器、全局選擇器、組合選擇器、繼承選擇器和偽類等。,3.1.1 標簽選擇器,一個XHTML文

2、檔中有許多標簽，例如p標簽，h1標簽等。若要使文檔中的所有p標簽都使用同一個CSS樣式，就應使用標簽選擇器。圖3.1為標簽選擇器的結構。,3.1.2 類選擇器,使用標簽選擇器可以為整個XHTML文檔中的同一個標簽指定相同的CSS樣式。但是在實際運用中，XHTML文檔中的同一個標簽會被反復使用。若要為相同的標簽賦予不同的CSS樣式就應使用類選擇器。圖3.3為標簽選擇器的結構。,3.1.3 ID選擇器,ID選擇器和類選擇器相似，不同的是，ID選擇器不能復用。在一個XHTML文檔中，一個ID選擇器只能把其CSS樣式指定給一個標簽。圖3.5為標簽選擇器的結構。,3.1.4 全局選擇器,全局選擇器是一個

3、星號。它能作用于XHTML文檔中的所有元素。圖3.7為全局選擇器的結構。,3.1.5 組合選擇器,標簽選擇器、類選擇器和ID選擇器是可以組合起來使用的。一般的組合方式是標簽選擇器和類選擇器組合，標簽選擇器和ID選擇器組合。由于這兩種組合方式的原理和效果一樣，所以只介紹標簽選擇器和類選擇器的組合。組合選擇器只是一種組合形式，并不算是一種真正的選擇器，但在實際中經(jīng)常用到。,3.1.6 繼承選擇器,學習使用繼承選擇器就必須先了解文檔樹和CSS的繼承。每個XHTML都可以被看作一個文檔樹，文檔樹的根部就是html標簽，而head和body標簽就是其子元素。在head和body里的其他標簽就是html標

4、簽的孫子元素。整個XHTML就呈現(xiàn)一種祖先和子孫的樹狀關系。CSS的繼承是指子孫元素繼承祖先元素的某些屬性。以下通過實例來詳細講解這兩個重要的CSS概念。 1文檔樹 2CSS的繼承 3繼承選擇器,3.1.7 偽類,偽類也是選擇器的一種，但是用偽類定義的CSS樣式并不是作用在標簽上的。偽類作用在標簽的狀態(tài)上。由于很多瀏覽器支持不同類型的偽類，沒有一個統(tǒng)一的標準，所以很多偽類都不常被用到。偽類包括：first-child、:link:、vistited、:hover、:active、:focus和:lang等等。其中有一組偽類是主流瀏覽器都支持的，就是超鏈接的偽類，包括:link:、:active

5、、vistited和:hover。,3.2 聲明,聲明是構成CSS語句的一部分，聲明寫在選擇器之后。CSS的聲明寫在一對大括號中，其中包含CSS的屬性和值。聲明的寫法有明確的規(guī)則，若不遵守聲明的規(guī)則，則可能導致CSS樣式失效。以下為CSS聲明的規(guī)則： 聲明中屬性和值之間用分號隔開； 聲明中可以包含多個屬性，詳見3.2.1小節(jié)多重聲明； 使用多重聲明時，每個聲明用分號隔開； 聲明的大括號必須書寫完整。,3.2.1 多重聲明,多重聲明是指在對同一個選擇器設置屬性時，可以把所有屬性寫在同一選擇器中，而不需要分開書寫。,3.2.2 集體聲明,集體聲明是指若樣式表中有多個選擇器使用相同的屬性設置，這些選

6、擇器可以并列寫在一起。設置好網(wǎng)頁中某個元素的CSS樣式后，另外一個元素也要應用相同的樣式。,3.3 CSS的層疊原理,CSS的全稱為Cascading Style Sheets，中文翻譯為層疊樣式表。學習CSS的層疊（cascading）是深入學習CSS原理的基礎。本節(jié)將詳細講解CSS的層疊原理。當出現(xiàn)多個樣式共同作用于某個頁面元素時，就需要決定哪一個會被應用。CSS的層疊就是一個決定CSS樣式優(yōu)先級的規(guī)則。在深入理解CSS的層疊規(guī)則前，先要理解以下相關的內(nèi)容。,3.3.1 CSS樣式來源,在之前的章節(jié)中，每個XHTML文檔的外觀都是由CSS樣式表控制的。實際上除了網(wǎng)頁設計師制作的CSS樣式表

7、外，還有其他樣式表影響著網(wǎng)頁文檔的外觀。在瀏覽器上運行的網(wǎng)頁文檔受以下三個CSS樣式表控制外觀： 瀏覽器的默認樣式 用戶自定義的樣式 網(wǎng)頁作者制作的樣式,3.3.2 選擇器的優(yōu)先級,由于CSS的某些屬性有繼承性，一個頁面元素往往應用了多個選擇器定義的CSS樣式。CSS的選擇器具有優(yōu)先級，用于決定哪個選擇器定義的樣式最終被應用到頁面元素上。選擇器的優(yōu)先級可以用數(shù)字表示，數(shù)字越大，優(yōu)先級越高。,3.3.3 !important語句,CSS2.0中使用重要規(guī)則提升聲明中某個屬性設置的優(yōu)先級。重要規(guī)則就是!important語句。在聲明的屬性設置中使用了!important語句，其優(yōu)先級最高。,3.3

8、.4 順序優(yōu)先級,當出現(xiàn)多個相同的選擇器設置相同的屬性時，后定義的選擇器優(yōu)先級較高。,3.3.5 CSS的層疊規(guī)則,在同一個元素的同一個屬性對應了多個CSS語句的時候，就需要CSS的層疊規(guī)則來決定哪個屬性設置優(yōu)先應用。如【示例3.6】所示，一個p標簽的color屬性在多個CSS語句中都有設置。,3.4 本章實例：簡單的豎型菜單,本章實例講解如何制作一個簡單的豎型菜單。本章例子中的菜單選項在靜態(tài)時是褐色，當鼠標滑過菜單選項時文字會放大變色，并且顯示灰色底色。本章實例主要是為了講解如何合理地使用選擇器。,3.5 常見面試題,問題1：該在什么時候使用ID選擇器，什么時候使用類選擇器？ 問題2：一個CSS語句必不可少的兩部分分別是什么？ 問題3：標簽選擇器、類選擇