web标准化、XHTML与CSS层叠样式表的关系

Web标准把网页分成三个独立组成部分:

　　* 结构:HTML，XHTML，XML

　　* 表现:CSS1，CSS2

　　* 行为:ECMAScript, DOM

　　Web标准至今汉有对外观审美做任何指导方针和戒律，对站点的外观和感觉没有做任何限制，它们只不过使浏览器能够正确地表现设计师创建的站点，帮助客户根据公司的市场需求和用户分析来制定目标。

　　Web标准可以做到:

　　* 在图形浏览器上更精确的控制、定位和排版

　　* 复杂的交互行为

　　* 可访问性

　　* 支持多种浏览器

　　* 新、旧浏览器都可以工作

　　* 保证可以工作在将来的游览器上

　　* 重新设计网站时间缩短

　　* 支持非传统设备

　　* 易为任何网页提供适合打印的版本

　　* 在发布流程中易重新设计文档

　　* HTML转换到XML基础的置标语言

　　使用web标准的原因:

　　* 增强交互能力

　　* 增强可访问性

　　* 减少维护工作量

　　* 减少带宽

　　* 降低成本

　　XHTML是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似HTML的角色的XML。

　　本质上说，XHTML是一个桥接(过渡)技术，结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。

　　----Jeffery Zeldman

　　切换到XHTML的10个理由:

　　* XHTML是当前替代HTML4标记语言的标准。

　　* XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。

　　* XHTML比HTML有更好的一致性。

　　* XHTML1.0是通向XHTML未来版本的桥梁

　　* 老的浏览器能适应XHTML

　　* 新浏览器都优待XHTML而不是HTML

　　* XHTML能很好在无线设备等其它用户代理上。

　　* XHTML是Web标准家族的一部分

　　* XHTML可助你去掉表现层代码的恶习

　　* XHTML可助你养成标记校验来测试页面工作的习惯

　　XHTML规则:

　　* 以正确的DOCTYPE和名字空间开始

　　* 使用META内容元素声明你的内容编码语言

　　* 用小写字母写所有元素和属性名称

　　* 给所有的属性值加引号,属性间以空格分隔。

　　* 给所有的属性赋一个值

　　* 关闭所有标签

　　* 用空格和斜线关闭空标签

　　* 不要在注释内容中使用"――"

　　* 确保使用<和&表示< 和 & .

　　XHTML1提供的DTD有三种:

　　* Transitional,过渡的，最宽松的DTD，唯一容忍表现层的标记、垃圾元素和属性的DTD

　　* Strict,严格的，

　　* Frameset,框架的，

　　XHTML声明内容编码的方法:

　　* XML prolog,即,但浏览器多不处理此

　　* 中插入Content-Type元素指定编码语言，

　　* 通过web服务器上返回的HTTP头部设置编码语言，w3c推荐这种方法。

　　增加结构的通用机制

　　* DIV和SPAN元素，联合id和class属性，提供了一个把结构添加到文档的通用机制。

　　* 这些元素定义了内置的内容(SPAN)和者块级别(DIV)，而没有在内容中引入其它表现层的东西。

　　* ID属性类似于代码中的特殊区域的标签，提示那个区域需要特殊的处理。当一个ID属性值被用于一个特殊设置的CSS，它称为CSS选择器，id是创建一个选择器的最容易和通用的方法。

　　* ID的命名须用字母和下划线开头，不能用数字进行开头。

　　ID的功能

　　* 作为一个样式表选择器，最小化XHTML页面文件;

　　* 作为超链的锚(anchor)，替代过时的name属性;

　　* DOM脚本中引用元素的方法;

　　* 作为一个声明的对象元素名字;

　　* 作为通常目的流程处理的工具。

　　# 一个样式表，是一个集合，一个由一个或多个规则定义组成的集合，这些定义将决定被选中的元素如何被显示。

　　# 一个CSS定义由两部分组成:选择器和声明。其中，声明是也是一个集合，集合元素放在一对{｝内，每一元素以";"结束，每个元素由两部分组成:属性和值，属性和值之间用": "分隔。

　　# 以#开头的选择器，为id选择器，以.开头的选择器为选择器。

　　# 多个选择器可以共享同一声明，这时不同选择之间以逗号分隔。

　　# 根据CSS，页面的子元素从母元素继承特性，但有些旧浏览器不支持(如Netscape 4)。如果不想让子元素继承母元素特性，则子元素可自由定义相关属性。

　　# CSS不区分大小写，但当与一个HTML文件关联时，类别和id名称是区分大小写的。

　　# 为了便于编辑CSS,可以增加一些空格或换行符。

　　# 样式表可以通过三种方式作用于页面的显示

　　1. 外联/导入

　　 <link rel="StyleSheet" href="/styles/mystylesheet.css" type="text/css" media="all />

　　或

　　<style type="text/css" media="all">
　　@import "/styles/mystylesheet.css";
　　</style>

　　或

　　<style type="text/css" media="all">
　　@import url("/styles/mystylesheet.css");
　　</style>

　　注:@Import 法只有5.0以上的浏览器支持

　　2. 嵌入(在XHTML页面head位置嵌入)

　　使用嵌入的原因:

　　* 该样式表只用于本页面

　　* 用户还在使用IE3

　　* 设计师不断修改样式表，需要立即看到效果

　　3. 内联(在元素上加上样式属性)

　　为整个站点指定字体:

　　* body { font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif; }

　　* 由多个字母组成的字体名称须用引号包括;

　　* 如果排在前面的字体不存在，则使用后面第一个存在的字体。

　　* "Lucida Grande"-Mac OS X　，Verdana-Windows　，Lucida---Unix　，Arial----旧windows　，Helvetica----旧Unix

　　* 利用冗余解决浏览器不支持继承的问题，如:

　　Body { font-family: Verdana, sans-serif; }P, td, ul, ol, ul, li, dl, dt,dd

　　{ font-family: Verdana, sans-serif; }

　　将无序列表前的黑点替换为一个图片:

　　* ul.inventory{ list-style: disc url(/path/to/pic.gif) inside; }

　　对颜色的定义:

　　* P { color: red; }

　　* P { color: #ff0000; }

　　* P { color: #f00; }

　　* P { color: rgb(255,0,0); }

　　* P { color: rgb(100%,0%,0%); }

　　# 根据元素表现的内容来决定元素的样式，避免过度的class，保持标记的简洁整齐。

　　# 如:列表项里strong显示为斜体而不是黑体。Li strong { Font-style: italic; Font-weight: normal; }

　　# 选择器的两部分内容之间，以空格相隔，其中前一部分可以是一般选择、id选择器、或类选择器。

　　# 现代布局中，id选择器经常出现在内容选择器里

　　如: #sidebar p {font-style:italic; text-align: right; margin-top: 0.5em; }

　　# 不能出现在或等标记的内联元素中。

　　# Id选择器标记的元素每个页面只能出现一次，但一个id选择器可多次用于定义内容/派生选择器定义。