基于ＣＳＳ技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

彭　瑩

[摘要]通過(guò)研究CSS層疊樣式表的主要思想，結(jié)合具體實(shí)例介紹如何在網(wǎng)頁(yè)設(shè)計(jì)中使用樣式表的方法，使讀者準(zhǔn)確掌握CSS技術(shù)，并可進(jìn)行實(shí)踐運(yùn)用。

[關(guān)鍵詞]CSS 網(wǎng)頁(yè) 級(jí)聯(lián)樣式表 HTML

中圖分類(lèi)號(hào)：TP3文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1671－7597（2009）0420048－01

一、引言

CSS是一種樣式表（stylesheet）技術(shù)。也有的人稱(chēng)之為層疊樣式表

（Cascading Stylesheet）。它的作用簡(jiǎn)單的說(shuō)就是可以使你在同一頁(yè)面里使用不同的超鏈接樣式。用CSS僅僅改變一個(gè)文件就可以改變數(shù)百個(gè)網(wǎng)頁(yè)的外觀，個(gè)性化的表現(xiàn)而不損，這些都因?yàn)榫W(wǎng)頁(yè)樣式表的強(qiáng)大和靈活特性。

二、CSS與HTML的結(jié)合方式

一個(gè)外部的樣式表可以通過(guò)HTML的LINK元素連接到HTML文檔中：

＜LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen＞

＜LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"＞

＜LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"＞

＜LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural＞

＜LINK＞標(biāo)記是放置在文檔的HEAD部分。可選的TYPE屬性用于指定媒體類(lèi)型--text/css是一個(gè)層疊樣式表--允許瀏覽器忽略它們不支持的樣式表類(lèi)型。為CSS文件配置服務(wù)器而將text/css當(dāng)作Content-type內(nèi)容發(fā)送出去也是一個(gè)好注意。

外部樣式表不能含有任何像＜HEAD＞或＜STYLE＞這樣的HTML的標(biāo)記。樣式表僅僅由樣式規(guī)則或聲明組成。一個(gè)單獨(dú)由

P {margin: 2em }

組成的文件就可以用作外部樣式表了。

＜LINK＞標(biāo)記也有一個(gè)可選的MEDIA屬性，用于指定樣式表被接受的介質(zhì)或媒體。允許的值有：

screen（缺省值），提交到計(jì)算機(jī)屏幕；

print，輸出到打印機(jī)；

projection，提交到投影機(jī)；

aural，揚(yáng)聲器；

braille，提交到凸字觸覺(jué)感知設(shè)備；

tty，電傳打字機(jī) （使用固定的字體）；

tv，電視機(jī)；

all，所有輸出設(shè)備。

多樣的媒體通過(guò)用逗號(hào)隔開(kāi)的列表或值all指定。

Netscape Navigator 4.x錯(cuò)誤地忽略除了screen值外的任何使用MEDIA值聲明的連接或嵌入樣式表。例如，MEDIA="screen,projection"會(huì)令到樣式表被Navigator 4.x忽略，盡管展示的設(shè)備是計(jì)算機(jī)的屏幕。Navigator 4.x也忽略使用MEDIA=all聲明的樣式表。

REL屬性用于定義連接的文件和HTML文檔之間的關(guān)系。REL=StyleSheet

指定一個(gè)固定或首選的樣式而REL="Alternate StyleSheet"定義一個(gè)交互樣式。固定樣式在樣式表激活時(shí)總被應(yīng)用。缺少的TITLE屬性，就像例子中的第一個(gè)＜LINK＞標(biāo)記，定義一個(gè)固定樣式。

一個(gè)首選樣式會(huì)自動(dòng)被應(yīng)用，就像例子中的第二個(gè)＜LINK＞標(biāo)記。REL=StyleSheet和一個(gè)TITLE屬性的組合指定一個(gè)首選的樣式。網(wǎng)頁(yè)制作者不能指定多于一個(gè)的首選樣式。

交互樣式通過(guò)REL="Alternate StyleSheet"指出。例子中的第三個(gè)＜LINK＞標(biāo)記定義一個(gè)交互樣式，用戶可以選擇用來(lái)代替首選樣式表。

注意現(xiàn)在的瀏覽器一般都缺乏選擇交互樣式的能力。

單一的樣式也可以通過(guò)多個(gè)樣式表給出：

＜LINK REL=StyleSheet HREF="basics.css" TITLE=”Contemporary"＞

＜LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"＞

＜LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary"＞

在這個(gè)例子中，三個(gè)樣式表組合成一個(gè)"Contemporary"樣式，作為一個(gè)首選樣式表被應(yīng)用。要組合多個(gè)樣式表成一個(gè)單一樣式，必須在每個(gè)樣式表中使用相同TITLE。

當(dāng)樣式被應(yīng)用到很多的網(wǎng)頁(yè)時(shí)，一個(gè)外部樣式表是理想的。網(wǎng)頁(yè)制作者使用外部樣式表可以改變整個(gè)網(wǎng)站的外觀而僅僅通過(guò)改變一個(gè)文件。同樣的，大多數(shù)瀏覽器會(huì)保存外部樣式表在緩沖區(qū)，從而如果樣式表在緩沖區(qū)就避免了在展示網(wǎng)頁(yè)時(shí)的延遲。

三、CSS在網(wǎng)站中的應(yīng)用實(shí)例

在設(shè)計(jì)網(wǎng)站的頁(yè)面中，增加以下定義，會(huì)使頁(yè)面有特殊的顯示效果。

網(wǎng)站中CSS樣式表使用：

huali {font-family: "宋體"; font-size: 12px; cursor: crosshair; font-style: normal; text-decoration: none; background-color: #FFFFFF; background-image: none; list-style-image: none}

.text {cursor: crosshair; filter: Mask(Color=#ff9900); font-size: 12px; font-style: normal; text-decoration: none}

在這個(gè)樣式表中使用了：font-family:"宋體" ; font-size: 12px定義了網(wǎng)頁(yè)文字的字體和大小，以避免因網(wǎng)頁(yè)瀏覽器的設(shè)置改變而引起的網(wǎng)頁(yè)字體和大小的變化，影響頁(yè)面瀏覽者的信息瀏覽；cursor: crosshair定義了頁(yè)面鼠標(biāo)樣式，在這里將它定義為十字型，以反映網(wǎng)頁(yè)的總體設(shè)計(jì)思想；font-style: normal定義了網(wǎng)頁(yè)字體風(fēng)格，可以定義為普通、加粗、傾斜三種樣式，background-color: #FFFFFF; background-image: none它們是對(duì)網(wǎng)頁(yè)背景顏色和背景圖片的設(shè)置。

四、結(jié)束語(yǔ)

本文結(jié)合實(shí)例對(duì)CSS進(jìn)行了簡(jiǎn)明扼要的介紹，展現(xiàn)了CSS在網(wǎng)頁(yè)設(shè)計(jì)中靈活、強(qiáng)大的功能，可以看到，在網(wǎng)頁(yè)中使用CSS能達(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è)更美觀。