今天來介紹 CSS 如何處理屬性值。
「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。
在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看。
「重新認識 CSS」系列文章發文於:
每個屬性的定義表 (definition table) 都定義了:
如下圖:
圖片來源:CSS 2.2 - 1.4.2 CSS property definitions
UA 解析了文件並在建構了 document tree 之後,UA 必須為 tree 中的每個元素以及 formatting structure (格式化結構) 中的每個 box 分配對應於目標 media type 的屬性值。
document tree:source document (原始文件,在這邊可以指 HTML 或 XML) 中編碼的元素的 tree。該 tree 中的每個元素都只有一個父元素,但 root 元素 (在 HTML 中就是
<html>
元素) 除外。
所以每個屬性都會有一個值,而這些值 (也就是說元素或 box 的 CSS 屬性的 final value) 會通過下面幾個步驟來計算決定。
在說明步驟之前先來說這個計算過程中會用到的幾種值:
為了找到 declared value,應用於每個元素的每個屬性宣告,都會以 filtering declarations (過濾宣告) 的方式來標識出 (identify) 可以適用於每個元素的所有宣告。只要符合下列情況,宣告就適用於各元素:
適用於每個元素上的每個屬性的 declared value 會形成 declared value 的列表,此列表會由 cascade 來進行優先度排序。
cascade 會使用各元素上屬性的 declared value 的無序列表,透過 Cascading (明天會介紹) 流程選擇一個 "winning value",也就是按照宣告的優先度來進行排序,優先度最高的宣告就會輸出一個 cascaded value (也可以說是在 cascade 的輸出 (output of the cascade) 中排在最前面的值)。
如果 cascade 的輸出為空 (empty) 列表時,則沒有 cascade value。
cascade 的輸出 (output of the cascade):每元素上的每個屬性的 declared value 的排序列表 (可能為 empty)。
Specified value 是由 style sheet 的作者 (也就是網頁開發者) 針對該元素指定的屬性值。
cascaded value 會透過 defaulting 流程來計算 specified value,以確保每個元素上的每個屬性都有一個 specified value,流程如下:
initial
:將 initial value 作為屬性的 specified valueinherit
:將 computed value 作為屬性的 specified value 和 computed valueunset
:是否為 inherited property:
inherit
的作用initial
的作用如果沒有 cascaded value 時,也會依照上面流程來決定 specified value。
資料來源:
疑惑:
cascaded value 會透過 defaulting 流程來計算 specified value,以確保每個元素上的每個屬性都有一個 specified value,流程如下:
这部分是不是在说used value