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屬性值的設定流程有了大緻的了解，更加深入的内容後續滿滿呈上。