[转]网页标准化css，切图生成xhtml+css网页基础

原文：http://www.diy21.com/bbs/showthread.php?p=2264

网页标准化（WEB标准 ）：非曲直WEB标准不是某一个标准，而是一系列标准的集合。

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：
（1） 结构化标准语言主要包括XHTML和XML
（2） 表现标准语言主要包括CSS
（3） 行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

这些标准大部分由W3C（www.w3.org）起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

我们现在主要是用 (1) XHTML + CSS 制作网页.

其中 (1) 用 XHTML的目的就是实现HTML向XML的过渡
(2) 用 CSS 取代HTML表格式布局、帧和其他表现的语言

纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

(3)的行为标准如 DOM 是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。如 Ajax 可以发挥XML的优点。现我们暂不使用这种 DOM 进行操作。对于企业网站如一些翻页通过DOM在内存操作，可能对于搜索引擎方面没有好处，所以暂不用DOM也操作。

如何用 XHTML +CSS 重构网页

1. xhtml 与 html类似但每个标记都必需要有结束符如 <div></div> 或都 <br/>
2. css 只要是用于表现形式，布局的都要放在 css中。

在切图生成网页前要通网页过行规划，如网页头，网页体，网页脚，栏目，内容等。 每一个内容尽可能的在一个 <div> 中显示。 相应的小图标，底图等都要放在 css中定义。

必需要掌握的 CSS标记
1. id 与 class 的区别 : id 与class 都可以在 css 中定义，其中 id用 # 表示而 class用 . 表示。 id 在javascript中是唯一的并可以对id进行操作。而 class 可以是多个而javascript是不可以操作class标记的。 而且 id 表示的级别要较 class高。

2. 布局的 float 浮动: 取值 left , right 通过对 DIV 定义 float与宽度，可以实现类似表格显示的布局

2.1 clear 清除浮动 : 取值 left,right ,both(所有浮动), 实现类似换行的效果

3. padding 留空白

4. margin 边界

5. border 边框

6. width 宽度 与 height 高度

7. background 背景

8. text-align 文本对齐 ,font-size 字体大小 ,font-weight 字体粗细

9. color 前景颜色

10. line-height 行距 必需要设置,以免字体很紧.

11. list-style-type : LI标记的样式

12. text-indent : 首行缩进

13. vertical-align : 垂直对齐

14. overflow: 溢出时操作　

15. FILTER: 滤镜效果

我们的网页基本上是用以上的css来定义，　有些是用 上，左，下右等属性定义．我们要从操作中熟悉运用以上元素． 另 css的多个定义，继承等也要了解一些．