利用CSS輕松為網站換膚

張玉葉

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

關鍵詞： 層疊樣式表； CSS； 網站； 換膚

中圖分類號：TP393 文獻標志碼：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 引言

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

在CSS出現之前這可能是一件比較困難的事，但是有了CSS的幫助，就可以輕松地實現網站的換膚。

1 CSS樣式表

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

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

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

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

2 CSS樣式表的優點

⑴ 簡化了網頁的格式代碼。外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數量（因為重復設置的格式只被保存一次）。

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

3 如何利用CSS為網站換膚

換膚之前我們需要先按W3C標準建好網站，在此設需要換膚的頁面文件為changeskin.html，并且為它準備若干套表現不一樣的CSS。我們假設有兩套CSS，分別放在兩個不同的文件中：a.css和b.css。設a.css中的內容如下：

body {

font-style：italic；

font-size：20px；

}

b.css中的內容如下：

body {

font-style：normal；

font-size：40px；

}

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

3.1 利用瀏覽器本身的功能

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

href="a.css"/>

title="風格2" href="b.css"/>

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