揭開CSS的神秘面紗

潘俊斌

摘要：網(wǎng)頁制作技術(shù)是“互聯(lián)網(wǎng)+”時(shí)代人必備的一項(xiàng)技能，CSS是網(wǎng)頁表現(xiàn)的核心基礎(chǔ)。該文從CSS規(guī)則作用范圍、作用對(duì)象、優(yōu)先級(jí)三方面基礎(chǔ)知識(shí)的入手，揭開CSS運(yùn)用的神秘面紗。

關(guān)鍵詞：網(wǎng)頁制作；CSS規(guī)則；作用范圍；作用對(duì)象；優(yōu)先級(jí)

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）03-0219-02

隨著互聯(lián)網(wǎng)技術(shù)應(yīng)用的深入和普及，網(wǎng)頁制作技術(shù)成為現(xiàn)代人必備的一項(xiàng)技能。如同縫紉衣服必須要關(guān)注針線的細(xì)節(jié)一樣，網(wǎng)頁制作也必須時(shí)刻關(guān)注html+CSS+Javascript代碼。表現(xiàn)與內(nèi)容分離是網(wǎng)頁制作的基本理念，而CSS正是網(wǎng)頁表現(xiàn)的核心基礎(chǔ)。很多網(wǎng)頁制作初學(xué)者容易被CSS所迷惑而不得其道，最終失去信心。本文通過對(duì)CSS基礎(chǔ)三個(gè)難點(diǎn)的分析，幫助大家理清思路，抓住其規(guī)律，掌握其用法。

1 CSS代碼出現(xiàn)的位置與其作用范圍

總的來說有三種位置可以出現(xiàn)CSS代碼：

1）與HTML代碼混合，這不符合“表現(xiàn)與內(nèi)容分離”的要求。例如：

新聞標(biāo)題

2）在HTML文檔的文件頭標(biāo)簽中。如：

3）在專門的CSS文件中

/* CSS Document style.css <--（文件名）*/

. newstitle { color：blue； font-size：26px； } /* 這是“類”*/

CSS代碼出現(xiàn)在以上三種位置，都可以表現(xiàn)出“藍(lán)色26像素”的文字，他們的區(qū)別在于作用的范圍不同。

出現(xiàn)在第（1）種位置只能作用于該標(biāo)記里面的“新聞標(biāo)題”四個(gè)字。

出現(xiàn)在第（2）種位置代碼可以作用于本文檔的多個(gè)對(duì)象，但是要求在Html代碼里面加以套用，如：

新聞標(biāo)題<！—以“類” 方式套用--> 行業(yè)動(dòng)態(tài) <！—以“類” 方式套用-->

上面

…標(biāo)記里面的“新聞標(biāo)題”和…標(biāo)記里面的“行業(yè)動(dòng)態(tài)”處于同一個(gè)html文檔的不同的標(biāo)記內(nèi)，都可以通過class=”newstitle”來套用“類”的表現(xiàn)。

出現(xiàn)在第（3）種位置的CSS代碼，可以作用于多個(gè)文檔的多個(gè)對(duì)象，但是要求需要套用這種表現(xiàn)的文檔導(dǎo)入或鏈接這個(gè)CSS文檔。

上述是導(dǎo)入CSS文檔的代碼。通常情況下使用鏈接比用導(dǎo)入好，當(dāng)許多文件鏈接相同CSS文檔的代碼時(shí)，可以避免相同代碼反復(fù)傳輸。鏈接CSS文檔的方式如下：/* 鏈接的語句*/

只要在某個(gè)HTML文檔中導(dǎo)入或者鏈接過一次該CSS文檔，就可以像本HTML文檔中的其他CSS代碼一樣來套用該CSS文檔中的規(guī)則。其套用CSS的方式與出現(xiàn)在第（2）種位置中套用的方式相同，在此不再贅述。

2 CSS選擇器與其作用的對(duì)象

CSS有四種選擇器：類、ID、標(biāo)簽、復(fù)合。與上面出現(xiàn)位置呼應(yīng)，四種選擇器都可以出現(xiàn)在第（2）種位置即本文檔，也可以出現(xiàn)在第（3）種位置獨(dú)立的CSS文檔中，再在相應(yīng)的HTML文檔鏈接之。

1）類：其代碼和套用的形式如前所述，在此不再贅述。

2）ID，舉例如下：

/* CSS Document style.css <--（文件名） */

# newstitle { color：blue； font-size：26px； } /*定義了名稱為newstitle的id*/

其套用形式為：

新聞標(biāo)題

<！—以“id” 方式套用-->

辨析：（a）同一個(gè)文檔ID不能同名，因此只有一個(gè)對(duì)象可以套用；

（b）在其他鏈接了相同CSS文檔的HTML文檔中如果有同名的ID，則不同文檔中的同名ID的表現(xiàn)是一樣的。

例如：在news.html中有：

新聞標(biāo)題

<！—以“id” 方式套用-->

在guide.html中也可以有： 行業(yè)動(dòng)態(tài) <！—以“id” 方式套用-->

如果news.html和guide.html同時(shí)鏈接了style.css，則它們都套用了“藍(lán)色26像素”的表現(xiàn)。

3）標(biāo)簽，舉例如下：

h3 { color：blue； font-size：26px； } /*定義了h3標(biāo)簽*/

這種選擇器，只要在html代碼使用h3標(biāo)記的地方，就會(huì)套用“藍(lán)色26像素”的表現(xiàn)。H3是html的標(biāo)簽，不能像類和ID一樣自己命名。其套用形式為：

新聞標(biāo)題

<！—以“標(biāo)簽” 方式套用 -->

上面代碼已經(jīng)可以使“新聞標(biāo)題”表現(xiàn)為“藍(lán)色26像素”。

4）復(fù)合，在此著重介紹分組選擇符和后代選擇符

①當(dāng)你想為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)，可以使用分組選擇符（，），舉例如下：

h3 ， .newstitle { color：blue； font-size：26px； } /*一個(gè)標(biāo)簽，一個(gè)類*/

在html代碼中：

新聞標(biāo)題

<！—以“標(biāo)簽” 方式套用 --> 行業(yè)動(dòng)態(tài) <！—以“類” 方式套用-->

以上兩處地方都會(huì)套用“藍(lán)色26像素”的CSS規(guī)則。

② 加入空格可以使用后代選擇又稱包含選擇，限定樣式的作用范圍，舉例如下：

.newstitle h3 { color：blue； font-size：26px； } /*父容器中使用了類的h3標(biāo)簽*/

在html代碼中：

在這里，不僅使用了h3標(biāo)簽，而且是被使用了 .newstitle類的容器所包含，才能表現(xiàn)出“藍(lán)色26像素”的樣式。

3 CSS代碼層疊性、順序、選擇器與其優(yōu)先級(jí)關(guān)系

層疊就是在多個(gè)css規(guī)則同時(shí)作用于一個(gè)對(duì)象，多個(gè)規(guī)則中的各個(gè)沒有重復(fù)定義屬性作為一個(gè)集合共同作用，對(duì)于重復(fù)定義的屬性，則根據(jù)優(yōu)先級(jí)最終只有其中一個(gè)起作用，重復(fù)定義的其余屬性將被遮掩不予表現(xiàn)。舉例如下：

#huang { color ： yellow ； } /* ID的優(yōu)先級(jí)最高，放在前面一樣其作用*/

.lvse { color：green； } /* 類的優(yōu)先級(jí)比標(biāo)簽高*/

h3 { color：blue； font-size：26px； } /*第1個(gè)h3規(guī)則：定義了顏色和字號(hào)兩個(gè)屬性*/

h3 { color：red； } /*第2個(gè)h3規(guī)則：重復(fù)定義了顏色屬性，遮蓋前面相同標(biāo)簽的顏色屬性*/

這里定義了三個(gè)CSS規(guī)則，在下面的html中都起作用。

紅色26 <！—最外層父容器 -->

黃色綠色<！—最里層子容器 -->

辨析如下：“紅色26”4個(gè)字表現(xiàn)為“紅色26像素”，分別是第2個(gè)h3規(guī)則定義的顏色和第2個(gè)h3規(guī)則定義的大小，由兩個(gè)規(guī)則中起作用的屬性組合而成，這就是CSS規(guī)則的層疊性。文字顏色被重復(fù)定義，在這種情況下，根據(jù)優(yōu)先級(jí)后面定義的紅色red最將終起作用，第一個(gè)h3規(guī)則中定義的藍(lán)色被遮掩不予表現(xiàn)。只有重復(fù)定義的CSS屬性才需要考慮優(yōu)先級(jí)，相關(guān)的優(yōu)先級(jí)有：

1）在相同的選擇器（如：類、ID或標(biāo)簽）中重復(fù)定義的，由出現(xiàn)的順序來決定，最后定義的那個(gè)將最終表現(xiàn)出來。如上訴舉例中的“紅色26”，有兩個(gè)h3標(biāo)簽定義了顏色屬性，前面定義為藍(lán)色，后面定義為紅色，最終表現(xiàn)為紅色。

2） 在不同的選擇器中重復(fù)定義的， “ID”〉“類”〉“標(biāo)簽”，不受CSS規(guī)則出現(xiàn)順序的影響。如前例中“黃色”兩字，其本身所處的span標(biāo)簽同時(shí)定義了“ID”和“類”兩個(gè)規(guī)則，構(gòu)成對(duì)顏色的重復(fù)定義，這時(shí)由“ID”決定其表現(xiàn)為黃色。

3） “綠色”兩字表現(xiàn)為“綠色26像素”，這屬于父子容器繼承的情況。“綠色”所處的容器是被“黃色”所處容器所包含的。在本容器中，以“類”的方式套用規(guī)則，父代定義的顏色屬性被取代，父代定義的字號(hào)屬性因?yàn)闆]有重新定義則得到繼承。

在網(wǎng)頁制作的過程中，CSS的表現(xiàn)與HTML結(jié)構(gòu)同等重要，CSS紛繁眾多的屬性比html更加難以掌握，是橫在初學(xué)者面前的一道門檻。最近新興的響應(yīng)式Web設(shè)計(jì)（Responsive Web design）的理念是，頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整，不必為不斷到來的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)了。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。有時(shí)候需要根據(jù)不同設(shè)備為同一個(gè)html結(jié)構(gòu)設(shè)計(jì)多套不同的CSS規(guī)則，可見CSS的在網(wǎng)頁制作中將會(huì)占據(jù)舉足輕重的地位?？偠灾?，學(xué)習(xí)CSS基礎(chǔ)要弄清楚規(guī)則的作用范圍、作用對(duì)象、重疊性和優(yōu)先級(jí)這幾個(gè)難點(diǎn)，才能在網(wǎng)頁制作中得心應(yīng)手地運(yùn)用CSS規(guī)則，才能提高代碼的可重用效率和形成站內(nèi)頁面的統(tǒng)一風(fēng)格。

參考文獻(xiàn)：

[1] 傳智博客研發(fā)部.網(wǎng)頁設(shè)計(jì)與制作html+CSS[M]. 北京：中國鐵道出版社， 2014.

[2] 馮永滔. 網(wǎng)頁制作[M]. 北京：高等教育出版社， 2011.