檢視 CSS 的原始碼

'''階層的方式表示'''（英語：'''C'''ascading'''S'''tyle'''S'''heets，縮寫：'''CSS'''；閣稱'''欲串樣仔式列表'''、'''級聯的形式表'''、'''捾接紲落來表現'''、'''階層的方式表示'''）是一種用來做結構化文件（如 HTML 文件抑是 XML 應用）添加樣式（字型、間距佮色水等等）的電腦語言，由 W 三 C 定義佮維護。CSS 三現此時已經予大部份現代瀏覽器支援，後一版的 CSS 四猶閣佇咧開發中。

CSS 毋但會當恬態地修飾網頁，猶閣會當配合各種的手稿語言動態地對網頁各元素進行格式化。CSS 會當對網頁中元素位置的排版進行親像素級精確控制，支援差不多所有的字型字號樣式，有對網頁物件佮模型的樣式編輯的能力。

==概述==

CSS 袂使干焦使用，著愛佮 HTML 抑是 XML 做伙協同工課，為 HTML 抑是 XML 起裝飾作用。本文主要介紹用於裝飾 HTML 網頁的 CSS 技術。其中 HTML 負責確定的網頁內底有啥物款的內容，CSS 確定是以啥物款的外觀 ( 大細、粗幼、色水、掠齊和位置 ) 展現遮的物件。CSS 會當用佇設定頁面布局、設定頁面的元素樣式、設定適用佇所有彼號網頁的形體。CSS 會當散地直接添加佇欲應用𪜶的網頁的元素頂懸，嘛會當集中化內底起佇咧網頁、連結式引入去網頁以及匯入式引入去網頁。

CSS 上重要的目標是共檔案的內容佮伊的顯示分隔開來。佇咧 CSS 出現此時，差不多所有的 HTML 檔 àn-nāi 攏包含檔案顯示的資訊，比如講字型的色水、背景應該是按怎、按怎排列、邊緣、連線等等攏著愛一一咧 HTML 檔 àn-nāi 列出，有時重複列出。CSS 使作者會當將遮的資訊中的大部分隔離出來，簡化 HTML 檔案，遮的資訊予人囥佇咧一个輔助的，用 CSS 語言寫的檔案中。HTML 檔案當中干焦包含結構佮內容的資訊，CSS 檔案當中只包含樣式的資訊。

比如講 HTML 中 ` H 二 ` 標誌這一个二級標題，伊佇級別比一級標題 ` H 一 ` 低，比三級標題 ` H 三 ` 懸。遮的資訊攏是結構上的資訊。

一般來講級別愈懸的標題其字型嘛愈大，` H 一 ` 的字型上大，因為一般來講字型愈大伊表示的內容就愈重要，另外一般標題攏用粗體字，來突出𪜶的重要性。一般來講 ` H 二 ` 使用粗體字，其字型比 ` H 三 ` 大，比 ` H 一 ` 細。遮的資訊是顯示用的資訊。

佇咧 CSS 出現進前，假使作者愛確定 ` H 二 `標題的色水、字形、大細抑是其他顯示特徵的話，伊欲使用 HTML 中的 ` font ` 抑是其他的指令，光 ` H 二 ` 無夠，因為乎 ` H 二 ` 只是一个結構指令。假使一个標題愛用趨的字、紅色的字元、白色的下底色的話，作者愛按呢寫：


: ` < H 二 > < font color=" red " bgcolor=" white " > < i > 使用 CSS < / i > < / font > < / H 二 > `

遮的顯示用的指令會當予一个 HTML 變著足複雜的，欲維護嘛閣較困難。假使所有的二級標題攏愛按呢來顯示，所有的二級標題的指揮攏愛遐複雜。另外讀者無法度改變遮的規定，假使一个讀者閣較佮意藍色的標題的話，伊無法度改變標題的色水，因為檔案的作者特莫規定了標題的色水。

使用 CSS 的話 ` H 二 ` 指令干焦規定文章的結構，其顯示講由樣式表來規定，頂懸的例會當變按呢：


: ` < H 二 > 使用 CSS < / H 二 > `

服從的形式表會當規定 ` H 二 `指令使用趨體字，紅色字佮白色背景：


: ` H 二 { color : red ; background : white ; font-style : italic ; } `

按呢顯示佮內容就分開矣（因為CSS 的優點，W 三 C 這馬當咧考慮將 HTML 中的真濟顯示用的指令廢棄掉）。 HTML 干焦表達文章的結構，CSS 表達所有的顯示。CSS 會當指示色水、字形、排列、大細閣有其他足濟非視覺的表達方式，譬如講共一篇檔案內底的內容讀出來。

CSS 樣式資訊會當包含佇一个附件內底抑是包含佇 HTML 檔 àn-nāi。讀者會使用真濟个模樣，佇重複的情況下伊會當選擇其中之一。無仝的媒介會使使用無仝款的模樣。譬如一个檔案佇咧螢光屏頂頭的顯示會當佮佇印表機中列印出來的顯示無仝。按呢作者會當為無仝款的媒體設計上好的顯示方式。此外 CSS 的目標之一是予讀者有閣較大的控制顯示的自由。假使一个讀者感覺趨趨的字的標題讀起來足困難的，伊會當使用家己的模樣表檔案，按呢做伙表會「重疊」使用，伊會當干焦改變紅色趨的體字按呢就著保留所有的其他樣式。

===包含 CSS 的 XHTML 檔案範例===

==主要內容==

CSS 由多組「規則」組成。每一个規則由「選擇器」（selector）、「屬性」（property）和「值」（value）組成：

* 選擇器（Selector）： 加一个選擇器會當半形弄號（,）隔開。
* 屬性（property）： CSS 一、CSS 二、CSS 三規定了誠濟的屬性，目的咧控制選擇器的模樣。
* 值（value）： 指屬性接受的設定值，加一个關鍵字的時陣大攏以空格共隔開。

屬性佮值之間用半形冒號（:）隔開，屬性佮值合稱為「特性」。 濟特性間來用「;」隔開，最後用「{ }」括起來。

===選擇器===

愛針對無標籤定義範圍進行樣式設定時，通利用 ` < div > ` 佮 ` < span > ` 標籤

CSS 內底這馬總共有五種基本選擇器（Basic Selectors）佮兩種偽選擇器。無仝選擇器的優先級別佮運作效能往往存在差異。

====基本選擇器====

* 標籤選擇器（h 一，p 等）——` elementname `
* 類別揀器（class）——` . elementname `
* ID 選擇器（ID）——` # elementname `
* 萬用選擇器—— ` * ns | * * | * `
* 屬性選擇器（嘛共翻譯做「萬用字元選擇器」）——` [attribute] `

====屬性選擇器====

屬性選擇器允准使用者自訂屬性名稱，毋但干焦限制 id，class 屬性。屬性選擇器共有七種。

====組合選擇器====

CSS 里這馬攏總有四種的組合選擇符（Combinators）：

====選擇器使用範例====

例：

佇這个例內底有三个選擇器：` p `、` h 二 ` 和 ` . highlight `，`color : red ` 是一个定義，其中 ` color ` 是屬性，` red ` 是 ` color ` 的值。

佇遮 HTML 中的結構 ` P `（段落）和 ` H 二 `（二級標題）得著無仝款的模樣。每一節落的字體的大細比包含這段落的結構的字體的大細愛大百分之十，其字形是 ` Garamond `，假使講 ` Garamond ` 若無遮爾仔使用一般的 ` sans-serif ` 字形。二級標題的字用紅色，底面是白色的。這个例中的第三个規則規定矣一个 ` class ` 的款式。通過 ` class ` 屬性逐个 HTML 結構攏會當予人指定做這个 ` class `，比如講：

` ` `
< P class=" highlight " > 這个階段會被顯示做黃底紅字粗體。< / P >
` ` `
顯示為這个階段會被顯示為黃底紅字粗體。

除使用 ` < style > ` 以外，嘛會當 HTML 內直接使用 ` style=" / * CSS 佇咧遮 * / " ` ︰

====其他選擇器====

CSS 著閣提供矣偽元素選擇器佮虛擬類別選擇器，但是用途單一寡，定定佮其他選擇器組合做伙來使用。偽元素的元素主要用佇選取佮另外一个選擇器選著物件臨近的元素。虛擬類別選擇器用佇選牢佇特定的狀態或者是有特定性質的元素。

===引入來 CSS 規則的足濟種方式佮其實疊性===

CSS 會當有足濟種引入方式，一个網頁會當引入幾个仔 CSS 檔案，仝一種 CSS 規則會當以被反覆多次添加。這會使 CSS 的使用方式非常靈活，毋過嘛會誠捷出現規則衝突。同時對一个網頁元素設定無法度並存的二種模樣的時陣，就會引起衝突。CSS 的特色之一就是其解決規則衝突的方案。CSS 的規則衝突會當分做無仝來源之間的規則衝突佮仝一來源內部的規則衝突。CSS 分層次、立體化的較無仝規則的優先級的方式，就是所謂層疊性 ( cascading ) 的體現。

代先講來源的多樣性，CSS 資訊會當來自：

* 作者的形體
* 作者會當佇伊的 HTML 檔案中確定一个外來的、獨立的 CSS 檔案（外部的形體）， 其優先級上低
* 作者會當將 CSS 資訊包括佇 HTML 檔 àn-nāi（內底的模樣）* 作者會當佇一个 HTML 指令內結合 CSS 指令（行內的樣式）， 其優先級上懸。一般按呢做是為著佇特殊情況下，共頂懸來源的彼號 CSS 抵消掉
* 客戶捀自定的型式（client-side style sheet）
* 瀏覽網頁的使用者會當家己佇本地電腦頂懸家己寫一个 CSS 檔案，然後就會當佇瀏覽器內通過設定好特定選項，來載入家己的 CSS 檔案。這乎 CSS 檔案會當用佇所有的 HTML 檔案上。做網頁作者無設定某項規則，毋過存在對應的使用者自訂規則的時陣，使用者的規則就會當起作用。假使若作者的 CSS 檔案佮讀者的相衝突，瀏覽器會採用作者的規則。若讀者有特殊的要求，會當通過佇咧自訂規則尾添加 ` ! important ` 提升自訂規則的顯示優先權。( 網頁的作者嘛會當使用 ` ! important ` 予規則提升權限，但是優先級別比毋過由使用者寫的 ` ! important ` 聲明，` ! important ` 對網頁作者的意義干焦佇網頁開發階段的規則衝突測試 )
* 瀏覽器的看法
* 若是外部無特別指定一个模樣的話，一般瀏覽器家己有一个內在的樣式。因為無仝款瀏覽器的預設樣式並無一致，所以講究美啦觀的網頁的設計者一般佮意去掉這按算的型式。

其次閣需要知影規則特殊性 ( specificity ) 的概念。某一个規則的特殊性嘛定定予人號做規則的具體程度。規則特殊性的懸低次序如下（照次遞減）：

一 .行內的項二 . ID 選擇器三 . class 揀器四 . 標籤選擇器五 . 通用選擇器（也就是萬用字元選擇器，用少得）

====特殊性優先原則====

特殊性優先原則是上重要的優先級較規則。當引起衝突的二種規則的特殊性存在差異時（譬如講一个是通過 ID 選擇器指定的型式，另外一个是通過 class 選擇器指定的型式）， ia̋n-jín 將優先採用特殊性閣較懸的模樣。規則的特殊性的較是上優先的。你若會當直接判斷出特殊性的差別，就毋免考慮其他的規則矣。

====無仝款來源的規則優先性====

無仝款來源的規則之間的優先原則是第二重要的。當規則來源相仝的時陣（和外部的形式和內部的樣式）， 後一步就需要較無仝類型來源的優先級別。總地來講，記予牢「行內的樣式優先於內部的樣式，內部的樣式閣優先於外部的樣式」即可應對多數捷看的情形。像網頁瀏覽者自訂𪜶的模樣表的優先級別款，干焦瀏覽器的設計者才需要考慮，佮網頁設計者的關係無蓋大。若考慮有可能出現的閣較複雜的來源衝突，內容就較濟矣。但是一般咧寫樣式的時陣，應該可能避免遮的複雜的情形的出現。具體來講，一般情形下的採納樣式效果的優先級順序為：

一 . 行內的項二 . 內底的樣式三 . 佇咧HTML 中通過 ` < link > ` 標籤直接引入的外部表四 . 佇咧 CSS 中通過 ` @ import ` 語句間接引入的外部款式表五 . 瀏覽網頁的使用者家己定義的模樣（需要手袂振動載入）
六 . 瀏覽器預設的模樣（如標題有預設大細、段落之間有預設間距等，無仝款瀏覽器的預設樣式無完全仝款）

CSS 中猶閣有路用 ` ! important ` 修飾的重要性聲明。若有計入重要性聲明，按呢佇咧以上規則的上頭前閣需要加上二條規則：

一 . 使用者對本地載入的重要自訂的樣式二 . 設計者設定的重要樣式設計重要性聲明是為部份特殊使用者佮所有開發者提供方便。一方面，使用者會當通過設定家己的色彩方案，並對其使用重要性聲明來提升瀏覽體驗。另外一方面，網頁的設計者難免會拄著因為規則衝突致使特定的形體規則失效的情形，設計者會當通過予毋知啥物故不起作用的規則增加重要性聲明，看有一个變化性無來確定著無敢是無細膩致使著規則衝噗噗引起特定規則被崁失效。

====權重分數較機制====

有時陣閣會拄著選擇器優先級無法度直接判斷，而且規則來源嘛仝款的情形。若是網頁設計者誠少使用層次較複雜的選擇器（比如講多級的後代咧選擇器）， 遐著愛較權重的狀況一般袂拄著（一般若會當直接根據頭前的規則判斷出優先性結果，或者是講起衝突的二條規則的權重完全仝款，干焦會當繼續去看後一條較出現次序的機制）。 現此時，CSS 猶閣有一套分數加權( 抑是講分數有累積 ) 的機制用來解決這款規則衝突。先列出基本的分值：

* 一个行內的樣式占一千分
* 一个 id 選擇器占一百分
* 一个 class 選擇器占十分
* 一個標籤選擇器占一分組合使用多個基本選擇器時，無仝選擇器的得分會忝加到做伙。最後著分懸的選擇器，其指定的模樣會勝出。

舉例：
` . type 一 # id 三 { color : green ; font-size : 二十 px ; } `
` div p # id 三 { color : blue ; background-color : grey ; } `
準講這兩行代碼攏會當選著仝一个 ID 為「id 三」元素，而且攏是仝款出自仝來源的模樣。會當看著，二者使用的優先級上懸的選擇器攏是 ID 選擇器，起衝突的範勢設定是字型色水。會當予這个元素設定字型色水為綠色，共另外一个元素設定字型色水為藍色。照評分規則，因為前一種代碼使用矣一个類選擇器佮一个 id 選擇器，所以著愛分做十 + 一百=一百十分；後一種代碼使用兩个標籤選擇器佮一个 id 選擇器，所以著分做一爿 + 一 + 一百=一百空二分。因為一十分 > 一百空二分，所以前是一个規則勝出講，目標元素的最終文字色應該是青的。

====靠後者優先原則====

當權重較猶原袂當分出優先級輸贏的時陣，到尾仔就是共守關底的「靠後優先」的原則矣，也就是講後定義的形式優先級較懸。若起衝突的規則來源相仝，而且著分嘛仝款，遐爾仔最後的衝突解決法則就是看 CSS 代碼出現的前後順序。了後出現的規則會崁掉去佮優先級誠好的先出現的規則。嘛會使叫做「後發制人」、「 後來者徛起」抑是「後湧捒前湧」原則，隨在你按怎稱呼。這款原則的適用情形是真捷看著，所以這个規則嘛足重要。

===行級的元素參塊級的元素===

===四盒模型===

===浮動佮定位===

====包含塊、定位====

包含塊是 CSS 定位屬性所寄託的理論模型。

====層次佮層疊起去下文====

重疊上下文規則決定矣做有網頁的元素位置發生部份重合的時陣，重合部份的頂下疊放次序。疊起去下文規則詳細規定囉當浮動、定位以及 z 軸數值同時出現時，元素疊次序的總規則。

====格式化上下文====

格式化上下文有特殊的布局性質，妙建立格式化上下文會使解決方便地達到幾種特殊的目的：

* 避免垂直方向無仝款元素的相鄰外爿距自動合併
* 清除因為子元素設定了浮動可能造成的父元素懸度塌落去
* 實現一列闊度固定、一列闊度無固定的雙列闊度自適應布局

===其他===

CSS 檔內乎嘛會當包含講注釋，批釋放佇咧 ` / * ` 和 ` * / ` 之間。一般的瀏覽器嘛辨識以雙斜槓 ( ` / / ` ) 開頭的這種注釋，但是這是無規範的做法。

==歷史==

===發展歷史===

====較早是形式表的歷史====

HTML 規範雖然規定網頁內底的標題、段落應該使用的標籤，但是無牽涉著遮的內容應該以啥物種形 ( 比如講大細、位置、間距、縮排等屬性 ) 呈現佇瀏覽器當中。對一九九空年代初 HTML 予人發明開始，形體表就以各種形式出來矣。無仝款的瀏覽器敆做伙𪜶各人的模樣語言，讀者 ( 也就是瀏覽網頁的使用者 ) 會當使用遮的看式語言來調節網頁的顯示方式。一開始看式表示予讀者用的，上代先的 HTML 版本干焦含真少的顯示屬性，讀者來決定網頁應該按怎予人顯示。

一九九三年，Robert Raisch 提出著一種號做「RRP」的款式規則建議講。但是這 RRP 干焦允准網頁使用一个模樣，無像這馬的 CSS 會當支援同時載入幾个。無久了後出現的 Mosaic 瀏覽器就採用增加新種類的 HTML 標籤實現看法的表達，以滿足設計師的要求，這嘛佮這馬的 CSS 設計原則無符合。隨著 HTML 內建的樣式功能的增加，外來的定義這个樣式的語言漸漸減弱矣。一九九三年發布的這个 Mosaic 瀏覽器是頭一款使用者介面，並支援書籤、圖示揤鈕佮圖片顯示。進前的瀏覽器攏是純文字瀏覽器。就算佇今仔日，干焦使用作業系統命令列內起的 Telnet 命令，嘛是會當檢視網頁的原始碼。

後來，台灣人魏培源開發的 ViolaWWW 瀏覽器使用一種規定有層次岫狀性的模樣表示，並且頭一个支援迵過 ` < link > ` 標籤參照外部的形體來表示。FOSI 上早支援以相對來講 sài-sù 值來表示字型的大細。函數式風格的 DSSSL 語言支援在樣式表中進行定義變數、繼承變數、定義函式等等的功能，但是語法複雜。一九九四年，全球資訊網之父提姆 ・ 柏內茲-李在歐美眾多多高能物理研究者佮技術人員的支援落，佇美國麻省理工學院創立了全球資訊網協會（W 三 C）， 其職責是提供網路標準化建議。一九九四年，Håkon W Lie 提出層疊 HTML 看法（Cascading HTML Style Sheets，CHSS）。 CHSS 既支援使用者自訂的方式表示，嘛支援網頁作者看法，而且會當滿足無仝的規則以百分比的方式組合使用。伊的權重規則會計算方式無夠直觀，當無仝規則透早會得著啥實際的效果並無簡單對代碼內底看出。 一九九六年，出現佮 CSS 語法足成的表現指明語言（Presentation Specification Language，簡稱 " PSL 九十六 "）。 PSL 九十六除表達樣仔形以外，嘛支援條件判斷等等功能，猶閣會當根據對瀏覽器的資訊的判斷來使用無仝款的模樣，但是有真濟佮意。

====CSS 的誕生佮發展====

一九九四年，哈肯 ・ 維姆 ・ 萊提出矣 CSS 的上頭先建議。伯特 ・ 波斯彼當陣當咧設計一个叫做 Argo 的瀏覽器，𪜶決定做伙合作設計 CSS。彼陣仔已經有一寡模樣啊表語言的建議矣，猶毋過 CSS 是頭一个有含「重疊」的主意的。佇咧 CSS 中，一个檔案的樣式會當對其他的樣式來表中繼承落來。讀者佇咧有一寡所在通好以使用伊家己閣較佮意的花草，佇其他的所在愛繼承，抑是「重疊」作者的形體。這款層疊的方式使作者佮讀者攏會當活跳跳加入去家己的設計，混合各人的愛好。哈肯 ・ 萊佇一九九四年佇芝加哥的一次會議上第一次展示了 CSS的建議，一九九五年伊佮波斯做伙閣再展示這个建議。彼當陣 W 三 C 頭拄仔建立，W 三 C 著 CSS 的發展足有興趣，伊是按呢組織了一改討論會。哈肯、波斯佮其他一寡人（比如講小可仔軟的托馬斯 ・ 里爾登）是這个案的主要愛技術負責人。一九九六年底，CSS 已經完成。一九九六年十二月，哈肯 ・ 萊佮伯特 ・ 波斯發佈矣 CSS 規範的第一个版本。這嘛成做哈肯 ・ 萊的博士論文的一部份。彼陣已經有的主流瀏覽器的核心架構完全無適合解析 CSS 的語法，加上早年設計師濫用 HTML 標籤來表達𪜶的模樣 ( 這致使著「標籤湯」( tagsoup ) 這一个罵名的出現乎 )、而且膜袂關心代碼校驗，所以乎 CSS 等到幾冬了後才流行起來。一九九八年， 瀏覽器市場份額予微軟公司的 Internet Explorer 四佮網景公司的 Netscape Navigator 四兩大瀏覽器巨頭所占。CSS 出現了後，微軟乎 IE 瀏覽器行佇遐沓沓仔實現CSS 頭一版標準的前列。但是因為無重視問題修補，致使遺留 Bug 足濟的，這嘛會使得 IE 瀏覽器長期為著人怨嘆病。網景是共重心囥佇咧網頁尾本語言的開發頂懸，毋過真緊予略仔軟模仿。網景佇咧九空年代尾佮微軟展開的瀏覽器大戰中最後一敗塗地，走向破產邊緣，猶毋過網景嘛成功推出了後廣泛流行佇網頁設計中的 JavaScript 語言。瀏覽器大戰予得網頁設計人員深受著害，因為無仝款瀏覽器支援的語法規則無啥仝款，網頁設計人員姑不而將 IE 瀏覽器佮網景瀏覽器的瀏覽器分別設計一套網頁。新成立的民間設計人員團體「網頁標準計畫」( WaSP ) 水軍發動將 W 三 C 的建議宣揚為標準，並批評猶未加盟 W 三 C 標準的業界廠商。一九九七年初，W 三 C 組織矣專門管 CSS 的工作群組，其負責人是克里斯 ・ 里雷。這个工課群組開始討論頭一版中無牽涉著的問題，其結果是一九九八年五月出版的第二版規則。網頁標準計畫的七个成員成立了「CSS 武士團」（CSS Samurai）， 指出 Opera 瀏覽器佮 IE 瀏覽器咧支援 CSS 方面存在的濟濟問題。Opera 公司落手解決了問題，但是軟軟並無解決。網頁標準計畫嘛積極勸說網景公司佮 Macromedia 公司分別改進其產品著 CSS 標準的支援。二空空三年，Dave Shea 捒出一个名為「CSS 禪意花園」( " CSS Zen Garden " ) 的徛點，共人展示干焦通過應用無仝頁面的規則，就會當實現對網頁藝術風格的煥然一新。這个網站佇網頁設計相關的人陣內底有產生無細影響。

對二空空六年到二空空九年，「 DIV + CSS」布局逐步取代欠缺靈活性的傳統表格布局，無表格網頁設計成做網頁內容布局的主流方案。這个時陣嘛出現一寡為著佮風而濫用 DIV 布局的狀況，比如講將 ` < h 一 > ` 和 ` < h 二 > ` 等本身已經有語意的標籤嘛改用 ` < div > ` 標籤替代。

CSS 三引入的簡單動畫功能會當予 CSS 嘛開始行跤到只應由 JavaScript 負責的效果互動工課。到二空一七年為止，第三版規則猶未完備。

===版本歷史===

====CSS一====

佇咧一九九四年，哈肯 ・ 維姆 ・ 萊佮伯特 ・ 波斯合作設計 CSS。𪜶佇一九九四年頭擺佇芝加哥的一擺會議頂頭一擺展示矣 CSS 的建議。

一九九六年十二月發表的 CSS 一的要求有：

* 支援字型的大細、字形、強調
* 支援字的色水、背景的色水佮其他的元素
* 支援文章特徵如字母、詞佮行之間的距離
* 支援文字的排列、圖像、格仔佮其他的元素
* 支援墘仔、圍框佮其他關於排版的元素
* 支援 id 和 class

====CSS 二孵二孵一====

一九九八年五月 W 三 C 發表矣 CSS 二，其中包括新的內容如講：

* 絕對的、相對的佮固定的定位元素、媒體型的概念、
*雙向檔案佮
* 一个新的字型。

CSS 二嬸一修改矣 CSS 二中的一寡錯誤，刪除了其中基本無予支援的內容佮增加一寡已經有的瀏覽器的擴充內容。

====CSS 三====

CSS 三標準已部份公布，毋過猶無全部制定了後，閣有其他新的內容繼續加入。W 三 C 網站頂懸有專頁展示 CSS 三發展的進展。

CSS 三分無仝類別，這號做「modules」。 猶閣每一个「modules」攏有於著 CSS 二中額增加的功能，猶閣有向下跤相容。CSS 三較早一九九年已經開始制訂。一直到二空一一年六月七號，CSS 三 Color Module 總算是發布做 W 三 C Recommendation。

CSS 三裡有增加袂少功能，如：「 border-radius」、「 text-shadow」、「 transform」以及「transition」。 CSS 三亦支援動畫（animation）佮立體（preserved ma三 d）。

部份屬性（譬如講旋轉類屬性（如：transform）， 動畫類屬性，立體類屬性）， 因為這陣無仝款瀏覽器支援程度無仝，需要加上無仝款的瀏覽器綴來區分。

====CSS 四====

W三 C 佇二空一一年九月二九開始矣設計 CSS 四。一直到現時只有真少數的功能予部分網頁瀏覽器支援，如使用佇 HTML 毋是 SVG 上的 pointer-events。

CSS 四增加一閣較方便的選擇器，並簡化一寡現有選擇器的用法。

===採納的困難===

瀏覽器核心主要負責解析網頁內容的模樣猶閣有進行指令碼處理（這馬分別由瀏覽器內部的頁面彩現 ia̋n-jín 和 JavaScript ia̋n-jín 分工）。其中頁面彩現就是正確辨識出 CSS 代碼並佇窗仔口內底也出對應的內容樣式。來開發一个可支援 CSS 語法解析的瀏覽器並毋是真簡單，CSS 規則繁雜，尤其是需要考慮無仝款的 CSS 規則之間會存在互相影響的問題。自從 Mozilla 基金會將 Gecko 排版 ia̋n-jín 單獨發布了後，這馬有濟濟瀏覽器廠商採用由第三方發布的頁面彩現 ia̋n-jín，獨立開發新頁面彩現 ia̋n-jín 的機構嘛足少。

代先是標準實現程度的問題。就算講 CSS 一標準佇一九九六年就制定完成矣，但是一直到三年後猶未有一个瀏覽器實現矣其中的全部語法規則。上市的各个瀏覽器攏干焦實現矣對一部份規則的支援。二空空空年三月，由微軟佇咧麥金塔電腦平台頂發布的五 .空版 Internet Explorer ( IE ) 是第一个全部實現 CSS 一个瀏覽器。此後誠濟其他瀏覽器嘛開始做 CSS 一和 CSS 二的一部份。但是到二空空四年為止猶未有一个瀏覽器實現了全部 CSS 二規則。尤其 aural 和 paged 等特性是予人支援甲上䆀的。

其次，支援某種特性，無代表用起來就無問題。舊的 IE 版本就以 Bug 濟而共有名。其中有名聲狼藉的 IE 六存在元素堆疊 Bug、幽靈字元，方塊神秘消失等等稀奇古怪的設計缺陷。微軟自從佇第一輪瀏覽器大戰中勝出了後，就照戰獨霸市場的優勢，輕視修補 IE Bug 的呼聲，致使其市場份額後來閣漸漸予其他的瀏覽器娘仔食，產生第二輪瀏覽器大戰。

另外猶閣有代碼跨瀏覽器相容性的問題。「會當佇任何瀏覽器內底顯示」並無意味著「佇任何一个瀏覽器內底顯示的效果相仝」。 就算講徹底實現矣 CSS 一个瀏覽器嘛拄著真濟困難。真濟 CSS的實現機制互相矛盾、有毋著抑是其他稀奇古怪的所在。為著使𪜶的頁面佇任意系統頂懸的任意瀏覽器內面的顯示效果一致，網頁作者往往愛被迫寫出厚工的代碼抑是使用各種奇技身巧。一个上出名的錯誤牽涉著顯示四角形的闊度，佇咧IE 瀏覽器中四角形的闊度的顯示有錯誤，其實結果是四角形的闊度佇咧足濟瀏覽器當中予正確來顯示，猶毋過佇 IE 頂懸形的闊度傷過狹。雖然講這个錯誤有解決的辦法，但是伊限制著其他一寡功能（IE 八堵空已經改善方形闊度顯示問題）。 舊版 IE 猶閣有佮其他瀏覽器計算方式無仝款的方盒模型。

==特點==

===優勢===

網頁的讀者佮作者攏會當使用 CSS 來決定檔案的色水、字型、排版等等顯示特性。CSS 上主要的目的是共檔案的內容佮顯示分隔開。這有真濟好處：

* 檔案的可讀性加強
* 檔案的結構閣較靈活
* 作者佮讀者會當家己決定檔案的顯示
* 檔案的結構簡化了另外，佇咧 HTML 中：

* 一个規个網站抑是其中一部份彼个網頁的顯示資訊予集中佇咧一个所在，愛改變𪜶足方便
* 無仝款的讀者會當有無仝款的模樣，譬如講有的讀者需要字型較大
* HTML 檔案本身的範圍變細矣，伊的結構簡單矣，伊無需要包含顯示的資訊

CSS 猶會當控制其他的參數，比如講聲音（假使瀏覽器有閱讀功能的話）抑是予視障者用的感受裝置。

===缺點===

CSS 明顯的缺點包括：

* 瀏覽器無仝款的支援


: 瀏覽器著 CSS 的支援無統一，造成無仝款的瀏覽器顯示效果無仝。譬如講佇這微軟 Internet Explorer 的舊版本六鼻空，有真濟獨有的 CSS 二鋪零屬性，但是錯誤顯示誠濟重要的屬性，比如講：` width `，` height `， 和 ` float `。真濟 CSS 編寫人員為著雖然佇定定用的各个瀏覽器內底達到一致的版面編排，愛寫真濟針對各个瀏覽器的無仝款的 CSS 代碼。彼版面編排足複雜的時，愛佇逐个瀏覽器內底提著相仝的效果是無可能的。* CSS 無爸選擇器


: CSS 選擇器無法度提供元素的繼承性。先進的選擇器（比如講 XPath）對複雜的設計有幫贊。毋過，瀏覽器的效能佮增加彩現的問題，關係著父層選擇器，煞是 CSS 的工作群組拒絕建議的主要原因。
而且 CSS 四則計畫包括類似功能。
* 袂明確指定繼承性


: 平式的繼承性，建立佇瀏覽器當中 DOM 元素的層級佮具體的規則上，參照 CSS 二說明中的章節六 .四配一。
* 垂直控制的局限


: 元素的水平囥普遍地簡單咧控制，垂直控制是無。簡單來講，垂直地圍踅一个元素、頁尾的來囥袂當懸於可見視窗（viewport，視窗抑是螢幕的會當見範圍）的底部範圍。這需要欲複雜的模樣規則，抑是規則簡單，但是嘛予人廣泛支援。
* 無算術功能


: 一直到 CSS 二嬸一的 CSS 無法度明確簡單地進行計算（比如講：` margin-left : 百分之十-三 em + 四px ; `）。 計算功能佇足濟情形下攏是足有路用的，比如講：總欄位中計算欄位的 sài-sù 限制。毋管按怎，CSS WG 發表矣 CSS 局限性的草案。IE 五至 IE 七提供 ` expression ( ) ` 函式（ 人講的'''CSS 表達式'''）來執行計算功能，比如講 ` left : expression（document . body . offsetWidth-一百十一 + " px "）; `。為著欲佮 CSS標準看予齊，並且該函式效能差，軟軟對 IE 八開始停止支援此函式。


: CSS 三中具有 ` calc ( ) ` 表達式以執行計算功能。

* 欠缺唯一性


: 仝款的效果會當用無仝款的屬性來完成， 這對袂少的 CSS 編寫人員造成困擾。比如講 ` position `、` display ` 佮 ` float ` 定義無仝款的組態方式，而且袂當有效的交替使用。一个 ` display : table-cell` 元素袂當指定 ` float ` 抑是講 ` position : relative `，因為指定 ` float : left ` 伊的元素無應該受著 ` display ` 效果的影響。再者，無考慮著新的建立屬性所造成的影響，譬如講佇格中你應該使用 ` border-spacing ` 毋是 ` margin-* ` 來指定格仔元素。這是因為依照 CSS 準則，格仔內底的元素是無邊界（margin）的。

==CSS的效能最佳化==

===使用語法縮寫===

使用 CSS 縮寫會當減少 CSS 檔案的大細，並使其實閣較𠢕讀。比如講：色水縮寫（縮寫十六進位的色彩值）、 盒仔 sài-sù 縮寫、那驅縮寫、背景縮寫和文字縮寫。==無障礙設計==

* 優先採用使用者照式表示指定的重要規則是一項為色弱抑是青盲的提供便利的設計考慮。

==參見==

* Acid 一
* Acid 二
* Acid 三
* 無表格網頁設計
* IE 盒仔模型缺陷
* 瀏覽器 ia̋n-jín CSS 支援較

==參考資料==

===文內參照===

===補充來源===

* 莫振傑 . HTML ua-sá-bih CSS 鋪排教程一 . 中國北京乎：人民郵電出版社 .二空一六年 . ISBN  九百七十八追七孵一百一十五五孵四配三千兩百九十五孵七（中文（中國大陸）） .

==外部連結==

* 官方網站
* W 三 C 的 CSS 學校抹衫 . [二千空五孵九九二二] .（原始內容存檔佇二千空一十一孵二孵十四）（英語）.
* CSS 四相容性測試 .（原始內容存檔佇二空一二年十二月十九）（英語）.

[[分類: 待校正]]