可更换风格的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那样，修改字体大小之后还得去维护缩进尺寸等等，这方面前人已经有很多相关的文章了，原理就不细说了，我的实现很简单：

body
{
    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，由于这只是一个示例，所以我写得非常简单，不过在实践中的写法也是差不多的：

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< 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  &copy; darkdawn 2008. </ p >
         </ div >
     </ div >
</ body >
</ html >

好了，现在需要增加相应部分的css：

#wrapper
{
    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：

 

/*  red  */
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，红色或者蓝色的风格就可以实现了：

< body  class ="blue" >

 

好了，到这里可以暂时告一段落了，样式基本实现，下面我们来为它增加一点html，一点javascript，让访问者可以用自己喜欢的颜色主题。

==========================我是华丽的分割线==========================

 

首先我们做一个菜单，增加到header部分：

 

< div  id ="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：

 

/*  options  */
#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：

< script  type ="text/javascript" src ="scripts/mootools-1.2-core.js" ></ script >

 

在head部分增加下面的js代码：

 

< head >
     < 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代码：

 

< head >
     < 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这样的页面，变换宽度会比较麻烦一点，有时间也写写。

转载于:https://www.cnblogs.com/darkdawn/archive/2008/09/10/1288367.html