一直想做一个可以更换风格的html和css界面，最近做了一个blog皮肤，总结了一些经验技巧，个人觉得还不错，所以写出来给大家分享分享。
本文通过一个简单的示例，介绍：
1、页面中使用em单位的中文字体；
2、用纯css做各种不同颜色的皮肤，应用在页面上；
3、使用javascript应用不同的皮肤，方便用户随时切换；
4、使用javascript和cookie，把用户选择的皮肤保存在cookie中，统一整个站点的皮肤设置。
因为我也不知道这种效果怎么描述，所以如果您暂时不能理解我的意思，可以先下载示例。
示例下载： https://files.cnblogs.com/darkdawn/changeable_skin_example.rar
第一个问题是解决以em为单位的中文字体的问题。这样做有很多好处，比如支持浏览器设置字体大小，比如段落缩进的时候也不会像使用px那样，修改字体大小之后还得去维护缩进尺寸等等，这方面前人已经有很多相关的文章了，原理就不细说了，我的实现很简单：
{
font: normal 63% "微软雅黑", Verdana, Arial, Helvetica, sans-serif;
}
这样做了之后，1em = 10px，主要是为了方便换算（1.2em就是常规的12px），本来字体大小应该是62.5%，但是这里为了兼容旧IE，所以使用了63%。
然后需要修改css文件，做一些初始化的工作（在这里这些样式并不重要，不过可以应用在你的真实项目中，所以我也贴出来了。）：
{
margin: 0; padding: 0;
}
li
{
list-style-type: none;
font-size: 1.2em;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl {}
body
{
font: normal 63% "微软雅黑", Verdana, Arial, Helvetica, sans-serif;
}
h1 { font-size: 2.4em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.2em; }
p
{
font-size: 1.2em;
margin-bottom: 1em;
}
这个问题解决之后，开始写html，由于这只是一个示例，所以我写得非常简单，不过在实践中的写法也是差不多的：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" rel="Stylesheet" href="styles/main.css" />
</head>
<body class="red">
<div id="wrapper">
<div id="header">
<h1>
Changeable Skin Example</h1>
</div>
<div id="content">
<h2>
测试列表
</h2>
<ul>
<li>
<h3>
列表项1</h3>
<p>
列表项1的说明文字，列表项1的说明文字，列表项1的说明文字，列表项1的说明文字，列表项1的说明文字。列表项1的说明文字，列表项1的说明文字，列表项1的说明文字，列表项1的说明文字，列表项1的说明文字。
</p>
</li>
<li>
<h3>
列表项1</h3>
<p>
列表项1的说明文字，列表项1的说明文字，列表项1的说明文字，列表项1的说明文字，列表项1的说明文字。
</p>
</li>
<li>
<h3>
列表项1</h3>
<p>
列表项1的说明文字，列表项1的说明文字，列表项1的说明文字，列表项1的说明文字，列表项1的说明文字。
</p>
</li>
</ul>
</div>
<div id="footer">
<p>
Copyright ©darkdawn 2008.</p>
</div>
</div>
</body>
</html>
好了，现在需要增加相应部分的css：
{
width: 760px;
}
#header
{
padding: 2em;
background: gray;
border-bottom: #666 1px dashed;
}
#footer
{
padding: 2em;
border-top: #666 1px dashed;
text-align: center;
background: gray;
}
#content
{
padding: 2em;
}
#content h2
{
padding: 0 0 1em 0;
}
#content p
{
width: 100%;
color: #fff;
text-indent: 2em;
background-color: gray;
}
这时候出来的效果图像这个样子：
嗯，默认样式就完成了。这时候我想给它加一点色彩，并且想让它是可以很容易修改颜色的，like this：
或者心情不好的时候，来点blue:
有点丑，不过这只是个例子而已，现在分别要实现这里的红色和蓝色主题css：
body.red #header h1 { color: red; }
body.red #content h2 { color: red; }
body.red #content ul li p { background: red; }
/* blue */
body.blue #header h1 { color: blue; }
body.blue #content h2 { color: blue; }
body.blue #content ul li p { background: blue; }
哈，很简单是吧，这里并没有去修改前面大段的css代码，而是新写一个，利用css selector来选择不同的风格。这样做的好处非常多，我认为最突出的是可以大幅简化javascript代码，并且非常容易维护。
css完成了，现在为body增加一个class，红色或者蓝色的风格就可以实现了：
好了，到这里可以暂时告一段落了，样式基本实现，下面我们来为它增加一点html，一点javascript，让访问者可以用自己喜欢的颜色主题。
==========================我是华丽的分割线==========================
首先我们做一个菜单，增加到header部分：
<h1>
Changeable Skin Example</h1>
<div id="options">
<ul class="colorSelection">
<li><a href="#" class="red">Red</a></li>
<li><a href="#" class="blue">Blue</a></li>
</ul>
</div>
</div>
然后增加一点css：
#header div#options
{
float: right;
}
#header div#options ul,li
{
display: inline;
font-size: 1.2em;
}
#header div#options li a
{
padding: 0 0.5em;
background: white;
}
#header div#options li a.red
{
color: red;
}
#header div#options li a.blue
{
color: blue;
}
OK,有菜单了。现在需要做的就是写一点javascript，让它可以自由变换了。
本来应该用标准javascript来写的，不过我这里打算用一个javascript框架：Mootools，这个框架其实和jquery差不多，同样是跨浏览器的，语法也很类似，因为我用的时间比较长，已经习惯了，好了，先去http://www.mootools.net下载，这里需要用的是element，dom和cookie，不过我建议你都勾上，熟悉熟悉。
先在head部分引用js：
在head部分增加下面的js代码：
<title></title>
<link type="text/css" rel="Stylesheet" href="styles/main.css" />
<script type="text/javascript"src="scripts/mootools-1.2-core.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//获得option元素下的所有anchor元素，并且开始循环。
$('options').getElements('a').each(function(el) {
//为每个anchor元素增加点击事件处理代码。
el.addEvent('click', function(e) {
new Event(e).stop();
//获取自身的css class
var className = el.getProperty('class');
//因为body使用的class名称和这里的anchor class名称相同，可以直接把body的class名称修改为这个class名称
$$('body').setProperty('class', className);
});
});
});
</script>
</head>
好咯，测试运行，一切正常。
（以上代码在IE6/IE7/IE8/FF3/OPERA9/SAFARI3中运行正常，FF2没有安装，没有进行尝试，不过应该是没有问题的。）
想多增加一点风格？OK，没问题，只需要增加相应颜色的css代码，以及options里面的链接标签就可以了（记得设置color噢）。
不过这样有个问题，就是每次加载这个页面的时候，都会使用默认的颜色主题，现在是单页文件，所以不会造成问题，如果整个站点都使用了这样的主题，那么就会造成问题，在这个页面浏览的时候，用户把它设置成红色，点击里面的链接之后，下个页面的又变回默认颜色了。解决办法是：把body需要的classname写进cookie，每次加载的时候，读取cookie，设置body的class，修改javascript代码：
<title></title>
<link type="text/css" rel="Stylesheet" href="styles/main.css" />
<script type="text/javascript"src="scripts/mootools-1.2-core.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//获得body的class
var bodyClassKey = 'bodyClassName';
if ($$('body').getProperty('class') == null) {
//最后一个参数是把cookie应用到请求的根目录中，这样整个站点就能保持一致
Cookie.write(bodyClassKey, 'default', { path: '/' });
}
//设置body的class
$$('body').setProperty('class', Cookie.read(bodyClassKey));
//获得option元素下的所有anchor元素，并且开始循环。
$('options').getElements('a').each(function(el) {
//为每个anchor元素增加点击事件处理代码。
el.addEvent('click', function(e) {
new Event(e).stop();
//获取自身的css class
var className = el.getProperty('class');
//因为body使用的class名称和这里的anchor class名称相同，可以直接把body的class名称修改为这个class名称
$$('body').setProperty('class', className);
//设置body的class
Cookie.write(bodyClassKey, className, { path: '/'} );
});
});
});
</script>
</head>
好咯，现在随便选择一种颜色，然后刷新你的浏览器，是不是还是刚才所选择的颜色啊？
就写到这里吧，又长又臭的，这里是示例代码下载：https://files.cnblogs.com/darkdawn/changeable_skin_example.rar
同理通过这样的方式，还可以做任意变换宽度的页面风格，你可以试试。不过如果有sidebar这样的页面，变换宽度会比较麻烦一点，有时间也写写。
