網(wǎng)頁(yè)設(shè)計(jì)中DIV+CSS的教學(xué)研究

（division）簡(jiǎn)單而言是一個(gè)區(qū)塊容器標(biāo)記，即之間相當(dāng)于一個(gè)容器，可以容納段落、標(biāo)題、表格、圖片，乃至章節(jié)、摘要和備注等各種HTML元素。因此，可以把中的內(nèi)容視為一個(gè)獨(dú)立的對(duì)象，用于CSS的控制。

1.1 行內(nèi)樣式

行內(nèi)樣式是所有樣式方法中最為直接的一種，它直接對(duì)HTML標(biāo)記使用style屬性，然后將CSS代碼直接寫在其中。

1.2 內(nèi)嵌式

內(nèi)嵌樣式表就是將CSS寫在與之間，并且用標(biāo)記進(jìn)行聲明。

1.3 鏈接式

鏈接式CSS樣式表是使用頻率最高，也是最為實(shí)用的方法?，F(xiàn)在大部分的網(wǎng)站都會(huì)使用這種方法，它將HTML頁(yè)面本身與CSS樣式風(fēng)格分離為兩個(gè)或者多個(gè)文件，實(shí)現(xiàn)了頁(yè)面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護(hù)都十分方便，網(wǎng)站的后臺(tái)技術(shù)員與美工設(shè)計(jì)者也可以很好的分工合作。而且對(duì)于同一個(gè)CSS文件可以鏈接到多個(gè)HTML文件中甚至可以鏈接到整個(gè)網(wǎng)站的所有頁(yè)面中，使得網(wǎng)站整體風(fēng)格統(tǒng)一、協(xié)調(diào)，并且后期維護(hù)的工作量也大大減少。

1.4 導(dǎo)入樣式

導(dǎo)入樣式表與前面提到的鏈接樣式表的功能基本相同，只是語(yǔ)法和運(yùn)作方式略有不同。采用import方式導(dǎo)入的樣式表，在HTML文件初始化時(shí)，會(huì)被導(dǎo)入到HTML文件內(nèi)，作為文件的一部分，類似內(nèi)嵌式的效果。而鏈接式樣式表則是在HTML的標(biāo)記需要格式時(shí)才以鏈接的方式引入。

2 CSS選擇器

CSS控制頁(yè)面總共有四種方式：行內(nèi)方式、內(nèi)嵌方式、鏈接方式、導(dǎo)入方式，通過(guò)這四種方式就可以實(shí)現(xiàn)CSS對(duì)HTML頁(yè)面樣式的控制，如果要讓這些樣式對(duì)HTML頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一，一對(duì)多或者多對(duì)一的控制，這就需要用到CSS選擇器，HTML頁(yè)面中的元素就是通過(guò)CSS選擇器進(jìn)行控制的。

CSS選擇器共有三種：標(biāo)簽選擇器、ID選擇器、類選擇器。

2.1 標(biāo)簽選擇器

一個(gè)完整的HTML頁(yè)面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽采用相應(yīng)的CSS樣式。每一個(gè)CSS選擇器都包含選擇器本身、屬性和值，其中屬性和值可以設(shè)置多個(gè)，從而實(shí)現(xiàn)對(duì)同一個(gè)標(biāo)記，聲明多種樣式風(fēng)格。

2.2 ID選擇器

ID選擇器在某一個(gè)HTML頁(yè)面中只能使用一次，ID選擇器更具有針對(duì)性。在HTML的標(biāo)記中只需要利用ID屬性，就可以直接調(diào)用CSS中的ID選擇器。

ID選擇器也可以用于多個(gè)標(biāo)記。但這里需要指出的是，將ID選擇器用于多個(gè)標(biāo)記是錯(cuò)誤的，

因?yàn)槊總€(gè)標(biāo)記定義的ID不只是CSS可以調(diào)用，JavaScript等其他腳本語(yǔ)言同樣也可以調(diào)用。如果一個(gè)HTML中有兩個(gè)相同ID的標(biāo)記，那么將會(huì)導(dǎo)致JavaScript在查找ID時(shí)出錯(cuò)，例如函數(shù)getElementById（）。正因?yàn)镴avaScript等腳本語(yǔ)言也能調(diào)用HTML中設(shè)置的ID，因此ID選擇器一直被廣泛地使用。網(wǎng)站建設(shè)者在編寫CSS代碼時(shí)，應(yīng)該養(yǎng)成良好的編寫習(xí)慣，一個(gè)ID最多只能賦予一個(gè)HTML標(biāo)記。從運(yùn)行結(jié)果可以看到，最后一行沒(méi)有任何CSS樣式風(fēng)格顯示，這意味著ID選擇器不支持多風(fēng)格同時(shí)使用，類似id="one two"是完全錯(cuò)誤的語(yǔ)法。

2.3 類選擇器

標(biāo)記選擇器一旦聲明，那么頁(yè)面中所有的該標(biāo)記都會(huì)相應(yīng)地產(chǎn)生變化。例如當(dāng)聲明了

標(biāo)記為紅色時(shí)，頁(yè)面中所有的

標(biāo)記都將顯示為紅色。如果希望其中的某一個(gè)

標(biāo)記不是紅色，而是藍(lán)色，這時(shí)僅依靠標(biāo)記選擇器是遠(yuǎn)遠(yuǎn)不夠的，還需要引入類別（class）選擇器。類別選擇器的名稱可以由用戶定義，屬性和值跟標(biāo)記選擇器一樣，也必須符合CSS規(guī)范。

3 教學(xué)實(shí)施

3.1 加強(qiáng)HTML代碼訓(xùn)練

在學(xué)習(xí)這門課時(shí)，主要是要讓同學(xué)們熟悉HTML代碼的格式，一個(gè)基本的網(wǎng)頁(yè)包含的HTML代碼，常用網(wǎng)頁(yè)元素的HTML代碼標(biāo)記。在熟悉了HTML代碼的基礎(chǔ)之后，才能引入CSS的教學(xué)內(nèi)容。

3.2 由簡(jiǎn)單到復(fù)雜，從部分到整體

學(xué)習(xí)CSS，重點(diǎn)是學(xué)習(xí)CSS控制網(wǎng)頁(yè)的4種形式，選擇器的類型，常用的格式設(shè)置代碼。在教學(xué)過(guò)程中一定要多選擇一些有趣的實(shí)例講解，光講理論很枯燥無(wú)味，先讓同學(xué)們能夠理解每一個(gè)知識(shí)點(diǎn)，并能夠?qū)嵺`操作。教師要布置一些針對(duì)知識(shí)點(diǎn)的上機(jī)練習(xí)題，在完成基礎(chǔ)練習(xí)后，再布置一個(gè)大作業(yè)，綜合運(yùn)用所學(xué)內(nèi)容，采用DIV+CSS完成網(wǎng)頁(yè)布局的設(shè)計(jì)。