淺談CSS+DIV 在網(wǎng)頁(yè)設(shè)計(jì)和布局中的作用

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

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

1 引言

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

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

2. CSS層疊樣式表概述

2.1 CSS概念及功能簡(jiǎn)介

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

2.2 CSS在頁(yè)面控制作用方面的三種樣式

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

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

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

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

2.3 CSS選擇器

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

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

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

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

2.4 CSS選擇器的聲明

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

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

2.4.3 CSS的繼承。首先，包含在里面的標(biāo)記將首先繼承其父親的CSS屬性，然后再結(jié)合自己的屬性，如果父親標(biāo)記包括的屬性在自身標(biāo)記中有重新設(shè)置的，則按照自身的屬性來(lái)決定，反之繼承父親的屬性設(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塊與外圍其他塊之間的距離。

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

3.2 元素的定位

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

3.2.1 float定位（浮動(dòng)）

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

3.2.2 position定位

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

4 總結(jié)

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