顏春艷 南京技師學(xué)院

概述：自從互聯(lián)網(wǎng)走入人們的生活以來，網(wǎng)頁設(shè)計和制作也隨之誕生和發(fā)展，成為各大中專院校計算機專業(yè)學(xué)生必然開設(shè)的課程之一，網(wǎng)頁開發(fā)語言和代碼在各大網(wǎng)站上也是層出不窮。目前，比較流行的網(wǎng)頁設(shè)計與網(wǎng)頁布局的技術(shù)一般都采用的是CSS+DIV。

1 引言

本人擔(dān)任網(wǎng)頁制作這門課程的教學(xué)已經(jīng)有幾年的時間了，每學(xué)期的教學(xué)結(jié)束后，都會給我留下一些遺憾，最大感觸是：學(xué)生在學(xué)習(xí)這門課程時，能夠按照教學(xué)要求，完成書本上案例的制作，涉及到的文本、圖像、表格、框架、模板、表單等等知識點都能夠掌握的不錯，對于實例也能夠完成較好。但是，當(dāng)學(xué)生一旦不學(xué)習(xí)這門課程了，讓他制作一個簡單的公司網(wǎng)站都沒有辦法完成，很難達(dá)到學(xué)以致用的目的。

這不僅引起了我的教學(xué)反思，教學(xué)哪里出了問題？僅僅學(xué)習(xí)書本知識已經(jīng)不能滿足需求？于是，我著手研究該如果解決這樣的現(xiàn)狀。我召集教研組的教師進行教學(xué)研討，上網(wǎng)查閱最新資料，了解目前網(wǎng)頁制作的發(fā)展方向和主流技術(shù)，發(fā)現(xiàn)關(guān)于網(wǎng)頁的表現(xiàn)和布局傳統(tǒng)的表格布局、框架結(jié)構(gòu)等等已經(jīng)不再適應(yīng)需求，往往網(wǎng)頁文件所占空間太大，網(wǎng)頁打開的速度太慢，都已經(jīng)逐漸不再使用了。目前，比較流行的網(wǎng)頁設(shè)計和布局大多采用的是CSS+DIV技術(shù)。本文就主要闡述與CSS+DIV相關(guān)的知識點。

2. CSS層疊樣式表概述

2.1 CSS概念及功能簡介

CSS是Cascading Style Sheets的縮寫，中文意思是層疊樣式表或級聯(lián)樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS可以用來精確的控制頁面里每一個元素的字體樣式、背景、排列方式、區(qū)域尺寸、邊框等。使用CSS能夠簡化網(wǎng)頁的格式代碼，加快下載顯示的速度，外部鏈接樣式可以同時定義多個頁面，大大減少了重復(fù)用勞動的工作量。

2.2 CSS在頁面控制作用方面的三種樣式

2.2.1 行內(nèi)樣式 。將樣式直接插在html標(biāo)簽中，這種方式的特點是靈活、簡單方便

2.2.2 嵌入式。將所有樣式放在頭部文件中，這樣一個樣式可以在一個頁面多次應(yīng)用，更改整個頁面的顯示效果十分方便。

2.2.3 鏈接式。 采用鏈接的形式調(diào)入外部的樣式表文件（.CSS），該樣式文件可以為整個網(wǎng)站的多個網(wǎng)頁共同引用，既減少代碼編寫的重復(fù)工作，又可以做到統(tǒng)一頁面風(fēng)格，在需要更新是只需對外部樣式表文件進行更新即可。

在實際使用時，需要根據(jù)制作網(wǎng)頁時的具體情況，選擇某種或某幾種適合的樣式設(shè)置方式。

2.3 CSS選擇器

CSS選擇器主要包括三種，分別是標(biāo)記選擇器、類別選擇器和ID選擇器，這也是學(xué)習(xí)CSS所需掌握的基本語法，下面分別對這三種選擇器作簡要說明。

2.3.1 標(biāo)記選擇器。這個標(biāo)記必須是html的標(biāo)準(zhǔn)標(biāo)記，它的CSS代碼將作用于整個網(wǎng)頁中的該標(biāo)記。

2.3.2 類別選擇器.class。采用以 .號開頭，后面的class是由用戶自定義的名稱，在需要使用的地方直接應(yīng)用該樣式即可。

2.3.3 ID選擇器。id的名稱是由用戶自定義的，和類別選擇器不同的是id前面不再是.號，而是#號，語法格式基本相同，區(qū)別在于：同一個id名稱是不允許出現(xiàn)在兩個標(biāo)記中的，這會在JavaScript調(diào)用中出現(xiàn)錯誤。

2.4 CSS選擇器的聲明

2.4.1 集體聲明。就是將具有同樣屬性的CSS標(biāo)記同時進行聲明，各標(biāo)記之間用逗號隔開即可。

2.4.2 CSS選擇器的嵌套。嵌套意味著一個標(biāo)記之中嵌套了另一個標(biāo)記，那么在選擇器對標(biāo)記發(fā)生作用時，將按照嵌套的定義來實現(xiàn)，而對未包含在嵌套內(nèi)的標(biāo)記，將不起作用。

2.4.3 CSS的繼承。首先，包含在里面的標(biāo)記將首先繼承其父親的CSS屬性，然后再結(jié)合自己的屬性，如果父親標(biāo)記包括的屬性在自身標(biāo)記中有重新設(shè)置的，則按照自身的屬性來決定，反之繼承父親的屬性設(shè)置。

3 CSS+DIV盒子模型

3.1 CSS中的盒子模型

盒子模型是CSS中非常重要的概念，它主要是用于DIV塊之間與其他塊的關(guān)系以及自身塊的關(guān)系設(shè)置，如圖3-1所示。

圖3-1

其中，藍(lán)色部分表示DIV塊，橘色部分的Content表示盒子模型的內(nèi)容，border和content之間的黃色部分padding表示的是內(nèi)容和DIV塊邊框之間的距離，最外圍綠色部分的margin表示的是DIV塊與外圍其他塊之間的距離。

通過對盒子模型的padding和margin的設(shè)置，可以很好的控制網(wǎng)頁元素之間的距離，包括文字、段落之間的空隙以及段落本身與邊框之間的空隙都可以非常自由的進行控制。

3.2 元素的定位

在了解了盒子模型之后，元素便可以很好的進行定位，接下來我們來學(xué)習(xí)一下元素的定位。

3.2.1 float定位（浮動）

通過css定義float可以實現(xiàn)將div樣式層塊向左或向右浮動。其值包括 none |left |right，none :對象不浮動；left :對象浮在左邊；right :對象浮在右邊。在這里還需要補充說明一下clear屬性，有時會和float聯(lián)合使，用來清除浮動。

3.2.2 position定位

position屬性規(guī)定元素的定位類型。其值包括absolute|fixed|relat ive|static|inherit。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認(rèn)位置偏移。

4 總結(jié)

通過學(xué)習(xí)我們了解到DIV+CSS在網(wǎng)頁設(shè)計中不可缺少的地位和作用，包括頁面布局、網(wǎng)頁元素樣式設(shè)置等。在今后的學(xué)習(xí)中，我們將會涉及更多的CSS樣式以及DIV盒子的模型的綜合應(yīng)用，經(jīng)過自身的不斷深入學(xué)習(xí)，將會進一步領(lǐng)略到其中的奧妙，讓我們一起在靜態(tài)網(wǎng)頁制作的道路上越走越遠(yuǎn)。