檢視 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 檔案內部包含檔案顯示个資訊，比論講字型个色、背景應該係仰仔、仰般排列、邊緣、連線等都定著愛一在 HTML 檔案內部列出，有時重複列出來。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 檔案內部。讀者做得使用當多樣式表，在重複个情況下佢做得選擇其中之一。無共樣个媒介做得用無共樣个樣式表。比論講一個檔案在螢光屏上个顯示做得同在印表機當中列印出來个顯示無共樣。恁樣形个做得分無共樣个媒體設計最好个顯示方式。另外 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 檔案內部（內部樣式表）
* 作者做得在一個 HTML 指令內結合仔 CSS 指令（行內樣式）， 優先級最高。一般恁仔做係為著在特殊情況下，同頂項來源个 CSS 抵消忒
* 客戶端自訂樣式（client-side style sheet）
* 瀏覽網頁个使用者做得自家在本地電腦上自家寫一隻 CSS 檔案，過仔就做得在看器內通過設定好特定个選項，來載入自家个 CSS 檔案。這個 CSS 檔案可以以用在所有个 HTML 檔案頂高。網頁作者無設定某項規則，毋過存在對應个使用者自定規則个時節，使用者个規則就會有作用。假使作者个 CSS 檔案還有讀者个相衝突，瀏覽器會採用作者个規則。像係故所效果讀者有特殊要求，做得通過在自定規則末尾添加 ` ! important ` 提升自訂規則个顯示優先權。( 網頁作者也做得使用 ` ! important ` 分規則提升權限，毋過優先級別比毋過由使用者寫个 ` ! important ` 聲明，` ! important ` 針對網頁作者个意義淨係網頁開發階段个規則衝突測試 )
* 瀏覽器樣式
* 假使講外部無特別指定一隻樣式个話，一般瀏覽器自家有一隻內在个樣式。因為無共樣瀏覽器个預設樣式並無共樣，所以講究美觀个網頁个設計者一般好去跌這個預設个樣式。

第二還需要知得規則特殊性 ( specificity )个概念。某一個規則个特殊性也輒常分人喊做該規則具體程度。規則特殊性个高低次序像下（依次遞減）：

一 . 行內樣式二 . ID 選擇器三 . class 選擇器有四 . 標籤選擇器五 .通用選擇器（也就係萬用字元選擇器，用吔少）

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

特殊性優先原則係盡重要个優先級比較規則。當引起衝突个兩種規則个特殊性存在差異時（比將講一個係通過ID 選擇器指定樣式，另外一個係通過 class 選擇器指定樣式）， 引擎摎優先採用特殊性更加高个樣式。規則个特殊性个比較係盡優先个。假使做得直接判斷出特殊性个差異，就無需要考慮其他規則了。====無共樣來源个規則優先性====

無共樣來源个規則之間个優先原則係第二重要个。當規則來源相同个時節（共樣係外部樣式抑係共樣个內部樣式）， 下一步就需要較無共樣類型來源个優先級別。總地來講，記得「行內个樣式優先在內部个樣式，內部樣式又優先在外部樣式」斯做得應對多數輒常看著个情形。像網頁瀏覽者自家訂樣式表个優先級別仰般，斯有瀏覽器个設計者正需要考慮，同網頁設計者个關係毋大。假使考慮有可能出現个過較複雜个來源衝突，內容都較多仔嗬。寫樣式个時節，應該儘可能避免這兜複雜个情形。具體來講，一般情形下个採納樣式效果个優先級順序為：

一 . 行內樣式二 .內部樣式三 . 在 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 最早支援以相對尺寸值來表示字型大細。函數式風格个 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 三步八步九百五十二 d）。

部分算係性（比將講旋轉類屬性（像係：transform）， 動畫類係性，立體類屬性）， 因為這下無共樣看機器支援个程度無共樣，需要加上無共樣个瀏覽器前面來區分。

====CSS 四====

W 三 C 在二千空一十一年九月二十九開始咧設計 CSS 四。一直到這下淨有少數个功能分部分網頁看著器支援，係講用在 HTML 毋係 SVG 上个 pointer-events。

CSS 四增加了一有兜還較方便个選擇器，還過簡化咧一兜這下有選擇器个用法。

===摘个困難===

瀏覽器核心主要負責解析網頁內容樣式摎進行指令碼處理（這下分別由瀏覽器內部个頁面彩現引擎同 JavaScript 引擎分工）。 其中頁面彩現就係正確个辨識出 CSS 代碼還在窗口當中顯示出對應个內容樣式。開發一隻做得个支援 CSS 語法解析个瀏覽器毋係恁簡單个事情，CSS 規則非常个複雜，尤其係需要考慮無共樣个 CSS 規則之間會有相互影響个問題。自從 Mozilla 基金會將 Gecko 排版引擎單獨發布了後，這下有盡多瀏覽器廠商採用對第三方發布个頁面彩現引擎，獨立開發新頁面彩現引擎个機構當少。

首先係標準實現程度个問題。做你 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 ; `）。 計算功能在恁多情況之下都係當有用个，比將講：總欄位有算欄位个尺寸限制。無論仰仔，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 檔案个大細，分佢還較方便讀。比將講：色目縮寫（縮寫著十六進位个色彩值）、 盒尺寸縮寫、邊框縮寫、背景縮寫摎文字縮寫。==無障礙設計==

* 優先採用著使用者樣式表中指定个重要規則係一項為色弱抑係色盲人士提供著便利个設計考慮。

==參見==

* Acid 一
* Acid 二
* Acid 三
* 無表格網頁設計
* IE 盒模型毋罅
* 瀏覽器引擎 CSS 支援較

==參考資料==

===文內參照===

===補充來源===

* 莫振傑 . HTML 与 CSS 重點放心教程一 . 中國北京：人民郵電出版社 . 二零一六年 . ISBN  九百七十八八七十五八九八六一百一十五十二間三千二百九十五枋（中文（中國）） .

==外部連結==

* 官方網站
* W 三 C 个 CSS 學校服侍 . [二千空五千九百二十二] .（頭擺个內容存檔係在兩千空一十一千空二千空二十四）（英語）.
* CSS 四相容性測試 .（原始內容存檔在二零一二年十二月十九）（ 英語）.

[[分類: 待校正]]