w3c系列之CSS（三）：CSS属性是如何被应用到元素上的

w3c上第五章是讲css选择器的，可以去看精通css系列之选择器。本文讲的是第六章(assigning property values,

cascading, and inheritance)。

当浏览器为获取到的网页文档生成了document tree时，接下来要做的就是为每一个元素应用样式了。

浏览器在计算样式值的时候一般会经过以下四步计算：

step1.优先使用指定属性值(the "specified value")

首先使用指定的值(the "specified value")，比如下面这段文档中p的font-size为例：

使用指定值时浏览器会遵循以下机制：

1.如果能通过层叠规则得到font-size的值，就直接用该值。显然上面没有任何css代码，所以无法利用cascade层叠规则；

2.如果没有指定，而且该属性可以继承，并且该元素不是文档树的根元素，那么就使用从父元素那边继承下来的值（这时候的值不叫"specified value"了，而是"computed

value"）。显然，font-size属性可以继承，并且p元素也不是文档树的根元素，但是p的父元素也没有指定值啊！这没法计算啊！

3.如果上面的条件都不满足，就使用属性的初始值。属性的初始值在属性定义的时候就给出了。font-size的默认值为medium，所以这里的hello字体大小应该为medium。不过这个medium到底是多大啊？个人认为应该就是ua设置的默认字体大小。理由：chrome中默认字体16px，而font-size:medium和font-size：16px效果完全相同。

step2.使用计算值 (the "computed value")

每个元素都应该有确定的属性，如果没有指定属性值，那么就只有按照一定的规则来计算出来值了。这种规则就是基于继承的规则。比如设置body{font-size:0.104in;},那么p的font-size经过计算也是0.104in。所以只要不是直接指定元素的属性值，都会使用到计算值。

这里就有个疑问了：上面的font-size:medium其实也没有具体的，最终结果呈现为font-size:16px是不是也是经过计算的呢？个人认为这应该算是浏览器内部设置的默认样式，并不算是一种计算值。

step3.得到使用值(the "used value")

由于使用媒体的不同，计算后的值通常要转成适用于目标媒体的“绝对值”，使之能用确实地在目标媒体上使用，我们称之为“used value”。比如要在屏幕上显示0.104in，因为现在的电脑屏幕都是按像素尺寸算的，所以需要将in转化为px才能显示（由于不同屏幕的ppi不同， 所以最终看到的长度有可能不一样）。

0.104in大概等于10px，所以得到的使用值为10px。

使用值就是完成计算值以及确定相关依赖之后得到的适用于目标媒体的值。完成计算值不用说了，那什么叫做确定相关依赖呢？比如你设置一个box的高度为50%，那么这个值只有在其父元素的高度确定之后才能计算，这就是相关依赖。

step4.根据实际环境应用实际值(the "actual value")

搞了这么久，终于要应用到生产了，这里还有一个环境限制。我们之前得到的font-size使用值为10px，是不是意味着最终就能让p标签的文字以10px大小显示呢？当然不是，chrome所能设置的最小字体为12px，所以最终我们看到的并不是font-size:10px效果，而是font-size：12px，这就是环境限制。

上面4步只是应用属性值得一个大概步骤，其实在得到指定值时需要考虑许多因素，比如ua，用户，以及作者样式间关系，以及各选择器优先级之间的关系。有关优先级的问题在精通css(3)-优先级那些事儿里已经写的很清楚了，这里就不赘述了。

看完这章总体上对css属性值的设定流程有了大致的了解，更加深入的内容后续满满呈上。