CSS Rule – 规则结构
一张相当直观的图片加以说明：
虽然很简单，但是如果是初学者，建议还是熟记选择符、声明、属性等术语，至少以后看其它CSS教程的时候不会摸不着头脑。事实上CSS在实际书写的时候具有很大的灵活性，适当的空格和换行不会对其产生影响，有人喜欢缩进，有人喜欢分行，哪种更好没有一个很固定的衡量标准，很大程度上视乎个人习惯，大家不妨看一下《柳暗花明：整理及优化CSS代码的七个原则》这篇文章。
《CSS语法规则结构》参考资料
《CSS语法规则结构》相关视频教程下载【FLV格式 – 2.28MB】
《CSS权威指南 – 第3版》撷英及配套视频：- CSS Syntax
Continue Reading →Chapter 2. Selectors – 选择符
引言部分主要讲述CSS在外观全局控制方面的优势，我想这一点但凡想学CSS的都知道是怎么回事。当然其中也提到了一些CSS力所不能及的事情，如改变GIF图片中的颜色等。这一点不禁让我想到全国哀悼日时很多网站的素装活动，用一行代码让整个网站呈黑白色调，代码如何写我已经没什么印象了，可能还是属于CSS滤镜的范畴吧。
2.1. Basic Rules – 基本规则
如果我们想让网页中的H2标题文字显示为灰色，传统的HTML书写（即不用CSS）方法如下：
这种做法的不方便之处不言而喻，如果一张网页里有10000个H2，全部如此把它们修改为灰色的话，你的手尽情的抽筋吧。终于全部改完了，如果头儿心血来潮：“灰色不好看，改成绿色试试看～”这时候你应该想死的心都有了。用CSS的话，把H2文本设置为灰色，只消在样式表中写一句：
Chapter 7. Basic Visual Formatting – 可视化格式编排
在之前的内容中，我们学习了很多关于CSS如何处理文档可视化格式的知识，不过大量的篇幅都用于解释如何工作，而很少分析为什么这么做。在本章中我们主要讲述可视化理论，由于CSS模型的开放性及其功能的强大，我们很有必要去了解尽可能多的CSS可视绘制模型的具体过程和知识，从而能够自主判断某些行为是否是因CSS定义而输出的正确结果。
7.1. Basic Boxes – 基本框
在处理元素时，CSS假定每个元素都生成一个或多个矩形框，叫做元素框。每个元素框包含像核一样的内容区，这个内容框被可选的补白padding、边框border以及边界margin包围，这些可选元素均可被设置为零宽度，相当于将它们从元素框中去除：
补白、边界以及边框中的每一个元素都可以设置成不同的属性，如margin-left或 border-bottom。内容的背景也应用于补白，而边界则总是透明的，允许任何上级元素的背景可见。补白不能设置为负值，而边界却可以，关于这一点我们稍后进一步讨论。
另一方面，边框有着自身的规则。边框使用定义好的样式生成，如solid或inset，颜色可以用border-color属性来设置，如果没有设置颜色，则边框颜色采用基于元素内容的前景颜色。如果边框样式是间断的，则元素的背景在不连续处可见，即边框有着内容和补白相同的背景：
最后，边框的宽度不能为负值。
不同类型的元素在如何格式化上存在着差别，例如块级元素与内联元素的处理方式就很不一样，浮动元素和定位元素则更为复杂。
Continue Reading →7.2.1.2. Using auto – auto的使用
假如我们将width, margin-left或 margin-right中的其中两个给定具体值，而将剩下的一个设置为auto的话，那么被设置为为auto的属性将根据该元素的父级计算具体的值。比如一个P元素所在的父级宽度为400px，我们对P标签设置如下CSS规则：
那么最终计算margin-left得到的结果是200px。还是以上面的例子为基础，假如三个属性都设置为100px的话会怎么样呢？结果是margin-right将被强迫修改为auto：
当然这是针对自左到右的标准流，如果标准流是自右到左的话，那么被逼迫的对象就是margin-left了。
如果指定了两个margin而将width设置为auto的话，那么width将占据出去两个margin之外父元素其余的宽度：
7.1.1. The Containing Block – 包含块
每个元素都有各自的包含块，可以说包含块就是一个元素的布局上下文。CSS2.1定义了一系列判断某一元素包含块的规则，在我们深入学习之前，先对这些知识作一些基本的了解。
通常对于一个西方风格文本流元素而言，其包含块就是上级元素中离它最近的块级元素、表格单元或内联块。以下面的代码为例：
