張玉葉

摘 要： 為網(wǎng)站“換膚”，或網(wǎng)站為用戶提供“換膚”選擇，可以大大吸引用戶的眼球，同時(shí)也能提高網(wǎng)站的知名度。文章詳細(xì)介紹了利用層疊樣式表CSS來(lái)實(shí)現(xiàn)這一技術(shù)的幾種常用方法，并分析了每種方法的優(yōu)、缺點(diǎn)和適用范圍，通過(guò)這些方法可讓建站者輕松地實(shí)現(xiàn)網(wǎng)站外觀的改變，即換膚。

關(guān)鍵詞： 層疊樣式表； CSS； 網(wǎng)站； 換膚

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2013）05-31-02

Changing skin of website by using CSS

Zhang Yuye

（Dept. of computer， Jinan Vocational Colleage， Jinan， Shangdong 250014， China）

Abstract： Some Web sites frequently change their skins， and even some sites also offer a variety of different skins for the user's own choice. This has not only greatly attracted the user's eyeballs， but also improved the site popularity. Several methods and technologies are introduced to realize this by using CSS. The advantages， disadvantages and the scope of application of each method are analyzed. Through these methods， the appearance of the site can be changed easily， namely changing skin.

Key words： cascading style sheet； CSS； Web site； changing skin

0 引言

我們?cè)谏暇W(wǎng)的時(shí)候會(huì)發(fā)現(xiàn)一些網(wǎng)站經(jīng)常進(jìn)行外觀的改變，正如一個(gè)人經(jīng)常改變他的服飾一樣。網(wǎng)站要想吸引人，也應(yīng)順應(yīng)其時(shí)事而經(jīng)常改變其外觀。例如碰到節(jié)日如國(guó)慶、春節(jié)等喜慶節(jié)日的時(shí)候，很多網(wǎng)站都換上了很具中國(guó)特色的中國(guó)紅，顯然很有節(jié)日氣氛。在碰到一些痛苦的時(shí)刻也會(huì)換上比較素淡的顏色來(lái)表示其心情，如汶川大地震的時(shí)候，很多網(wǎng)站都換上了黑色來(lái)表示全國(guó)人民對(duì)遇難同胞的哀悼之情。一些網(wǎng)站提供了幾種不同的外觀，由用戶自己來(lái)控制網(wǎng)站的外觀，即為用戶提供“換膚”選擇。本文探討如何實(shí)現(xiàn)為網(wǎng)站換膚。

在CSS出現(xiàn)之前這可能是一件比較困難的事，但是有了CSS的幫助，就可以輕松地實(shí)現(xiàn)網(wǎng)站的換膚。

1 CSS樣式表

CSS是Cascading Style Sheet（層疊樣式表）的縮寫(xiě)，是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言[1]。

由于以往的網(wǎng)站缺少動(dòng)感，在網(wǎng)頁(yè)內(nèi)容的排版布局上也存在很多困難，專業(yè)人員很難讓網(wǎng)頁(yè)按照自己的構(gòu)思和創(chuàng)意來(lái)顯示信息；專業(yè)人員即便是掌握了HTML語(yǔ)言精髓也需要通過(guò)多次地測(cè)試，才能駕馭好這些信息的排版，過(guò)程十分漫長(zhǎng)和痛苦。CSS樣式表就是在這種需求下誕生的。

利用CSS我們首先要為網(wǎng)頁(yè)上的元素精確地定位，CSS可以讓網(wǎng)頁(yè)設(shè)計(jì)者象導(dǎo)演一樣，輕易地控制由文字、圖片組成的演員們，在網(wǎng)頁(yè)這個(gè)舞臺(tái)上按劇本要求好好地表演。

接下來(lái)，把網(wǎng)頁(yè)上的內(nèi)容結(jié)構(gòu)和格式控制相分離。瀏覽者想要看的是網(wǎng)頁(yè)上的內(nèi)容結(jié)構(gòu)，而為了讓瀏覽者更好地看到這些信息，我們需要格式控制。以前兩者在網(wǎng)頁(yè)上的分布是交錯(cuò)結(jié)合的，查看修改很不方便，而現(xiàn)在把兩者分開(kāi)就會(huì)大大方便網(wǎng)頁(yè)的設(shè)計(jì)者。把內(nèi)容結(jié)構(gòu)和格式控制相分離，使得網(wǎng)頁(yè)可以只由內(nèi)容構(gòu)成，而將所有網(wǎng)頁(yè)的格式控制指向某個(gè)CSS樣式表文件。這樣可以使網(wǎng)站的維護(hù)和制作變得相對(duì)輕松。

2 CSS樣式表的優(yōu)點(diǎn)

⑴ 簡(jiǎn)化了網(wǎng)頁(yè)的格式代碼。外部的樣式表還會(huì)被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因?yàn)橹貜?fù)設(shè)置的格式只被保存一次）。

⑵ 易于更新。只要修改保存著網(wǎng)站格式的CSS樣式表文件就可以改變整個(gè)站點(diǎn)的風(fēng)格特色，這在修改頁(yè)面數(shù)量龐大的站點(diǎn)時(shí)，顯得格外有用?？梢员苊庖粋€(gè)一個(gè)網(wǎng)頁(yè)的修改，減少重復(fù)勞動(dòng)的工作量。真正做到一處改動(dòng)，全部改動(dòng)。

3 如何利用CSS為網(wǎng)站換膚

換膚之前我們需要先按W3C標(biāo)準(zhǔn)建好網(wǎng)站，在此設(shè)需要換膚的頁(yè)面文件為changeskin.html，并且為它準(zhǔn)備若干套表現(xiàn)不一樣的CSS。我們假設(shè)有兩套CSS，分別放在兩個(gè)不同的文件中：a.css和b.css。設(shè)a.css中的內(nèi)容如下：

body {

font-style：italic；

font-size：20px；

}

b.css中的內(nèi)容如下：

body {

font-style：normal；

font-size：40px；

}

“換膚”實(shí)質(zhì)上就是“換CSS”，我們要做的只是用某種方法讓瀏覽器載入另一套CSS，重新渲染頁(yè)面。實(shí)現(xiàn)的方法有很多種，下面我們介紹最常見(jiàn)的三種方法。

3.1 利用瀏覽器本身的功能

在需要換膚的頁(yè)面文件changeskin.html的和之間加入如下兩行代碼：

href="a.css"/>

title="風(fēng)格2" href="b.css"/>

然后用Firefox瀏覽器打開(kāi)這個(gè)頁(yè)面，在菜單欄中選擇：查看->頁(yè)面風(fēng)格，可以看到如圖1所示的頁(yè)面風(fēng)格選擇菜單，用戶可根據(jù)自己的喜好選擇某一風(fēng)格。