当前位置：网学 > 编程文档 > XHTML > 正文

XHTML和CSS设计中的皮肤切换

作者：用户投稿来源：网络发布时间： 12/10/19

二的选择。

2、建立基本的通用样式
由于所有的XHTML文件都是由各种各样的HTML标签和标签内的文字组成，而一些基本的标签在每个XHTML文件都存在的，如：body、table、td、div、h1—h6、ul、li、input等等，如果我们定义好了这些标签的CSS样式，如：字体，字号，行距，背景色，背景图等等，我们就有了一个基本的样式风格，就如同在Word或PowerPoint中的主题，每个主题就是一套风格样式。因此，我们可以根据基本的HTML标签定义出一个通用的样式来，例如建立一个siteComm.css文件，定义如下：

/*文中的样式表语法中的"("及")"为示例所用,因为blog每次保存花括号都出现错误。请在使用时改为正确的符号*/
BODY
(
    background: url(images/bg_page.jpg);
    font: 10pt verdana,arial,;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
)
H1, H2, H3, H4, H5, H6
(
    border-bottom: solid 1px #ccc;
    margin: 1em 0;
)
TD
(
    font: 10pt;
)
A:link
(
    color: #057AE0;
    text-decoration: none;
)
A:visited
(
    color: #057AE0;
    text-decoration: none;
)
A:hover
(
    color: #009900;
)
A:active
(
    color: #009900;
)

这样的一个样式文件，可以适用于任何一个网页，只要添加引用我们都可以立刻看见效果。

由于样式表的继承规则是外部的标签样式会保留下来继承给这个标签所包含的其他标签。事实上，所有在标签中嵌套的标签都会继承外层标签指定的属性值，有时会把很多层标签的样式叠加在一起，例如在body标签中定义了字体大小，那么div、p等标签也会继承一样的字体大小，如果在P标签中又定义了字体颜色，那么P标签中的文字既具有body标签的字体大小又有P标签的字体颜色。需要注意的是，table标签不会继承body的字体大小设定，所以在上面的样式表中，我们单独来定义td的样式。

3、定义好页面的结构布局
很多时候，我们在制作网页时总是从视觉出发，先用Photoshop或者Fireworks画出来、思考页面的配色，做一些很炫的效果，很精美的图片，再切割成小图。然后通过编辑HTML将所有设计变成页面。

然而，有视觉的缺陷的人，不能理解这些颜色或者效果。PDA、移动电话和屏幕阅读机上也无法解析这些效果。

因此外观并不是最重要的。一个结构良好的XHTML可以通过CSS的不同定义，显示成任何外观，显示在任何支持XHTML的网络设备上。

通过分析我们可以发现，对于大多数WEB网站来说，页面都是由一些类似的内容区块所组成，如：

站点标题区
站点导航(主菜单，次及菜单)
功能区(例如搜索框、用户登陆区)
内容区(文章正文或者文章、产品列表)
页脚(版权和有关法律声明)
然后我们用DIV标签来将这些区块包含起来，类似这样：

<div class="pageHeader">站点标题
</div>
<div class="pageNav">站点导航
</div>
<div class="catalogNav">栏目导航
</div>
<div class="pageContent">文章正文或列表等等
</div>
<div class="pageSearch">查询
</div>
<div class="pageBottom">页脚
</div>
通过CSS的定义，我们可以将这些DIV标签包含的区块放在页面上任何位置，再指定这些块的颜色、字体、边框、背景以及对齐属性等等。如：我们再建立siteLayout.css文件，定义如下：

.pageHeader
（
padding: 10px;
border: 1px solid #666