点击这里下载

以下是参考手册下载地址 : http://files.cnblogs.com/Capricornus/css3.0html5.rar

各大浏览器 CSS3 和 HTML5 兼容速查表

http://news.csdn.net/a/20100401/217692.html

深入了解 HTML 5资源

http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K701.aspx

以下是截图:

重构组代码书写规范示例：（其中数字只用做示范，实际应用中不建议用数字命名。）

.class_name_1 .class_name_1_1,
.class_name_2 .class_name_2_1 .class_name_2_1_1,
.class_name_3{style1:value; style2:value; styel3:value; }

有人说，好代码就是用记事本打开也是艺术品，而样式文件本身就是设计作品。目前并没有一个权威来界定这种规范，我们只能对两种写法做个简单的总结。

就样式文件本身对比：

纵向书写特点：

1. 每个CSS属性独立一行，一般不会出现换行或横向滚动条。
2. 可以通过firebug等工具查找到模块，在DW中ctrl+g行定位，修改方便。
3. 属性段落间有缩进，保证了代码的整洁，层次清楚，符合编程语言代码规范，修改更加直观。

存在的问题：代码冗余（如空格符、tab符、换行符）；文件大小增加；容易出现纵向滚动条。

横向书写特点：

1. 最大化的利用了空间，单屏内能显示更多，减小了纵向滚动条出现的几率，能够快速捕获较多的信息。
2. 减小了文件大小，省去了不必要的空格、换行等。
3. 横向书写方便分块以及注释，便于查看CSS结构，选择符一目了然。当今显示器正朝着越来越大，越来越宽发展，基本上一行内可以显示完全。
4. 加快编写CSS速度，不用每次敲换行和tab，并且减少拉动滚动条的次数。
5. 如果是活动页，不用作压缩处理。使用CSS optimizers 来优化CSS是提倡的，但是使用横向书写，基本上不存在多余的空格和换行，因此可以不用压缩，这样效率和能力都会得到提高。
6. 便于阅读和查找相关结构。代码编辑器对同行数定位做的都比较好，因此我们要解决的是如何快速纵向定位目标。横向书写时选择符纵向对齐，再加上
   .class_name_2  .class_name_2_1  .class_name_2_1_1的选择符层次分明，因此很容易定位到目标。
   在调试小Bug的时候就可以直接打开CSS更改，不用再打开firebug去找到模块。
7. 横向书写，是基于CSS选择符的写法，层次容易对比，更利于模块化。对整体CSS规划有好处，后期维护成本低。
8. 便于不同版本的CSS代码对比。

存在的问题：书写过密，从而影响阅读。这种弊端显而易见，但只要优化做到家，这种状况会很少。

尽管对于现如今的带宽来说，网页文件那仅以K为单位的大小实在是微不足道，但如何将这以K来计算的网页文件精简到最小还是网页设计师们应该考虑的问 题之一。而横向书写省去了不必要的空格、换行等，大大减小了文件大小。我们不能说哪种书写是对的，至于具体采用哪种写法依个人选择，当然 改变习惯可能会影响一个人的工作效率，那我们提倡的是：提交的CSS样式文件是经过代码格式化的，而这个工作可以完全交给DW等工具，我们只要点击一下， 整个文件就会像我们想象的那样呈现出来。这样的代码看起来很舒服，修改容易，团队成员在后续交接也会变得更加顺利。

PS: Dreamweaver下代码格式的设置方法

“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉 也满口的“模块化”，只是你真的理解什么是“模块化”吗？

什么是模块化？

对“模块化”的解释，在 CNKI 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。

先看一下百度词条是怎么解释“ 模块化 ”的：

模 块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体， 完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体 系结构中，模块是可组合、分解和更换的单元。

相关的书籍也蛮多的，有兴趣的同学可以搜一下。需要强调一点，我们所借鉴的是一种思维的方式。

页面制作为什么需要模块化？

站点内容越来越多、代码越来越臃肿，渐渐影响到了客户端的体验（主要是打开速度），影响到了维护的效率。有什么方法可以解决这些问题呢？

我 们很容易就想到：减少代码冗余、提高代码重用率、图片压缩等等，而这些要如何实现呢？模块化思维可以解决，即可以有效减少代码冗余、提高代码重用率，更重 要是可以支持到多人维护，降低维护成本。CSS写法较为灵活，容易产生代码的耦合，使用模块化也可以在一定程度上降低耦合度，对于BUG的定位也有帮助。 所以，我们更应该在站点前期就重视并使用“模块化的思维”编写站点。

我们之前经常提到的站点性能优化，有相当一部分也是“模块化”的内容，比如提高代码重用，提高开发效率等等，“模块化”的优点还有很多，我大概列了 一下：

• 提高代码重用率
• 提高开发效率、减少沟通成本
• 降低耦合
• 降低发布风险
• 减少Bug定位时间和Fix成本
• 提高页面容错
• 更好的实现快速迭代
• 更好的支持灰度发布

其中最重要的一点，我认为是“提高代码重用率”，这也是模块化最重要的特点之一。

如何实现“模块化”？

这里的主要问题是HTML与CSS的“模块化”，我们可以看下换肤的实现方法：

• 同一类名，换文件（JS）
• 同一文件，换类名（JS）

由此可知HTML与CSS的接口实现：

• CSS引入的三种方式
• 类名

为 了更好的实现这种接口，需要有相关的（交互、设计、页面、开发）约定、规则、规范，比如：所有当前状态都使用同一个类名“nonce”，所有变灰的表现都 使用原类名后加“_n”，Tab的实现方式等等。有了这些约定、规则、规范后，HTML代码就很容易可以实现模板化，统一接口规范。

有两个误区需要先认清下：

• 模块化后并不是就能被使用在任何位置（模块化后的代码段也是有适用的范围限制，需要一个提供接口规则的环境）
• 模块化后并不是就不能再变更（模块化后的代码段可根据实际需要做修改）

完 全独立的模块放在同一项目中，由于项目有自己的表现、交互统一性，所以各模块间必定出现类似的部分，这些部分可以被提出来做为公共的定义，减少冗余，这时 就会出现耦合的问题，完全不耦合是不可能的，因此模块化中很重要一点就是“适度的耦合”。有了公共定义，就得调整模块样式的实现方式了，而这种调整也会影 响到“接口”的实现方式。

由于本篇主要是讲模块化的思维方式，具体实现的细节留待以后的文章中探讨。相关内容可以看下之前写的《从宜家的家具设计讲模块化》。欢迎一起讨论。

–谨以此文纪录ISD WEBTEAM 09年Q2力作：CSS 3.0 中文参考手册

背景

苏昱的《样式表中文手册》为代表的 CSS2.0参考资料伴随了国内众多web设计师们走过了近10年的时光，这种影响是深远的，但随着CSS技术的不断发展，设计师们多受传统资料的影响， 不能超脱现有的篱笆，给自己背上了沉重的包袱。你是否已注意到CSS 3已经蓄势待发？你是否渴望开始使用它们却又不知从何下手呢？正当CSS 3新特性备受期待的时候，我们的CSS3.0 中文参考手册就应运而生了……

什么是CSS 3？

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS3.0 则表示下一版本的CSS，3.0是版本号。

CSS 3给我们带来了什么惊喜？

CSS3.0对于我们Web设计人员来说不只 是新奇的技术，更重要的是这些全新概念的web应用给我们的设计更多的无限可能性，也极大的提高了我们的开发效率。我们将不必再依赖图片或者 Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。CSS 3 .0的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。

使用说明

• 本手册服务对象为网页重构师或前端开发工程师。
• 本手册根据W3C工作草案进行翻译，存在一定的不确定因素，最终解释权归ISD WEBTEAM所有。
• 本手册的编排参考css3.info的CSS Preview将CSS 3 属性分为边框、背景、颜色、文本、用户界面、基础盒模型、内容、其它模块、高级选择器九大类。
• 兼容性列表暂时提供Internet Explorer、FireFox、Opera、Safari、Chrome的正式版浏览器兼容性。
• 私有属性列表中，使用Gecko引擎的浏览器有Firefox，私有属性以-moz-开始；webkit引擎的浏览器有Safari、 Chrome，以-webkit-开始；Presto引擎的浏览器有Opera，以-o-开始， 以及Internet Explorer，以-ms-开始，目前只有IE8支持-ms-前缀。
• 针对每个属性制作的示例除了@font face因涉及字体版权取自微软的示例，其它均为团队成员结合自身的沉淀制作，由于手册篇幅的局限性，也许有些示例难以理解，后续我们将对这部分示例单独 以文章详细分析。
• 继承性，鉴于W3C工作草案未对继承性有较清晰的说明，本期未对继承性有测试，暂不具备参考价值。
• 如下载的CHM文件打不开，可以尝试右键点击CHM文件，然后在“属性”中“解除锁定”。
• 本手册主要用于交流，限于时间紧张，且为业余深耕夜作，错误和遗漏难免，望大家在使用中多多反馈。我们会不断的完善和升级本手册。这里提供手册 V1版，以月为单位不定期更新。

CSS 3.0 参考手册 (中文版) 预览：

不管你是第一次准备去认识CSS 3，还是已经略知皮毛，CSS 3.0 参考手册 (中文版)将有助你更好的学习和理解CSS 3 。还等什么？猛击http://webteam.tencent.com/css3/下 载吧！

总结

CSS 3 属性不仅可以极大的提高我们的工作效率，让一些最耗时的CSS任务不费吹灰之力就能搞定，并且可以使用更简洁和更轻量的代码标签。虽然一些属性尚未被广泛 的支持，但这并不意味着我们不能为使用高级浏览器的用户提供更好的体验。

CSS 3 能让我们的优化工作有了新的突破。当你已经完成了图片合并、代码精简等优化工作之后，正在焦头烂额不知道还要做啥的时候，可以尝试把用户进行拆分，去寻求 更深层次的突破。例如针对一些高级浏览器使用圆角属性，在IE浏览器使用条件注释（或者hack），那么是不是可以在保证效果的同时，让网页更快的呈现在 使用高级浏览器的用户面前呢？

如果我们的网站在各个浏览器里的一个差异不影响 美观和网站的可用性，它就应该是被考虑的。如果我们继续浪费大量的时间和精力以使每个细节绝对一致(而不是采用更灵活的和未来导向的方案)，用户将没有升 级他们的浏览器的任何动机，我们也就不能更早、更广泛的使用它们。

我相信随着时间的推进和更多浏览器的支 持，CSS 3 将越来越受欢迎，它将为web设计师们带来无穷的能量。Web设计师们，还等什么？让我们一起来感受CSS 3 的能量，用CSS 3 将我们带入下一个高度吧！

特别鸣谢

项目过程中，我们也遇到了很多难点，W3C未 正式发布CSS 3 ，工作草案不断更新，存在诸多不确定因素，中文资料匮乏，涉及多个浏览器多个版本的浏览器兼容性测试，测试过程繁琐等等，项目组成员都逐步克服，感谢大家 在平时需求压力也比较大的时候还能保持着很高的激情参与到CSS 3 项目中来，在公司加完班，回家了还忙着翻译、测试浏览器兼容性等等，有时候CSS3项目群里讨论的聊天记录到凌晨1、2点…正因为有了可爱的你们，项目才 能如此顺利的进行.

翻译自 Russ Weakley 的 Efficient, maintainable CSS

翻译自Russ大师的一篇关于如何书写高效、可维护、组件化的CSS的演示文档。Enjoy~

一个简单的, step-by-step 关于 CSS 行高的演示文档, 涵盖行间距, 如何应用各种类型的行高值, 当然还有 inline box 模型介绍, 希望能满足您
（但实战应用在中文字体或中英文字体混合，以及IE678，XP win7里，行高规则又有所不同，泪流满面）

可能的值

请参考：http://www.w3school.com.cn/css/pr_class_position.asp

测试源码如下：

实际效果如下：

可以看到对于absolute层来说，它始终以它外面的第一个非static层来进行绝对定位，此实例中name层的上级非static属性的层为type类(relative),所以层menu中的op:0px;left:0px样式指的是与type层的距离．如果把type类的position:relative放在bloglMenu里的话，则name层就会以globalMenu来进行绝对的定位，位置在globalMenu层的左上角

ol 有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>

表现为：

1……
2……
3……

ul 无序列表，表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>

很多人容易忽略 dl dt dd的用法
dl 内容块
dt 内容块的标题
dd 内容

可以这么写：
<dl>
<dt>标题title</dt>
<dd>内容content1</dd>
<dd>内容content2</dd>
</dl>

dt 和dd中可以再加入 ol ul li和p
理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。

.news{list-style:none;}
.news li{color:red;}
.tt li{color:blue;}
</style>
<html><head><title></title></head>
<body>
<ul class=”news”>
<li>aaaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbb</li>
</ul>
<br>
<ul class=”tt”>
<li>aaaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbb</li>
</ul>
</body>
</html>