利用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所示的页面风格选择菜单，用户可根据自己的喜好選择某一风格。