CSS 2.1 規範（一）
寫在前面的
該部落格為我閱讀 CSS 2.1 規範時的隨筆。為了方便與原規範中的章節對應上，章節資訊與相關 W3C 規範中的內容保持一致。以下只記錄了本人認為對於 CSS 編寫者較為重要的部分，所以章節資訊並不連續。
1 關於 CSS 2.1 規範
1.4.2 CSS 屬性定義
- 值（Value）
- 初始值（Initial）
- 應用（Applies to）
- 繼承（Inherited）
- 百分比（Percentages）
- 媒體型別組（Media）
- 計算值（Computed value）
注意：以上資訊每個屬性都會定義的。
2 CSS 2.1 簡介
2.3 CSS 處理模型
本節展示了一種支援 CSS 的使用者代理可能使用的工作模型，這只是一種概念模型，實際實現可能不同：
- 解析源文件並建立文件樹。（備註：文件樹是源文件中編碼的元素構成的樹狀結構）
- 識別目標媒體型別。
-
根據某種特定的媒體型別檢索與文件關聯的所有樣式表。
- 在文件樹中為每個元素的每個屬性分配一個適用於目標媒體型別的值做標記。根據級聯和繼承中描述的機制為屬性賦值。
- 計算值的部分取決於特定媒體型別的格式化演算法。例如，如果目標媒體是螢幕（screen），則使用者代理應用視覺格式化模型。
- 根據標記後的文件樹生成一個格式化結構。通常，格式化結構與文件樹非常相似，但也可能顯著不同，特別是當作者使用偽類元素並生成內容時。首先，格式化結構根本不必是“樹形”——結構的形式取決於具體實現方式。第二，格式化結構可以包含比文件樹更多或更少的資訊。例如，如果文件樹中的元素具有值為“none”的“display”屬性，則該元素將不會在格式化結構中生成任何內容。另一方面，列表元素可以在格式化結構中生成更多資訊：列表元素的內容和列表樣式資訊。
- 將格式化結構轉換到目標媒體（例如，列印結果，在螢幕上顯示，呈現為語音等）。
2.3.1 畫布（canvas）
備註：這裡的“canvas”是使用者代理層的術語，而不是 html 中的 canvas 標籤。
畫布描述了“渲染格式化結構的空間”。畫布對於空間的每個維度都是無限的，但渲染通常發生在畫布的有限區域內，由使用者代理根據目標媒體建立。例如，呈現給螢幕的使用者代理通常約束寬度，並基於視口的尺寸選擇初始寬度。呈現給頁面的使用者代理通常約束寬度和高度。聽覺使用者代理可以在音訊空間中施加約束，但不能在時間上進行約束。
2.4 CSS 設計原則
- 向前與向後相容
- 對結構化文件的補充
- 供應商，平臺和裝置的獨立性
- 可維護性
- 簡潔
- 網路效能
- 靈活性
- 豐富性
- 可選的語言繫結
- 可訪問性
4 語法和基本資料型別
備註：文件中使用 BNF 正規化詳細聲明瞭 CSS 的詞法與語法。據說 Webkit 是使用 Flex 和 Bison 解析器生成器，通過 CSS 語法檔案自動建立解析器。
4.3 值
1 整數和實數
2 長度
在零長度之後，單元識別符號是可選的。
長度單位有兩種：相對單位和絕對單位。相對長度單位指定相對於另一個長度屬性的長度。使用相對單位的樣式表可以更容易地從一個輸出環境縮放到另一個輸出環境。
相對單位有：
- em：關聯字型的“font-size”
- ex：關聯字型的“x-height”（備註：“x-height”表示字元“x”的高度）
“em”單位等於使用它的元素的“font-size”屬性的計算值。例外是當“em”出現在“font-size”屬性本身的值時，在這種情況下，它指的是父元素的字型大小。
“ex”單位由元素的第一個可用字型決定。例外是“ex”出現在“font-size”屬性的值中，在這種情況下，它指的是父元素的“ex”。
絕對長度單位是固定的。絕對單位包含物理單位（in，cm，mm，pt，pc）和 px 單位。
- in：英寸 - 1in 等於 2.54cm
- cm：釐米
- mm：毫米
- pt：磅（points）- CSS 中的 1pt 等於 1in 的 1/72
- pc：倍卡（picas）- 1pc 等於 12pt
- px：畫素單位 - 1px 等於 0.75pt
裝置解析度對畫素（px）單位存在影響，1px的面積在高解析度的器件中可能由多個點覆蓋。備註：移動端 1px 細線的問題
3 百分比
百分比值總是關聯另一個值，例如長度。每個接受百分比的屬性也定義了百分比所關聯的值。該值可以是同一元素的另一個屬性值、祖先元素的屬性值或格式化上下文的值（例如，包含塊的寬度）。
4 URL 和 URI
URI值（統一資源識別符號，Uniform Resource Identifiers），用來在屬性值中指定 URI 的函式符號是“url()”。如下：
body { background: url("http://www.example.com/pinkish.png") }
URI值的格式是“url(”後跟可選的空格和一個可選的單引號(')或雙引號(")字元，接著是URI本身，後跟可選的單引號(')或雙引號(")字元，後跟可選空格，後跟')。這兩個引號字元必須相同。
5 計數器
6 顏色
顏色要麼是一個關鍵字，要麼是一個（符合）RGB 規範的數值。
7 字串
字串既可以用雙引號編寫，也可以用單引號編寫。
8 不支援的值
如果 UA 不支援某個值，則在解析樣式表時忽略該值，就好像該值是非法值一樣。
6 屬性賦值、層疊（Cascading）和繼承
6.1 指定值、計算值和實際值
一旦使用者代理解析文件並構建文件樹，它就必須為樹中的每個元素分配一個允許在目標媒體型別中使用的值。
屬性最終的值通過四個步驟來進行計算：規範中指定的值（specified vlaue，指定值），然後處理得到一個可以用於繼承的值（計算值，computed value），接著在必要時轉換為使用值（使用值，used value），最後根據本地環境的限制進行轉換（實際值，actual value）。
6.1.1 指定值（specified value）
使用者代理必須首先基於以下機制（按優先順序順序）為每個屬性分配指定值：
- 如果級聯產生一個值，則使用它。
- 否則，如果該屬性可繼承，並且該元素不是文件樹的根，則使用父元素的計算值。
- 否則使用屬性的初始值。每個屬性的初始值在屬性定義中指定（備註：屬性定義也在CSS規範中）。
6.1.2 計算值（computed value）
指定值通過層疊被計算為計算值，例如，URI 被轉換成絕對的，“em”和“ex”單位被計算為畫素或者絕對長度。
6.1.3 應用值（used value）
處理計算值時，儘可能不要格式化文件。然而，有些值只能在文件佈局完成時確定。例如，如果一個元素的寬度是其包含塊的特定百分比，在包含塊的寬度確定之前無法確定這個寬度。
6.1.4 實際值（actual value）
原則上，應用值應該用於渲染，但使用者代理可能無法在給定的環境中利用該值。例如，使用者代理或許只能用整數畫素寬度渲染邊框，因此不得不對寬度的計算值做近似處理，或者使用者代理可能被迫只能用黑白色調而不是全綵色。實際值是經過近似處理後的應用值。
6.2 繼承
繼承是基於文件樹的，並且不會被匿名框截斷。文件樹中元素的某些屬性可以被其子元素繼承，每個 CSS 屬性都定義了它是否可繼承。
當繼承發生時，元素繼承計算值。父元素計算值成為子元素的指定值和計算值。
備註：繼承的值的權重最小。
2.1 “inherit”
每個屬性都可以使用“inherit”這個級聯值，這意味著，該屬性將使用其父元素屬性的指定值。
如果在根元素上設定“inherit”值，則使用屬性的初始值。
6.3 @import 規則
“@import”規則允許使用者從樣式表中匯入其它的樣式規則。在 CSS 2.1 中，任何“@import”必須先於所有其他規則（“@charset”規則除外）。“@import”關鍵字後面必須包含樣式表的 URI。也允許是字串，它將被解釋為周圍有URL(…)。
使用者代理可以避免為不支援的媒體型別檢索資源，因此作者可以指定與特定媒體相關的“@import”規則。這些條件匯入在 URI 之後指定逗號分隔的媒體型別。
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
6.4 層疊（cascade）
備註：層疊是為了解決樣式重疊問題。
樣式表可能有三個不同的來源：作者、使用者和使用者代理。
- 作者：作者根據文件語言的約定來給源文件指定樣式表。例如，在HTML中，樣式表可以包含在文件中或連結到外部。
- 使用者：使用者可以給特定文件指定樣式資訊。例如，使用者可以指定一個包含樣式表的檔案，或者使用者代理可以提供生成使用者樣式表的介面（或者與此類似的功能）。
- 使用者代理：一致的使用者代理必須應用預設樣式表。使用者代理的預設樣式表應該以滿足文件語言的一般呈現期望的方式呈現文件語言的元素（例如，對於視覺瀏覽器，HTML中的em元素使用斜體字體表示）。有關HTML文件的推薦預設樣式表，請參見HTML的示例樣式表。
注意，使用者可以修改影響預設樣式表的系統設定（例如，系統顏色）。然而，一些使用者代理無法更改預設樣式表中的值。
從這三個來源的樣式表將在範圍內重疊，並且它們根據層疊進行互動。
CSS 層疊給每個樣式規則分配權重。當應用幾個規則時，權重最大的規則優先。
預設情況下，作者樣式表中的規則比使用者樣式表中的規則具有大的權重。
6.4.1 層疊順序
找到某個元素的某個屬性的值，使用者代理必須按照下列步驟進行優先順序排序：
- 找到所有適用於目標媒體型別的元素的屬性宣告。如果關聯的選擇器匹配存在的元素，並且目標媒體包含在作用於該宣告的 @media 規則的媒體列表，則應用該宣告
- 根據重要性（常規或重要）和來源（編寫者，使用者或使用者代理）排序，升序優先順序為：
- 使用者代理宣告
- 使用者常規宣告
- 編寫者常規宣告
- 編寫者重要宣告
- 使用者重要宣告
- 相同重要性和來源的規則根據選擇器的特殊性（排序：更特殊的選擇器將覆蓋一般的。偽元素和偽類被分別算作常規元素和類）
- 最後，根據指定順序排序：如果兩個宣告的權重，來源和特殊性都相同，後宣告的生效。引入的樣式表（譯註：這裡應該是指'@import'，而不是廣義的通過各種方式引入樣式表）中的宣告被認為在樣式表自身的所有宣告之前
6.4.2 “!important”規則
“!important”規則的權重高於沒有“!important”標誌的規則。
4.3 計算選擇器的特殊性（specificity）
選擇器的特殊性計算如下：
- 如果是在“style”屬性中的規則，則 a = 1，而使用選擇器的規則，則為 a = 0（在 HTML 中，元素的“style”屬性的值是樣式表規則。這些規則沒有選擇器，所以a＝1，b＝0，c＝0，d＝0。）
- b = 選擇器中 id 屬性的數目
- c = 選擇器中其他屬性和偽類的數目
- d = 選擇器中元素名稱和偽元素的數目
例子如下：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
7 媒體型別
樣式表最重要的特徵之一是，能讓文件呈現在不同的媒體上：螢幕上、紙上、語音合成器、盲文裝置等。
某些 CSS 屬性只針對某種特定媒體而設計（例如，“page-break-before”屬性僅適用於分頁媒體）。然而，也存在不同媒體型別可以共享的屬性，但該屬性需要不同的值。例如，“font-size”屬性對於螢幕和列印媒體都是有用的。兩種不同的媒體型別，對共享屬性要求不同的值；文件通常在計算機螢幕上比在紙上需要更大的字型。因此，有必要讓樣式表或樣式表的一部分適用於某些特定媒體型別。
目前有兩種方法來限制樣式表用於某種特定的媒體：
使用 @media 或 @import 規則，在樣式表中指定目標媒體。
@import url("fancyfonts.css") screen; @media print { /* style sheet for print goes here */ }
在文件語言中指定目標媒體。例如，在HTML 4 中，“link”元素上的“media”屬性限制外部樣式表用於指定的媒體：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Link to a target medium</TITLE> <LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css"> </HEAD> <BODY> <P>The body... </BODY> </HTML>