2.3 CSS樣式表

CSS是W3C協(xié)會為彌補HTML在顯示屬性設(shè)定上的不足而制定的一套擴展樣式標準，它的全稱是Cascading Style Sheet。CSS標準中重新定義了HTML中原來的文字顯示樣式，增加了一些新概念，如類、層等，可以對文字重疊、定位等。在CSS還沒有引入頁面設(shè)計之前，傳統(tǒng)的HTML語言要實現(xiàn)頁面美化在設(shè)計上是十分麻煩的，例如要設(shè)計頁面中文字的樣式，如果使用傳統(tǒng)的HTML語句來設(shè)計頁面就不得不在每個需要設(shè)計的文字上都定義樣式。CSS的出現(xiàn)改變了這一傳統(tǒng)模式。

2.3.1 CSS規(guī)則

在CSS樣式表中包括3部分內(nèi)容：選擇符、屬性和屬性值。語法格式如下：

 選擇符{屬性:屬性值;}

語法說明如下。

選擇符：又稱選擇器，是CSS中很重要的概念，所有HTML語言中的標記都是通過不同的CSS選擇器進行控制的。

屬性：主要包括字體屬性、文本屬性、背景屬性、布局屬性、邊界屬性、列表項目屬性、表格屬性等內(nèi)容。其中一些屬性只有部分瀏覽器支持，因此使CSS屬性的使用變得更加復(fù)雜。

屬性值：為某屬性的有效值。屬性與屬性值之間以“:”號分隔。當有多個屬性時，使用“;”分隔。圖2.17為大家標注了CSS語法中的選擇器、屬性與屬性值。

圖2.17 CSS語法

2.3.2 CSS選擇器

CSS選擇器常用的是標記選擇器、類別選擇器、id選擇器等。使用選擇器即可對不同的HTML標簽進行控制，從而實現(xiàn)各種效果。下面對各種選擇器進行詳細介紹。

1．標記選擇器

HTML頁面是由很多標記組成的，例如圖像標記<img>、超鏈接標記<a>、表格標記<table>等。而CSS標記選擇器就是聲明頁面中哪些標記采用哪些CSS樣式。例如a選擇器，就是用于聲明頁面中所有<a>標記的樣式風格。

【例2.15】 定義a標記選擇器，在該標記選擇器中定義超鏈接的字體與顏色。

2．類別選擇器

使用標記選擇器非常快捷，但是會有一定的局限性，如果聲明標記選擇器，那么頁面中所有該標記內(nèi)容會有相應(yīng)的變化。假如頁面中有3個<h2>標記，如果想要每個<h2>的顯示效果都不一樣，使用標記選擇器就無法實現(xiàn)了，這時就需要引入類別選擇器。

類別選擇器的名稱由用戶自己定義，并以“.”號開頭，定義的屬性與屬性值也要遵循CSS規(guī)范。要應(yīng)用類別選擇器的HTML標記，只需使用class屬性來聲明即可。

【例2.16】 使用類別選擇器控制頁面中字體的樣式。（實例位置：資源包\TM\sl\2\10）

在上面的代碼中，頁面中的第一個<h2>標記應(yīng)用了one選擇器，第二個<h2>標記應(yīng)用了two選項器，第3個<h2>標記應(yīng)用了three選擇器。運行結(jié)果如圖2.18所示。

圖2.18 類別選擇器控制頁面文字樣式

3．id選擇器

id選擇器是通過HTML頁面中的id屬性來選擇增添樣式，與類別選擇器基本相同。但需要注意的是，由于HTML頁面中不能包含兩個相同的id標記，因此定義的id選擇器也就只能被使用一次。

命名id選擇器要以“#”號開始，后加HTML標記中的id屬性值。

【例2.17】 使用id選擇器控制頁面中字體的樣式。

運行本段代碼，結(jié)果如圖2.19所示。

圖2.19 使用id選擇器控制頁面文字大小

2.3.3 在頁面中包含CSS

在對CSS有了一定的了解后，下面介紹如何實現(xiàn)在頁面中包含CSS樣式的幾種方式，其中包括行內(nèi)樣式、內(nèi)嵌式和鏈接式。

1．行內(nèi)樣式

行內(nèi)樣式是比較直接的一種樣式，直接定義在HTML標記之內(nèi)，通過style屬性來實現(xiàn)。這種方式比較容易被初學者接受，但是靈活性不強。

【例2.18】 通過行內(nèi)定義樣式的形式，實現(xiàn)控制頁面文字的顏色和大小。（實例位置：資源包\TM\sl\2\11）

運行本實例，結(jié)果如圖2.20所示。

圖2.20 定義行內(nèi)樣式

2．內(nèi)嵌式

內(nèi)嵌式樣式表就是在頁面中使用<style></style>標記將CSS樣式包含在頁面中。本章中的例2.16就是使用這種內(nèi)嵌樣式表的模式。內(nèi)嵌式樣式表的形式?jīng)]有行內(nèi)標記表現(xiàn)的直接，但是能夠使頁面更加規(guī)整。

與行內(nèi)樣式相比，內(nèi)嵌式樣式表更加便于維護。但是每個網(wǎng)站都不可能由一個頁面構(gòu)成，而每個頁面中相同的HTML標記又都要求有相同的樣式，此時使用內(nèi)嵌式樣式表就顯得比較笨重，而使用鏈接式樣式表即可輕松解決這一問題。

3．鏈接式

鏈接外部CSS樣式表是最常用的一種引用樣式表的方式，將CSS樣式定義在一個單獨的文件中，然后在HTML頁面中通過<link>標記引用，是一種最為有效的使用CSS樣式的方式。

<link>標記的語法結(jié)構(gòu)如下：

     <link rel='stylesheet' href='path' type='text/css'>

參數(shù)說明：

rel：定義外部文檔和調(diào)用文檔間的關(guān)系。

href：CSS文檔的絕對或相對路徑。

type：指的是外部文件的MIME類型。

【例2.19】 通過鏈接式樣式表的形式在頁面中引入CSS樣式。（實例位置：資源包\TM\sl\2\12）

（1）創(chuàng)建名稱為css.css的樣式表，在該樣式表中定義頁面中<h1>、<h2>、<h3>和<p>標記的樣式。代碼如下：

（2）在頁面中通過<link>標記將CSS樣式表引入頁面中，此時CSS樣式表定義的內(nèi)容將自動加載到頁面中。代碼如下：

運行程序，結(jié)果如圖2.21所示。

圖2.21 通過鏈接形式引入CSS樣式