應(yīng)用DIV+CSS 設(shè)計(jì)網(wǎng)頁(yè)的研究

☆ 陳文淵 高 潔

（1．山東師范大學(xué)傳播學(xué)院，山東濟(jì)南250014； 2．濰坊市教育學(xué)院，山東濰坊 261000）

在傳統(tǒng)的網(wǎng)頁(yè)制作中，經(jīng)常根據(jù)需要變換字體的大小、顏色和種類(lèi)等,一般多采用HTML(超文本標(biāo)記語(yǔ)言)的＜FONT＞標(biāo)簽來(lái)實(shí)現(xiàn)。特別是有一些網(wǎng)站在某些節(jié)日需要變化風(fēng)格的時(shí)候，也經(jīng)常需要修改大量的代碼。這樣會(huì)造成網(wǎng)站編輯工作量增大、代碼過(guò)長(zhǎng)、可讀性較差的問(wèn)題。采用CSS 技術(shù)則可簡(jiǎn)化這些代碼,并有效地對(duì)超文本的布局、字體、背景等項(xiàng)進(jìn)行精確控制。

一、DIV＋CSS 標(biāo)準(zhǔn)的優(yōu)點(diǎn)

相比于傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)方式，使用DIV＋CSS 進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)有如下幾個(gè)鮮明的特點(diǎn)：

（1）表現(xiàn)和內(nèi)容相分離，結(jié)構(gòu)清晰，移植性好。

（2）大大縮減頁(yè)面代碼，縮短重新編輯時(shí)間，提高頁(yè)面瀏覽速度。

（3）移植性好?？梢砸淮卧O(shè)計(jì)，隨處發(fā)布。

（4）使頁(yè)面的字體和布局變得更漂亮，更容易編排，使頁(yè)面真正賞心悅目等。

二、CSS 和DIV 的簡(jiǎn)介

CSS 是Cascading Style Sheet 的縮寫(xiě)。譯作層疊樣式表,是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。使用CSS 可以將格式和結(jié)構(gòu)分離,以前所未有的能力控制頁(yè)面布局,制作體積更小下載更快的網(wǎng)頁(yè),將許多網(wǎng)頁(yè)同時(shí)更新,比以往快且更容易。DIV 全稱division 意為“區(qū)分”使用DIV 的方法跟使用其他tag 的方法一樣。DIV 本身就是容器性質(zhì)的，不但可以內(nèi)嵌table，還可以內(nèi)嵌文本和其他的HTML 代碼。

三、樣式元素應(yīng)用方法

簡(jiǎn)單地說(shuō),樣式就是一個(gè)規(guī)則,它告訴瀏覽器如何將(X)HTML 文檔中的內(nèi)容呈現(xiàn)給讀者,每個(gè)(X)HTML 標(biāo)簽都有一些特定的樣式屬性, 它的值決定了瀏覽器如何顯示這個(gè)標(biāo)簽。樣式表主要有四種方式：內(nèi)聯(lián)式樣式表、嵌入式樣式表、外部樣式表和輸入樣式表。

1．內(nèi)聯(lián)式樣式

在標(biāo)簽中加入style 屬性, 后面跟一些屬性及屬性的值，如：

＜h1 style＝″margin: 4px ; width : 50px; ″＞山東師范大學(xué)＜／h1＞。由于內(nèi)聯(lián)樣式只影響被定義的標(biāo)簽,具有局部性,在每個(gè)需要樣式的標(biāo)簽中都要進(jìn)行定義,大量使用style 屬性會(huì)顯著增加代碼，加大工作量，并且使代碼變得難以維護(hù)。

2．嵌入式樣式表

＜style type＝″text／css″＞

內(nèi)部樣式表是把樣式表放到頁(yè)面的＜head＞區(qū)里，這些定義的樣式就應(yīng)用到頁(yè)面中了，樣式表是用＜style＞標(biāo)記插入的。

＜style＞元素是用來(lái)說(shuō)明所要定義的樣式。TYPE 屬性是指定style 元素以css 的語(yǔ)法定義。有些低版本的瀏覽器不能識(shí)別style 標(biāo)記，這意味著低版本的瀏覽器會(huì)忽略style 標(biāo)記里的內(nèi)容，并把style 標(biāo)記里的內(nèi)容以文本直接顯示到頁(yè)面上。為了避免這樣的情況發(fā)生，我們用加HTML 注釋的方式＜選－－ 注釋 －－＞隱藏內(nèi)容而不讓它顯示。

3．外部樣式表

＜link href＝″樣式表地址″ rel＝″stylesheet″ type＝″text／css″ ／＞

4．輸入樣式表

可以使用css 的＠import 聲明將一個(gè)外部樣式表文件輸入到另外一個(gè)css 文件中，被輸入的css 文件中的樣式規(guī)則定義語(yǔ)句就成為了輸入到的css 文件的一部分，也可以使用＠import 聲明將一個(gè)css 文件輸入到網(wǎng)頁(yè)文件的＜style＞＜／style＞標(biāo)簽對(duì)中，被輸入的css 文件中的樣式規(guī)則定義語(yǔ)句就成了＜style＞＜／style＞標(biāo)簽對(duì)中的語(yǔ)句。

四、樣式表選擇器類(lèi)型

樣式表選擇器語(yǔ)法:Selector邀property:value妖。

其中Selector 為選擇符,可以是html 標(biāo)簽，也可以是用戶自定義的樣式。Property 為屬性，value 為值。屬性和屬性值之間用冒號(hào)(:)隔開(kāi)。多個(gè)定義之間用分號(hào)（；）隔開(kāi)。

1．html seletor（html 選擇器）

直接用html 標(biāo)簽作為selector 如：body、div、h1、table等。

2．class selector（類(lèi)選擇器）

可以為某個(gè)HTML 標(biāo)簽的各個(gè)類(lèi)別定義樣式規(guī)則：

也可以為某個(gè)類(lèi)別的所有HTML 標(biāo)簽定義樣式規(guī)則：

＜／style＞ 這時(shí) 段落一“山東”和標(biāo)題一“大學(xué)”都是紅色的。

3．id 選擇器

用CSS 布局主要用層“div”來(lái)實(shí)現(xiàn),而div 的樣式通過(guò)“id 選擇器”來(lái)定義。例如我們首先定義一個(gè)div:

＜div id＝″one″＞＜div＞ 然后在樣式表里這樣定義:

其中“one”是你自己定義的id 名稱。注意在前面加″?！逄?hào)。

4．關(guān)聯(lián)選擇器

關(guān)聯(lián)選擇器是指一個(gè)用空格隔開(kāi)的兩個(gè)或更多的單一選擇器組成的字符串，例如：

p em 邀background : yellow妖，其中p em 就是關(guān)聯(lián)選擇器，他表示段落中的＜em＞＜／em＞標(biāo)簽對(duì)中的背景為黃色，而其他地方出現(xiàn)＜em＞＜／em＞則不受影響。

5．組合選擇器

當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明,元素之間用逗號(hào)分隔:

6．偽元素選擇器

偽元素選擇器是相對(duì)同一個(gè)HTML 元素的各種狀態(tài)和其所包括的部分內(nèi)容的一種定義方式。例如對(duì)超鏈接的正常狀態(tài)，訪問(wèn)過(guò)的狀態(tài)，選中狀態(tài)，光標(biāo)移到超鏈接上的狀態(tài)，對(duì)于段落的首文字和首行，都可以使用偽元素選擇器來(lái)定義。

常用的偽元素:

五、總結(jié)

本文中筆者結(jié)合實(shí)例對(duì)CSS＋DIV 進(jìn)行了簡(jiǎn)單的介紹，展現(xiàn)了其在網(wǎng)頁(yè)設(shè)計(jì)中靈活、強(qiáng)大的功能，可以看到，在網(wǎng)頁(yè)中使用CSS＋DIV 能達(dá)到三個(gè)目的：一是優(yōu)化網(wǎng)頁(yè)結(jié)構(gòu),顯著減小網(wǎng)頁(yè)文件的大小,使得網(wǎng)頁(yè)瀏覽速度更快。二是網(wǎng)頁(yè)的布局和樣式的調(diào)整都可以在CSS 文件中進(jìn)行,不需要改動(dòng)每個(gè)HTML 文件,這對(duì)于維護(hù)一個(gè)大型網(wǎng)站很重要,能為網(wǎng)站維護(hù)人員節(jié)省大量時(shí)間和精力。三是輕松設(shè)計(jì)具有復(fù)雜布局的網(wǎng)頁(yè),使網(wǎng)頁(yè)更加美觀。

[1] 郭偉偉．CSS 全程指南[M]．北京:電子工業(yè)出版社,2008．

[2] 陳剛．CSS 標(biāo)準(zhǔn)網(wǎng)頁(yè)布局開(kāi)發(fā)指南[M]．北京:清華大學(xué)出版社,2007．

[3] 技橋譯．HTML 與XHTML 權(quán)威指南[M]．北京:清華大學(xué)出版社,2003．33－199．