XHTML CSS制作样式风格切换的WEB站点

互联网   发布时间：2008-10-17 19:26:50   作者：佚名   我要评论

随着XHTML的逐渐推广流行，HTML在许多场合已经显得过时。WorldWideWebConsortium(W3C)于2000年6月26日发布了XHTML的第一个版本作为推荐标准。XHTML标准的目标是取代html。按照W3C的说法，“XHTML是html的继承者”(http://www.w3.org/MarkUp/)。

XHTML具有两大目标

随着XHTML的逐渐推广流行，HTML在许多场合已经显得过时。WorldWideWebConsortium(W3C)于2000年6月26日发布了XHTML的第一个版本作为推荐标准。XHTML标准的目标是取代html。按照W3C的说法，“XHTML是html的继承者”(http://www.w3.org/MarkUp/)。

XHTML具有两大目标：

在文档结构和表示形式之间创建更明显的分离。

将html重新表示为XML的应用程序。

使用XHTML标准的好处是：只需设计页面一次，即可让该页以完全相同的方式在任何现代的浏览器中显示和工作。例如，在按照标准生成以后，页面在InternetExplorer、MozillaFirefox、NetscapeNavigator、Opera、Camino和Safari)中以相同的方式显示，而无需完成任何额外的工作。并且XHTML标准可以使Web站点更易于为智能手机、残疾人电脑等设备访问。

由于XHTML标准要求在在文档结构和表示形式之间创建更明显的分离。因此使用CSS样式表是必不可少的。CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。CSS是CascadingStyleSheet的简写，译为“层叠样式表单”。在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1,自CSS1的版本之后，又在1998年5月发布了CSS2版本。

CSS的发明者的目的是除去表示性元素，即应该根据内容所表示的东西来标记内容，而样式表应该用于美化内容。而这一点与XHTML分离文档结构和表示形式的目标是一致，(在XHTML2.0将除去b、i和img标记(以及big、small和tt)，甚至不赞成使用br，准备从将来的发行版中除去它。原因在于大多数标记都是表示性的。它们的唯一目的就是给予浏览器指令，规定有关其内容应该如何显示，但却完全未提供有关其内容是什么的信息。)因此它们成了最好的合作伙伴。更多关于XHTML2.0的资料，请参见：http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html

CSS过去经常被用来定义字体的属性，而现在新标准中我们将用它来控制整个页面的显示。然而，我们必须需要做一些不同于以往的处理来适应这种新的变化，如：使用div来布局而不是表格，使用结构化、语义化的标记等等。由于采用新的处理方式，我们现在可以轻松地设计出可重用的CSS(同一个样式文件多个WEB站点中使用)以及可换肤的WEB站点(一个站点使用多种不同风格的样式)。

示例请见四川省建设厅信息门户,界面切换在右上方，如图1所示。由于时间原因，并未通过XHTML和CSS校验，但原理是一样的。

图1：界面样式切换

1、重新设计站点的HTML

首先我们要去掉网页中有关外观的标签。在以前的代码中，我们常用一个表格用来在页面的内容中创建一个有边框的区块，我们还使用〈b〉来加粗文本。用来改变字体颜色等等。用
标签来创建段落等。

而要做出能适应XHTML标准和能随意换肤的网站，我们须要避免在页面中使用有关外观的标签。使文档结构和表示形式分离的一个最大的好处就是它使文档在没有CSS时，仍然可以使用和访问。表现(就是文档看上去的样子)在一个支持性好的浏览器中也将呈现的不一样，但是它的内容将永远不变，大多数情况，对于访问网站的人来说，内容实际上比表现的方式更加重要。这就是为什么给那些支持性不好的浏览器发送一个没有样式的页面，要比把他们排斥在外要好的原因。

现在比较流行的做法是使用DIV、SPAN等标签来布局整个页面，而TABLE,UL,PRE,CODE等标签来显示数据，用UL是用来显示无序的列表信息，而OL显示有序的列表信息。这将比用TABLE来显示一个列表更有语义上的意义，同时UL和OL在浏览器中比TABLE标签更快有下载速度，并且相对于TABLE，CSS对UL和OL的外观控制更加灵活。当然对于复杂的数据，比如报表，用TABLE来显示仍然是不二的选择。

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:10ptverdana,arial,;

margin-top:0px;

margin-left:0px;

margin-right:0px;

margin-bottom:0px;

)

H1,H2,H3,H4,H5,H6

(

border-bottom:solid1px#ccc;

margin:1em0;

)

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标签来将这些区块包含起来，类似这样：

站点标题