下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。

先举一个复杂的例子：zen-coding 可以把这样的代码：div#header>ul.navigation>li*4>a，变成下面的 HTML 代码

<div id=”header”>
<ul class=”navigation”>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
</ul>
</div>

看到这熟悉的语法结构，会 CSS 的朋友一定会惊声尖叫！最妙的是那个“*4”，直接生成 4 个 li 代码了。没错，Zen Coding 就是这样牛叉的东西，Zen Coding 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下载页面找到相关的插件。

即使你不使用上面提到的编辑器，那么还有一种选择，点击下载页面的最后一个链接： Zen Coding for <textarea>。这是一个网页版的 Zen Coding！打开 example.html 之后，把光标定位到文本框里面，按下 Ctrl + E 试试吧。

网页版快捷键说明：

1. Ctrl + E：展开代码
2. Ctrl + D：向外快速选中代码块
3. Shift + Ctrl + D：向内快速选中代码块
4. Shift + Ctrl + A：输入一个缩写，自动展开并包围所选代码
5. Ctrl + Alt+→ ：光标智能跳转到下一个编辑点（自己试试就知道多体贴了）
6. Ctrl + Alt+←：光标智能跳转到上一个编辑点
7. Ctrl + L：选择一行

官方演示视频：Zen CSS 和 Zen HTML。另外，缩写的含义请看：Zen CSS Properties 和 Zen HTML Elements，各种插件的安装方法请看官方 wiki。

最后提醒一点：在这个墙外的官方演示视频(高清)中，墙内观看地址，还出现了自定义缩写的演示。具体设置过程请参考官方 wiki。

下载：官方网站

P.S. 前端观察已经写了详细的教程 Zen Coding:快速编写 HTML/CSS 代码

update: 多谢 SULei 的提醒：EditPlus 也有了，zen code for EditPlus

您可能也喜欢：
谈CSS书写风格	css中potition的理解总结	深入 CSS 行高	用CSS 3将我们带入下一个高度吧！
无觅

圆角样式示例(仅在firefox内核,safari,chrome等内核浏览器下支持,IE内核不支持)

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

CSS3的border-radius规范

1. 属性：
   border-top-right-radius
   border-bottom-right-radius
   border-bottom-right-radius
   border-bottom-right-radius
   值：<length> <length>。它们分别是定义角形状的四分之一椭圆的两个半径。如图：

1. 第一个值是水平半径。
2. 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
3. 如果任意一个值为0，则这个角是矩形，不会是圆的。
4. 值不允许是负值。

1. 属性：border-radius。它是上面四个属性值的简写。
   值：<length>{1,4} [ / <length>{1,4} ] 
   1. 如果斜线前后的值都存在，那么斜线前的值设置水平半径，且斜线后的值设置垂直半径。如果没有斜线，则水平半径和垂直半径相等。
   2. 四 个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置的。如果bottom-left省略，那么它等于top-right。如果bottom-right省略，那么它等于 top-left。如果top-right省略，那么它等于top-left。
2. 应用范围：所有的元素，除了table的样式属性border-collapse是collapse时
3. 内边半径等于外边半径减去对应边的厚度。当这个结果是负值时，内边半径是0。所以内外边曲线的圆心并不一定是一致的。
4. border-radius也会导致该元素的背景也是圆的，即使border是none。如果background-clip是padding-box，则背景（background）会被曲线的内边裁剪。如果是border-box则被外边裁剪。border和padding定义的区域也一样会被曲线裁剪。
5. 所有的边框样式（solid、dotted、inset等）都遵照角的曲线。如果设置了border-image，则曲线以外的部分会被裁剪掉。
6. 如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。
7. 两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线
8. 角 不允许相互重叠，所以当相邻两个角半径的和大于所在矩形区域的大小时，用户代理（浏览器）比如缩小一个或多个角半径。运算法则如下：f = min(Li/Si)，i ∈ {top, right, bottom, left}，Ltop = Lbottom = 所在矩形区域的宽，Lleft = Lright = 所在矩形区域的高。如果f < 1，那么所有角半径都乘以f。

实际CSS应用,需要根据不同浏览器HACK

可简写为

您可能也喜欢：
css样式float造成的浮动“塌陷”问题的解决办法	谈CSS书写风格	CSS表格滚动条简例	兼容各浏览器的css透明样式写法
无觅

定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级元素，而不论它本身是何种元素。元素对象设置了float属性之后，它将不再独自占据一行。浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。
fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。
下面让我们来详细了解下css float

1.Float的用处

除了简单的在图片周围包围文字，浮动可用于创建全部网页布局。

浮动对小型的布局同样有用。例如页面中的这个小区域。如果我们在我们的小头像图片上使用浮动，当调整图片大小的时候，盒子里面的文字也将自动调整位置：

同样的布局可以通过在外容器使用相对定位，然后在头像上使用绝对定位来实现。这种方式中，文本不会受头像图片大小的影响，不会随头像图片的大小而有相应变化。

程序代码
需要用到的CSS样式
body{ margin:0px; padding:0px; text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px;}
div,p,ul,li,h2,h3,h4,h5{ padding:0px; margin:0px;line-height:22px;}
h1{ font-size:14px;}
body >div{ text-align:left; margin:10px auto;}
#box{ width:900px; text-align:left;}
.box1{ width:370px;border:1px solid #f00;}
.box3{border:1px solid #f00;}
.box2{ width:370px;border:1px solid #f00;}
.box2:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.box1_1{ width:100px; height:70px;border:1px solid #6CF;}
.clear{ clear:both; height:0px; width:0px; font-size:0px; line-height:100%; }
.fl{ float:left;}
.fr{ float:right;}
.hidden{overflow:hidden;}
span{ color:#f00; font-weight:bold;}
.mar{ margin-left:20px;}
.inmar{ display:inline; margin-left:20px;}
.box1_2{ width:200px; float:left; height:100px; background-color:green;}
.box1_3{ width:150px; height:100px; margin-left:200px; background-color:red;}
.box1_4{ width:200px; float:left; height:100px; background-color:green;margin-right:-3px;}
.box1_5{ width:150px; float:left; height:100px; background-color:red;}
.box2_1{  margin-bottom:10px;float:left;width:80px; height:70px;border:1px solid #f00;}
.box2_2{ float:left;width:80px; height:70px;border:1px solid #f00;}
.padbot{ padding-bottom:10px;}

2．float浮动元素不占据正常文档流空间

由于浮动块不在文档的普通流中，所以文档的普通流中的块表现得就像浮动块不存在一样。
·以下是3块div均未加float时在浏览器内显示如下图

代码：

<div>

<div><span>块1</span></div>

<div><span>块2</span></div>

<div><span>块3</span></div>

</div>
·块1向右浮动，脱离文档流并且向右移动，直到它的右边缘碰到包含块的右边缘。如下图

代码：
<div>

<div><span>块1</span> float:right </div>

<div><span>块2</span></div>

<div><span>块3</span></div>

</div>
·块1向左浮动，脱离文档流并且向左移动，直到它的左边缘碰到包含块的左边缘;IE8和Firefox中因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了块 2，使块2从视图中消失。而块2的内容却显示在块1未浮动时块2所处的位置。而IE6和IE7中紧跟在浮动元素块1的块2也会跟着浮动。如下图

IE8和Firefox

IE6和IE7

代码：
<div>

<div><span>块1</span> float:left </div>

<div style="background:#FCC;">background:#FCC<span>块2</span></div>

<div><span>块3</span></div>

</div>

3.浮动“塌陷”

·使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题。在这里我们可以称为“塌陷”。如下图

代码：
<div>

<div><span>块1</span> float:left</div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

</div>
解决“塌陷”问题有以下三个方法
1.在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div 如下图

代码：
<div>

<div><span>块1</span> float:left </div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

<div></div>

</div>
2.在使用float元素的父元素添加overflow:hidden;如下图

代码：
<div>

<div><span>块1</span> float:left </div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

</div>
3 .使用after伪对象清除浮动 如下图

代码：
<div>

<div><span>块1</span> float:left </div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

</div>

4. IE6双边距问题

·IE6双边距问题：一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left) 在ie6内便产生双倍边距。如下图

IE7、IE8和Firefox

IE6

代码：
<div>
<div><span>块1</span> float:left marin_left:10px; </div>

<div><span>块2</span> float:left marin_left:10px; </div>

<div><span>块3</span> float:left</div>

</div>
这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。

解决IE6双边距问题: display:inline; 使浮动忽略 如下图

代码：
<div>

<div><span>块1</span>float:left; marin_left:10px; display:inline; </div>

<div><span>块2</span> float:left marin_left:10px; </div>

<div><span>块3</span> float:left</div>

</div>

5.IE6文本产生3象素的bug

·浮动IE6文本产生3象素的bug时指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。如下图

firefox、IE7、IE8

IE6

代码：
<div>

<div>float:left;width:200px; height:100px; background-color:green;</div>

<div> margin-left:200px; width:150px; height:100px; background-color:red;</div>

</div>
解决浮动IE文本产生3象素问题以下有两个方法
1.左边对象浮动，右边采用外补丁的左边距来定位  如下图
firefox、IE7、IE8、IE6

代码：
<div>

<div>margin-right:-3px; float:left;width:200px; height:100px; background-color:green;</div>

<div>width:150px; height:100px; background-color:red;</div>

</div>
2.左边对象浮动，右边对象也浮动 如下图

firefox、IE7、IE8、IE6

代码：
<div>

<div> float:left; width:200px;height:100px; background-color:green;</div>

<div> float：left;width:150px; height:100px; background-color:red;</div>

</div>

6.IE6,IE7 中，底边距 bug

·IE6,IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。如下图

firefox

IE6、IE7

代码：
<div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

</div>
解决IE6,IE7 中，底边距 bug：用父元素的底内补白(padding)代替。如下图

firefox、IE7、IE8、IE6

代码：
<div>

<div>float:left;</div>

<div>float:left;</div>

<div> float:left;</div>

<div>float:left;</div>

</div>

这个方法的缺点是不能换行，如果想要换行的话，建议将浮动父元素的浮动子元素设置padding值。

您可能也喜欢：
css中potition的理解总结	谈CSS书写风格	css问题,ie6下有时候边框断断续续bug的解决l办法	通过在UL标签应用相关的css类，实现对LI的控制
无觅

在浏览器下一刷新边框是全的，再以刷新边框就会有断开，什么原因呢，很懊恼的事情，网上一搜也没有答案，下面我就告诉大家解决的方法，其实他是有原因的， 原因就是你的外层有边框，边框层里面嵌套的层里面有浮动，浮动这个最令人懊恼的东西经常会出问题，由于这个原因会引起ie6下面边框断裂，解决办法就是在 外层加 zoom:1; 或者 heigth:100%; 很容易就解决了这个问题。

表现状况：窗口的边框时隐时现。。。

发生情况：

网上说是在一个容器中有元素浮动时容易出现，自己感觉有时内部元素把容器撑开时也会看不到边框。

解决办法：

如果按网上说的是因为浮动的原因的话，那么添加清除浮动则应试可以正常解决。

另外网上的解决办法是：给窗口设置{zoom:1} or { width:100%; height:100%}使其拥有布局即可。

您可能也喜欢：
谈CSS书写风格	css中potition的理解总结	深入 CSS 行高	[译]Efficient, maintainable CSS
无觅

margin在IE6下被解释为双倍距离，出现了Margin与float一起用时，在IE6下，其Margin属性会被解释会双倍的距离，margin产生双倍距离其解决兼容问题的两种方法：

您可能也喜欢：
css样式float造成的浮动“塌陷”问题的解决办法	谈CSS书写风格	[译]Efficient, maintainable CSS	css问题,ie6下有时候边框断断续续bug的解决l办法
无觅

点击这里下载

以下是参考手册下载地址 : 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

以下是截图:

您可能也喜欢：
谈CSS书写风格	css中potition的理解总结	深入 CSS 行高	用CSS 3将我们带入下一个高度吧！
无觅

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

.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下代码格式的设置方法

您可能也喜欢：
css中potition的理解总结	通过在UL标签应用相关的css类，实现对LI的控制	深入 CSS 行高	css样式float造成的浮动“塌陷”问题的解决办法
无觅

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

什么是模块化？

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

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

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

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

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

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

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

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

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

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

如何实现“模块化”？

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

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

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

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

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

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

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

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

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

您可能也喜欢：
谈CSS书写风格	css中potition的理解总结	[译]Efficient, maintainable CSS	兼容各浏览器的css透明样式写法
无觅

–谨以此文纪录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点…正因为有了可爱的你们，项目才 能如此顺利的进行.

您可能也喜欢：
css中potition的理解总结	谈CSS书写风格	[译]Efficient, maintainable CSS	CSS表格滚动条简例
无觅