可更换风格的Html和Css示例
一直想做一个可以更换风格的html和css界面，最近做了一个blog皮肤，总结了一些经验技巧，个人觉得还不错，所以写出来给大家分享分享。
本文通过一个简单的示例，介绍：
1、页面中使用em单位的中文字体；
2、用纯css做各种不同颜色的皮肤，应用在页面上；
3、使用javascript应用不同的皮肤，方便用户随时切换；
4、使用javascript和cookie，把用户选择的皮肤保存在cookie中，统一整个站点的皮肤设置。
因为我也不知道这种效果怎么描述，所以如果您暂时不能理解我的意思，可以先下载示例。
示例下载： http://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 >
好咯，现在随便选择一种颜色，然后刷新你的浏览器，是不是还是刚才所选择的颜色啊？
就写到这里吧，又长又臭的，这里是示例代码下载：http://files.cnblogs.com/darkdawn/changeable_skin_example.rar
同理通过这样的方式，还可以做任意变换宽度的页面风格，你可以试试。不过如果有sidebar这样的页面，变换宽度会比较麻烦一点，有时间也写写。