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

彭　瑩

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

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

中圖分類號：TP3文獻標識碼：A文章編號：1671－7597（2009）0420048－01

一、引言

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

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

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

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

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

P {margin: 2em }

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

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

screen（缺省值），提交到計算機屏幕；

print，輸出到打印機；

projection，提交到投影機；

aural，揚聲器；

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

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

tv，電視機；

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

多樣的媒體通過用逗號隔開的列表或值all指定。

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

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

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

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

交互樣式通過REL="Alternate StyleSheet"指出。例子中的第三個＜LINK＞標記定義一個交互樣式，用戶可以選擇用來代替首選樣式表。

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

單一的樣式也可以通過多個樣式表給出：

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

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

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

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

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

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

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

網(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}

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

四、結(jié)束語

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