当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 标准化你的网页

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 标准化你的网页


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 48 ::
收藏到网摘: n/a

Web标准是越来越突出了,现在建站都讲究个符合标准,通过W3C的XHTML和CSS验证,那么怎样才能做出一个符合标准的站点呢,下面是我在BLOG重构和制作OSdev Resource过程中的一些经验^_^。

网页设计师看一些有关Web标准方面的文章

虽然w3.org更权威,但对于母语是中文的我们来说,这个更容易看懂:)个人觉得比去w3.org看那些满屏的E文舒服。可以在这里找到很多有关XTHML,DIV+CSS布局,CSS技巧等的文章。还有站长阿捷写的《循序渐进》的教程,介绍了怎么一步一步来制作一个符合标准的网站。

丢掉table,采用div+css布局

这似乎是设计一个符合标准的网页首先应该做到的了:),DIV+CSS布局也是一种趋势。用DIV+CSS布局可以参考w3cn.org的文章:CSS基本布局16例典型的三行二列居中高度自适应布局

关闭标签

在以前,可能我们并不注意关闭标签这个问题,例如img,p等,在用这些标签时往往只用了开头,而没有正确的关闭它。通常情况,我们是这样用img的:

<img src="sample.gif">

但是在XHTML中,不允许这样的情况存在,而是应该关闭它:

<img src="sample.gif" />

再者如段落标记<p>,以前用它都是直接一个<p>,而没有想过在段落结束时加上</p>,这在XHTML也是不允许的。

正确嵌套标签

浏览器的容错性使得我们在编写了一个不符合规则的网页也能得到正确的显示效果,如用

<p><b>sample</p><b>

并没有什么问题,同样的,这在XHTML中是不被允许的。XHTML从XML而来,而XML必须具有结构性,所以嵌套标签时,必须一层一层嵌套,而不能交错。

正确设置字符集

似乎没有什么大关系,但设置好字符集更有利于浏览器对文档的解析。

图片的对齐

在XHTML中,align属性只能是left、middle、right或者top、middle、bottom这三个值中的一个,而很多时候我们需要图片与文本绝对中间对齐,即用absmiddle。使用XHTML之后,就要丢掉这个属性了,解决方法?我也不知道,不过网页设计师里有文章有提到这个问题,我在BLOG重构时,把图片对齐一律设为top,显示效果也还过得去。

处理链接中的&

动态网站中在用GET方法传参时,如果有多个参数,就会用到&来连接各个参数,但在XHTML中如果有&就意味之后是一个实体,但是应该没有人会把参数名取nbsp、lt、gt这样的吧。在XHTML中规定所有不是实体的&必须转换成&,如果不进行转换的话,在进行W3C校验时就会报错找不到实体。

其实个人感觉按照标准来制作网站比按传统方式来制作网站轻松很多,因为结构与内容分离,在改变显示效果时不需要整个页面重新做过,只需要在CSS中重写样式就行了。而且方便以后改版什么的,再者如Fdream的FBS,无刷新换肤,不错的东东~~