CSS的学习一般是从看书看博客开始的，看到一定程度之后总觉得总是少了些什么，网上各类资料多半是提供怎么解决问题，很少有深入分析原理的。本系列是对w3.org中标准的CSS2.1进行学习，希望能从更深入的角度去看CSS。

有时间建议去看看官方原文：http://www.w3.org/TR/2011/REC-CSS2-20110607/

CSDN论坛上也有对CSS标准的详解系列：http://bbs.csdn.net/topics/340173664

本文作为系列开篇，是对CSS2.1的一个总体介绍。对应于原文的前三章。（以后无特别声明，CSS默认指代CSS2.1）

1.CSS处理模型

官方给出了user agent 解析CSS的一个流程，但实际上根据UA（本文默认UA都指代浏览器）的不同可能有些差别：

1.根据源文档创建出文档树（document tree）。这里的源文档一般都是HTML代码。

2.识别目标媒体类型（media type）。media type可能有多种（screen，paper等），某些特定的CSS属性只能针对特定的媒体类型，所以在渲染前一定要确定media type。

3.检索出所有针对目标media type所编写的CSS代码。这里想到了media query，针对不同尺寸的设备响应不同的代码，就是这个道理。

4.将指定的CSS属性值应用到文档中所有指定的元素上。在应用的过程中需要计算出每个元素应该赋予的值（具体应用过程后面的系列会讲），在不同的media type下，会用到不同的计算算法。比如说目标媒体类型为screen时，浏览器会应用visual
formatting model（可视化格式模型，这个在后面的系列会讲）。

5.根据应用属性后的文档树生成formatting structure。一般来说formatting structure与文档树很相似，但也可能不同，比如说你用了伪元素（pseudo-elements）改变了文档结构。而且formatting structure也不一定是树形结构的了，比如说你用display:none隐藏了某些元素。个人理解：文档树就是源文档中的结构，而formatting structure就是经过CSS渲染后的文档结构。

6.最后一步就是将formatting structure的结果渲染在目标媒体上。比如浏览器将其渲染到你的屏幕上。

2.CSS设计准则

• Forward and backward compatibility

前后兼容,不解释。

• Complementary to structured documents

对结构化文档的补充。这里强调是补充，虽然你可以通过CSS让文档变成任何你想要的样子，但CSS毕竟是用来修饰的，如果用它来改变文档的结构，是违背其设计原则的，这也是大家都强调语义化的一个原因吧。

• Vendor, platform, and device independence

注重厂商，平台以及设备的独立性，允许你将特定的CSS应用到一组设备上。

• Maintainability

可维护性，不解释。

• Simplicity

简洁。

• Network performance

注重网络性能，你可以将CSS压缩以减少网站访问流量。

• Flexibility

灵活性。你可以以不同的方式引入CSS。

• Richness

给设计者提供丰富的特性来让你的页面达到更完美的效果。

• Alternative language bindings

支持其他语言的操控。比如你想改变字体颜色，除了CSS，还可以用JS来控制。

• Accessibility

易接受性。CSS可以通过某些特性来让一些有访问障碍或特殊需求的人更容易的使用Web。比如当你的无法访问网络图片时，可以用alt中文字代替。

3.总结

本系列主要针对于Web开发，w3c中部分章节作用不大就直接忽略了，比如第7章讲media types媒体类型，讲了各种媒体类型print，speech，tv什么的，（一般用到的就是screen吧= =）。有兴趣，或者有必要的时候，再去看看原文也不错。