而要做出能适应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的样式。










