利用CSS輕松為網(wǎng)站換膚

張玉葉

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

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

中圖分類號：TP393 文獻(xiàn)標(biāo)志碼：A 文章編號：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 引言

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

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

1 CSS樣式表

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

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

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

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

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

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

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

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

換膚之前我們需要先按W3C標(biāo)準(zhǔn)建好網(wǎng)站，在此設(shè)需要換膚的頁面文件為changeskin.html，并且為它準(zhǔn)備若干套表現(xiàn)不一樣的CSS。我們假設(shè)有兩套CSS，分別放在兩個不同的文件中：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，重新渲染頁面。實(shí)現(xiàn)的方法有很多種，下面我們介紹最常見的三種方法。

3.1 利用瀏覽器本身的功能

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

href="a.css"/>

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

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