基于ＣＳＳ技術在網頁設計中的應用

彭　瑩

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

[關鍵詞]CSS 網頁 級聯樣式表 HTML

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

一、引言

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

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

二、CSS與HTML的結合方式

一個外部的樣式表可以通過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文件配置服務器而將text/css當作Content-type內容發(fā)送出去也是一個好注意。

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

P {margin: 2em }

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

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

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

print，輸出到打印機；

projection，提交到投影機；

aural，揚聲器；

braille，提交到凸字觸覺感知設備；

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

tv，電視機；

all，所有輸出設備。

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

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

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

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

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

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

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

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

＜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"樣式，作為一個首選樣式表被應用。要組合多個樣式表成一個單一樣式，必須在每個樣式表中使用相同TITLE。

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

三、CSS在網站中的應用實例

在設計網站的頁面中，增加以下定義，會使頁面有特殊的顯示效果。

網站中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定義了網頁文字的字體和大小，以避免因網頁瀏覽器的設置改變而引起的網頁字體和大小的變化，影響頁面瀏覽者的信息瀏覽；cursor: crosshair定義了頁面鼠標樣式，在這里將它定義為十字型，以反映網頁的總體設計思想；font-style: normal定義了網頁字體風格，可以定義為普通、加粗、傾斜三種樣式，background-color: #FFFFFF; background-image: none它們是對網頁背景顏色和背景圖片的設置。

四、結束語

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