網頁設計中DIV+CSS的教學研究

（division）簡單而言是一個區塊容器標記，即之間相當于一個容器，可以容納段落、標題、表格、圖片，乃至章節、摘要和備注等各種HTML元素。因此，可以把中的內容視為一個獨立的對象，用于CSS的控制。

1.1 行內樣式

行內樣式是所有樣式方法中最為直接的一種，它直接對HTML標記使用style屬性，然后將CSS代碼直接寫在其中。

1.2 內嵌式

內嵌樣式表就是將CSS寫在與之間，并且用標記進行聲明。

1.3 鏈接式

鏈接式CSS樣式表是使用頻率最高，也是最為實用的方法。現在大部分的網站都會使用這種方法，它將HTML頁面本身與CSS樣式風格分離為兩個或者多個文件，實現了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護都十分方便，網站的后臺技術員與美工設計者也可以很好的分工合作。而且對于同一個CSS文件可以鏈接到多個HTML文件中甚至可以鏈接到整個網站的所有頁面中，使得網站整體風格統一、協調，并且后期維護的工作量也大大減少。

1.4 導入樣式

導入樣式表與前面提到的鏈接樣式表的功能基本相同，只是語法和運作方式略有不同。采用import方式導入的樣式表，在HTML文件初始化時，會被導入到HTML文件內，作為文件的一部分，類似內嵌式的效果。而鏈接式樣式表則是在HTML的標記需要格式時才以鏈接的方式引入。

2 CSS選擇器

CSS控制頁面總共有四種方式：行內方式、內嵌方式、鏈接方式、導入方式，通過這四種方式就可以實現CSS對HTML頁面樣式的控制，如果要讓這些樣式對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器，HTML頁面中的元素就是通過CSS選擇器進行控制的。

CSS選擇器共有三種：標簽選擇器、ID選擇器、類選擇器。

2.1 標簽選擇器

一個完整的HTML頁面是有很多不同的標簽組成，而標簽選擇器，則是決定哪些標簽采用相應的CSS樣式。每一個CSS選擇器都包含選擇器本身、屬性和值，其中屬性和值可以設置多個，從而實現對同一個標記，聲明多種樣式風格。

2.2 ID選擇器

ID選擇器在某一個HTML頁面中只能使用一次，ID選擇器更具有針對性。在HTML的標記中只需要利用ID屬性，就可以直接調用CSS中的ID選擇器。

ID選擇器也可以用于多個標記。但這里需要指出的是，將ID選擇器用于多個標記是錯誤的，

因為每個標記定義的ID不只是CSS可以調用，JavaScript等其他腳本語言同樣也可以調用。如果一個HTML中有兩個相同ID的標記，那么將會導致JavaScript在查找ID時出錯，例如函數getElementById（）。正因為JavaScript等腳本語言也能調用HTML中設置的ID，因此ID選擇器一直被廣泛地使用。網站建設者在編寫CSS代碼時，應該養成良好的編寫習慣，一個ID最多只能賦予一個HTML標記。從運行結果可以看到，最后一行沒有任何CSS樣式風格顯示，這意味著ID選擇器不支持多風格同時使用，類似id="one two"是完全錯誤的語法。

2.3 類選擇器

標記選擇器一旦聲明，那么頁面中所有的該標記都會相應地產生變化。例如當聲明了

標記為紅色時，頁面中所有的

標記都將顯示為紅色。如果希望其中的某一個

標記不是紅色，而是藍色，這時僅依靠標記選擇器是遠遠不夠的，還需要引入類別（class）選擇器。類別選擇器的名稱可以由用戶定義，屬性和值跟標記選擇器一樣，也必須符合CSS規范。

3 教學實施

3.1 加強HTML代碼訓練

在學習這門課時，主要是要讓同學們熟悉HTML代碼的格式，一個基本的網頁包含的HTML代碼，常用網頁元素的HTML代碼標記。在熟悉了HTML代碼的基礎之后，才能引入CSS的教學內容。

3.2 由簡單到復雜，從部分到整體

學習CSS，重點是學習CSS控制網頁的4種形式，選擇器的類型，常用的格式設置代碼。在教學過程中一定要多選擇一些有趣的實例講解，光講理論很枯燥無味，先讓同學們能夠理解每一個知識點，并能夠實踐操作。教師要布置一些針對知識點的上機練習題，在完成基礎練習后，再布置一個大作業，綜合運用所學內容，采用DIV+CSS完成網頁布局的設計。