☆ 陳文淵 高 潔

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

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

一、DIV＋CSS 標準的優(yōu)點

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

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

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

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

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

二、CSS 和DIV 的簡介

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

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

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

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

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

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

2．嵌入式樣式表

＜style type＝″text／css″＞

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

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

3．外部樣式表

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

4．輸入樣式表

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

四、樣式表選擇器類型

樣式表選擇器語法:Selector邀property:value妖。

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

1．html seletor（html 選擇器）

直接用html 標簽作為selector 如：body、div、h1、table等。

2．class selector（類選擇器）

可以為某個HTML 標簽的各個類別定義樣式規(guī)則：

也可以為某個類別的所有HTML 標簽定義樣式規(guī)則：

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

3．id 選擇器

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

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

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

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

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

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

5．組合選擇器

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

6．偽元素選擇器

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

常用的偽元素:

五、總結(jié)

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

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

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

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