XHTML和CSS设计中的皮肤切换

nbsp;  margin-left: -30px;
    list-style: none;
)
.catalogNav li
(
    float: left;
    background: #CCC;
    line-height: 30px;
    border: solid 1px #black;
)
.catalogNav a
(
    width: 100%;
    text-align: center;
    height: 30px;
)
.catalogNav a:link
(
    color: #666;
    background: url(arrow_off.gif) #CCC no-repeat 5px 12px;
    text-decoration: none;
)
.catalogNav a:visited
(
    color: #666;
    text-decoration: underline;
)
.catalogNav a:hover
(
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    background: url(arrow_on.gif) #F00 no-repeat 5px 12px;
)
接下来我们还需要定义其他的站点独有的样式，如栏目标题、文章列表、文章正文、时间、注释、提示、错误等等各种样式，而且这些样式多以类和id来作为选择符。这些样式都是针对某个站点的，不适用于其他的站点，然后我们将这些样式保存为siteStyle.css文件。

这样我们就有了3个CSS文件。 SiteComm.css：任何站点都可以使用的样式文件，定义了常用的html标签样式。 SiteLayout.css：站点的布局文件，能适用于大多数的网站结构，具体细节需要调整。 siteStyle.css：站点独有的样式文件，能显示出本站点独特的风格和适应于站点的内容。

然后我们采用外部调用法：将这些样式表与页面关联起来。

<LINK rev="stylesheet" media="all" href="css/SiteComm.css" type="text/css" rel="stylesheet">
<LINK rev="stylesheet" media="all" href="css/SiteLayout.css" type="text/css" rel="stylesheet">
<LINK rev="stylesheet" media="all" href="css/siteStyle.css" type="text/css" rel="stylesheet">
在符合XHTML标准的设计中，我们使用外部调用法，好处不言而喻，HTML文档会变得非常的小，CSS文件被存在浏览器的缓存中，仅仅需要下载一次即可，并且你只需要修改一个文件就可以改变整个网站的样式。

并且这样我们才能通过客户端脚本，或者服务器端代码方便地改变样式表的连接地址，而快捷地实现换肤功能。

5、根据用户设置换肤
网站样式切换在网上已有很多现成的javascript换肤代码，一般使用cookie来保存用户设置，在请求页面时，改变页面的CSS文件连接即可。

而服务器端的换肤做法是根据用户请求，动态地生成CSS文件连接，用户设置一般保存在数据库或者cookie中。

由于我们使用了3个不同功能CSS样式文件来显示网站，所以我们可以设计出更加灵活的换肤方案和组合，如只切换主题而保留布局，和切换布局和主题，以及各种细节等等。

使用3个CSS样式文件额外的好处是，每当我们设计一个新的系统，它的样式风格特性几乎都可以大部分应用到以前的系统上（因为我们采用大致相同的页面结构模型，虽然显示千差万别，但主要的框架是一样的），这样我们就可以积累出相当数量和相当风丰富的界面样式库来。

6、通过校验
整个过程的最后一个步骤就是对XHTML\CSS代码进行验证。有很多种的工具都可以帮你对二者进行验证。

例如Dreamweaver MX即可检查我的样本代码的可访问性。你可以通过在文件菜单中选择Check Page然后选择Check Accessibility来实现。任何错误或是警告都会显示出来，还包括出现位置的行号以及对问题简要的解释。你可以在Dreamweaver MX的Reference工具中找到更多关于这些错误和警告的内容。

而Microsof