<p><b>階層式樣式表</b>（英語：<span lang="en"><b>C</b>ascading <b>S</b>tyle <b>S</b>heets</span>，縮寫：<span lang="en"><b>CSS</b></span>；又稱<b>串樣式列表</b>、<b>級聯樣式表</b>、<b>串接樣式表</b>、<b>階層式樣式表</b>）是一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發中。
</p><p>CSS不僅可以靜態地修飾網頁，還可以配合各種手稿語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。
</p>


<h2><span id=".E6.A6.82.E8.BF.B0"></span><span id="概述">概述</span></h2>

<p>CSS不能單獨使用，必須與HTML或XML一起協同工作，為HTML或XML起裝飾作用。本文主要介紹用於裝飾HTML網頁的CSS技術。其中HTML負責確定網頁中有哪些內容，CSS確定以何種外觀(大小、粗細、顏色、對齊和位置)展現這些元素。CSS可以用於設定頁面布局、設定頁面元素樣式、設定適用於所有網頁的全域樣式。CSS可以零散地直接添加在要應用樣式的網頁元素上，也可以集中化內建於網頁、連結式引入網頁以及匯入式引入網頁。</p><p>CSS最重要的目標是將檔案的內容與它的顯示分隔開來。在CSS出現前，幾乎所有的HTML檔案內都包含檔案顯示的資訊，比如字型的顏色、背景應該是怎樣的、如何排列、邊緣、連線等等都必須一一在HTML檔案內列出，有時重複列出。CSS使作者可以將這些資訊中的大部分隔離出來，簡化HTML檔案，這些資訊被放在一個輔助的，用CSS語言寫的檔案中。HTML檔案中只包含結構和內容的資訊，CSS檔案中只包含樣式的資訊。
</p><p>比如HTML中<code>H2</code>標誌這一個二級標題，它在級別上比一級標題<code>H1</code>低，比三級標題<code>H3</code>高。這些資訊都是結構上的資訊。
</p><p>一般來說級別越高的標題其字型也越大，<code>H1</code>的字型最大，因為一般來說字型越大它表示的內容就越重要，此外一般標題都使用粗體字，來突出它們的重要性。一般來說<code>H2</code>使用粗體字，其字型比<code>H3</code>大，比<code>H1</code>小。這些資訊是顯示用的資訊。
</p><p>在CSS出現前，假如作者要確定<code>H2</code>標題的顏色、字形、大小或其他顯示特徵的話，他要使用HTML中的<code>font</code>或其他樣式指令，光<code>H2</code>不夠，因為<code>H2</code>只是一個結構指令。假如一個標題要用斜體字、紅色的字元、白色的底色的話，作者要這樣寫：
</p>
<dl><dd><code>&lt;H2&gt;&lt;font color="red" bgcolor="white"&gt;&lt;i&gt;使用CSS&lt;/i&gt;&lt;/font&gt;&lt;/H2&gt;</code></dd></dl><p>這些顯示用的指令使得一個HTML變得非常複雜，要維護也比較困難。假如所有的二級標題都要這樣來顯示的話，所有的二級標題的指令都要這麼複雜。此外讀者無法改變這些規定，假如一個讀者更喜歡藍色的標題的話，他無法改變標題的顏色，因為檔案的作者特別規定了標題的顏色。
</p><p>使用CSS的話<code>H2</code>指令只規定文章的結構，其顯示由樣式表來規定，上面的例子可以變成這樣：
</p>
<dl><dd><code>&lt;H2&gt;使用CSS&lt;/H2&gt;</code></dd></dl><p>服從的樣式表可以規定<code>H2</code>指令使用斜體字，紅色字和白色背景：
</p>
<dl><dd><code>H2 { color: red; background: white; font-style: italic; }</code></dd></dl><p>這樣顯示與內容就分開了（由於CSS的優點，W3C現在正在考慮將HTML中的許多顯示用的指令廢棄掉）。HTML只表達文章的結構，CSS表達所有的顯示。CSS可以指示顏色、字形、排列、大小以及其他許多非視覺的表達方式，比如將一篇檔案的內容讀出來。
</p><p>CSS樣式資訊可以包含在一個附件中或包含在HTML檔案內。讀者可以使用多個樣式表，在重複的情況下他可以選擇其中之一。不同的媒介可以使用不同的樣式表。比如一個檔案在螢光屏上的顯示可以與在印表機中列印出來的顯示不同。這樣作者可以為不同的媒體設計最佳的顯示方式。此外CSS的目標之一是讓讀者有更大的控制顯示的自由。假如一個讀者覺得斜體字的標題讀起來很困難，他可以使用自己的樣式表檔案，這個樣式表可以「層疊」使用，他可以只改變紅色斜體字這個樣式而保留所有其他的樣式。
</p>
<h3><span id=".E5.8C.85.E5.90.ABCSS.E7.9A.84XHTML.E6.96.87.E4.BB.B6.E7.A4.BA.E4.BE.8B"></span><span id="包含CSS的XHTML文件示例">包含CSS的XHTML檔案範例</span></h3>

<h2><span id=".E4.B8.BB.E8.A6.81.E5.86.85.E5.AE.B9"></span><span id="主要内容">主要內容</span></h2>
<p>CSS由多組「規則」組成。每個規則由「選擇器」（selector）、「屬性」（property）和「值」（value）組成：
</p>
<ul><li>選擇器（Selector）：多個選擇器可以半形逗號（,）隔開。</li>
<li>屬性（property）：CSS1、CSS2、CSS3規定了許多的屬性，目的在控制選擇器的樣式。</li>
<li>值（value）：指屬性接受的設定值，多個關鍵字時大都以空格隔開。</li></ul><p>屬性和值之間用半形冒號（:）隔開，屬性和值合稱為「特性」。多個特性間用「;」隔開，最後用「{ }」括起來。
</p>
<h3><span id=".E9.81.B8.E6.93.87.E5.99.A8"></span><span id="選擇器">選擇器</span></h3>
<p>要針對沒有標籤定義範圍進行樣式設定時，可利用<code>&lt;div&gt;</code>與<code>&lt;span&gt;</code>標籤
</p><p>CSS裡現在共有5種基本選擇器（Basic Selectors）和2種偽選擇器。不同選擇器的優先級別和運作效能往往存在差異。</p>
<h4><span id=".E5.9F.BA.E6.9C.AC.E9.81.B8.E6.93.87.E5.99.A8"></span><span id="基本選擇器">基本選擇器</span></h4>
<ul><li>標籤選擇器（h1，p等）——<code>elementname</code></li>
<li>類別選擇器（class）——<code>.elementname</code></li>
<li>ID選擇器（ID）——<code>#elementname</code></li>
<li>萬用選擇器——<code>* ns|* *|*</code></li>
<li>屬性選擇器（也翻譯為「萬用字元選擇器」）——<code>[attribute]</code></li></ul><h4><span id=".E5.B1.9E.E6.80.A7.E9.80.89.E6.8B.A9.E5.99.A8"></span><span id="属性选择器">屬性選擇器</span></h4>
<p>屬性選擇器允許使用者自訂屬性名稱，而不僅僅限於id，class屬性。屬性選擇器共有7種。
</p>
<h4><span id=".E7.B5.84.E5.90.88.E9.80.89.E6.8B.A9.E5.99.A8"></span><span id="組合选择器">組合選擇器</span></h4>
<p>CSS里現在共有4種組合選擇符（Combinators）：</p>
<h4><span id=".E9.80.89.E6.8B.A9.E5.99.A8.E4.BD.BF.E7.94.A8.E7.A4.BA.E4.BE.8B"></span><span id="选择器使用示例">選擇器使用範例</span></h4>
<p>例子：
</p>

<p>在這個例子中有三個選擇器：<code>p</code>、<code>h2</code>和<code>.highlight</code>，<code>color: red</code>是一個定義，其中<code>color</code>是屬性，<code>red</code>是<code>color</code>的值。
</p><p>在這裏HTML中的結構<code>P</code>（段落）和<code>H2</code>（2級標題）獲得了不同的樣式。每個段落的字體的大小比包含這個段落的結構的字體的大小要大10%，其字形是<code>Garamond</code>，假如<code>Garamond</code>沒有的話那麼使用一般的<code>sans-serif</code>字形。2級標題的字用紅色，底面是白色的。這個例子中的第三個規則規定了一個<code>class</code>的樣式。通過<code>class</code>屬性每個HTML結構都可以被指定為這個<code>class</code>，例如：
</p>
<pre>&lt;P class="highlight"&gt;這個段落將被顯示為黃底紅字粗體。&lt;/P&gt;</pre><p>
顯示為</p><p style="clear:both; color:red; background: yellow; font-weight:bold;">這個段落將被顯示為黃底紅字粗體。</p>
<p>除使用<code>&lt;style&gt;</code>之外，也可於HTML內直接使用<code>style="/*CSS在這裡*/"</code>︰
</p>

<h4><span id=".E5.85.B6.E5.AE.83.E9.80.89.E6.8B.A9.E5.99.A8"></span><span id="其它选择器">其它選擇器</span></h4>
<p>CSS中還提供了偽元素選擇器和虛擬類別選擇器，但用途單一一些，常與其它選擇器組合在一起使用。偽元素的元素主要用於選取與另一個選擇器選中物件臨近的元素。虛擬類別選擇器用於選中處於特定狀態或具有特定性質的元素。
</p>
<h3><span id=".E5.BC.95.E5.85.A5CSS.E8.A7.84.E5.88.99.E7.9A.84.E5.A4.9A.E7.A7.8D.E6.96.B9.E5.BC.8F.E5.8F.8A.E5.85.B6.E5.B1.82.E5.8F.A0.E6.80.A7"></span><span id="引入CSS规则的多种方式及其层叠性">引入CSS規則的多種方式及其層疊性</span></h3>
<p>CSS可以有多種引入方式，一個網頁可以引入多個CSS檔案，同一種CSS規則可以被反覆多次添加。這使得CSS的使用方式非常靈活，但也會頻繁地出現規則衝突。同時對一個網頁元素設定無法並存的2種樣式時，就會引起衝突。CSS的特色之一就是其解決規則衝突的方案。CSS的規則衝突可以分為不同來源之間的規則衝突和同一來源內部的規則衝突。CSS分層次、立體化的比較不同規則的優先級的方式，就是所謂層疊性(cascading)的體現。
</p><p>首先說來源的多樣性，CSS資訊可以來自：
</p>
<ul><li>作者樣式
<ul><li>作者可以在他的HTML檔案中確定一個外來的、獨立的CSS檔案（外部樣式表），其優先級最低</li>
<li>作者可以將CSS資訊包含在HTML檔案內（內部樣式表）</li>
<li>作者可以在一個HTML指令內結合CSS指令（行內樣式），其優先級最高。一般這樣做是為了在特殊情況下，把上面來源的CSS抵消掉</li></ul></li></ul><ul><li>客戶端自訂樣式（client-side style sheet）
<ul><li>瀏覽網頁的使用者可以自己在本地電腦上自己寫1個CSS檔案，然後就可以在瀏覽器內通過設定好特定選項，來載入自己的CSS檔案。這個CSS檔案可以用在所有的HTML檔案上。當網頁作者沒有設定某項規則，但存在對應的使用者自訂規則時，使用者的規則就會起作用。假如作者的CSS檔案與讀者的相衝突，瀏覽器會採用作者的規則。如果讀者有特殊要求，可以通過在自訂規則末尾添加<code>!important</code>提升自訂規則的顯示優先權。(網頁作者也可以使用<code>!important</code>給規則提升權限，但是優先級別比不過由使用者寫的<code>!important</code>聲明，<code>!important</code>對於網頁作者的意義僅在於網頁開發階段的規則衝突測試)</li></ul></li></ul><ul><li>瀏覽器樣式
<ul><li>假如外部沒有特別指定一個樣式的話，一般瀏覽器自己有一個內在的樣式。由於不同瀏覽器的預設樣式並不一致，所以講究美觀的網頁的設計者一般喜歡去掉這個預設的樣式。</li></ul></li></ul><p>其次還需知道規則特殊性(specificity)的概念。某個規則的特殊性也常被稱為該規則的具體程度。規則特殊性的高低次序如下（依次遞減）：
</p>
<ol><li>行內樣式</li>
<li>ID選擇器</li>
<li>class選擇器</li>
<li>標籤選擇器</li>
<li>通用選擇器（也就是萬用字元選擇器，用得少）</li></ol><h4><span id=".E7.89.B9.E6.AE.8A.E6.80.A7.E4.BC.98.E5.85.88.E5.8E.9F.E5.88.99"></span><span id="特殊性优先原则">特殊性優先原則</span></h4>
<p>特殊性優先原則是最重要的優先級比較規則。當引起衝突的2種規則的特殊性存在差異時（例如一個是通過ID選擇器指定樣式，另一個是通過class選擇器指定樣式），引擎將優先採用特殊性更高的樣式。規則的特殊性的比較是最優先的。如果能直接判斷出特殊性的差異，就無需考慮其它規則了。
</p>
<h4><span id=".E4.B8.8D.E5.90.8C.E6.9D.A5.E6.BA.90.E7.9A.84.E8.A7.84.E5.88.99.E4.BC.98.E5.85.88.E6.80.A7"></span><span id="不同来源的规则优先性">不同來源的規則優先性</span></h4>
<p>不同來源的規則之間的優先原則是第二重要的。當規則來源相同時（同為外部樣式或同為內部樣式），下一步就需要比較不同類型來源的優先級別。總地來說，記住「行內樣式優先於內部樣式，內部樣式又優先於外部樣式」即可應對多數常見的情形。像網頁瀏覽者自訂樣式表的優先級別如何，只有瀏覽器的設計者才需要考慮，與網頁設計者的關係不大。
</p><p>如果考慮有可能出現的更複雜的來源衝突，內容就比較多了。但一般在寫樣式時，應儘可能避免這些複雜情形的出現。具體來說，一般情形下的採納樣式效果的優先級順序為：</p>
<ol><li>行內樣式</li>
<li>內部樣式</li>
<li>在HTML中通過<code>&lt;link&gt;</code>標籤直接引入的外部樣式表</li>
<li>在CSS中通過<code>@import</code>語句間接引入的外部樣式表</li>
<li>瀏覽網頁的使用者自己定義的樣式表（需要手動載入）</li>
<li>瀏覽器預設的樣式（如標題有預設大小、段落之間有預設間距等，不同瀏覽器的預設樣式不完全一樣）</li></ol><p>CSS中還有用<code>!important</code>修飾的重要性聲明。如果計入重要性聲明，那麼在以上規則的最前面還需要加上2條規則：
</p>
<ol><li>使用者從本地載入的重要自訂樣式</li>
<li>網頁設計者設定的重要樣式</li></ol><p>設計重要性聲明是為部分特殊使用者和所有開發者提供方便。一方面，使用者可以通過設定自己的色彩方案，並對其使用重要性聲明來提升瀏覽體驗。另一方面，網頁的設計者難免會遇到因規則衝突而導致特定樣式規則失效的情形，設計者可以通過給不知何故不起作用的規則增加重要性聲明，看看是否有樣式變化來確定是否是不小心導致了規則衝突而引起特定規則被覆蓋失效。
</p>
<h4><span id=".E6.9D.83.E9.87.8D.E5.88.86.E6.95.B0.E6.AF.94.E8.BE.83.E6.9C.BA.E5.88.B6"></span><span id="权重分数比较机制">權重分數比較機制</span></h4>
<p>有時還會遇到選擇器優先級無法直接判斷，而且規則的來源也相同的情形。如果網頁設計者很少使用層次比較複雜的選擇器（比如多級的後代選擇器），那麼必須比較權重的情況一般不會遇到（一般要麼是可以直接根據前面的規則判斷出優先性結果，或者是起衝突的2條規則的權重完全一樣，只能繼續去看後一條比較出現次序的機制）。此時，CSS還有一套分數加權(或者說是分數累積)的機制用於解決此類規則衝突。先列出基本的分值：
</p>
<ul><li>1個行內樣式占1000分</li>
<li>1個id選擇器占100分</li>
<li>1個class選擇器占10分</li>
<li>1個標籤選擇器占1分</li></ul><p>組合使用多個基本選擇器時，不同選擇器的得分會累加到一起。最終得分高的選擇器，其指定的樣式會勝出。
</p><p>舉例：<br><code>.type1 #id3{color: green; font-size: 20px;}</code><br><code>div p #id3{color: blue; background-color: grey;}</code><br>
假設這2行代碼都能夠選中同一個ID為「id3」的元素，且都是出自同一來源的樣式表。可以看到，二者使用的優先級最高的選擇器都是ID選擇器，起衝突的樣式設定是字型顏色。一個給此元素設定字型顏色為綠色，另一個給此元素設定字型顏色為藍色。按照評分規則，因為前一種代碼使用了1個類選擇器和1個id選擇器，所以得分為10+100=110分；後一種代碼使用了2個標籤選擇器和1個id選擇器，所以得分為1+1+100=102分。因為110分&gt;102分，所以前一種規則勝出，目標元素的最終文字顏色應該是綠色。
</p>
<h4><span id=".E9.9D.A0.E5.90.8E.E8.80.85.E4.BC.98.E5.85.88.E5.8E.9F.E5.88.99"></span><span id="靠后者优先原则">靠後者優先原則</span></h4>
<p>當權重比較仍然不能分出優先級勝負時，最後就是把守關底的「靠後優先」的原則了，也就是後定義的樣式優先級較高。如果起衝突的規則來源相同，而且得分也相同，那麼最後的衝突解決法則就是看CSS代碼出現的先後順序。後出現的規則會覆蓋掉與之優先級相當的先出現的規則。也可稱作「後發制人」、「後來者居上」或「後浪推前浪」原則，隨便你怎麼稱呼。這種原則的適用情形很常見，所以此規則也很重要。
</p>
<h3><span id=".E8.A1.8C.E7.BA.A7.E5.85.83.E7.B4.A0.E4.B8.8E.E5.9D.97.E7.BA.A7.E5.85.83.E7.B4.A0"></span><span id="行级元素与块级元素">行級元素與塊級元素</span></h3>
<h3><span id=".E6.96.B9.E7.9B.92.E6.A8.A1.E5.9E.8B"></span><span id="方盒模型">方盒模型</span></h3>
<h3><span id=".E6.B5.AE.E5.8A.A8.E4.B8.8E.E5.AE.9A.E4.BD.8D"></span><span id="浮动与定位">浮動與定位</span></h3>
<h4><span id=".E5.8C.85.E5.90.AB.E5.9D.97.E3.80.81.E5.AE.9A.E4.BD.8D"></span><span id="包含块、定位">包含塊、定位</span></h4>
<p>包含塊是CSS定位屬性所依託的理論模型。
</p>
<h4><span id=".E5.B1.82.E6.AC.A1.E4.B8.8E.E5.B1.82.E5.8F.A0.E4.B8.8A.E4.B8.8B.E6.96.87"></span><span id="层次与层叠上下文">層次與層疊上下文</span></h4>
<p>層疊上下文規則決定了當有網頁元素位置發生部分重合時，重合部分的上下疊放次序。層疊上下文規則詳細規定了當浮動、定位以及z軸數值同時出現時，元素疊放次序的總規則。
</p>
<h4><span id=".E6.A0.BC.E5.BC.8F.E5.8C.96.E4.B8.8A.E4.B8.8B.E6.96.87"></span><span id="格式化上下文">格式化上下文</span></h4>
<p>格式化上下文有特殊的布局性質，巧妙建立格式化上下文可以解決方便地達到幾種特殊目的：</p>
<ul><li>避免垂直方向不同元素的相鄰外邊距自動合併</li>
<li>清除因為為子元素設定了浮動而可能造成的父元素高度塌陷</li>
<li>實現一列寬度固定、一列寬度不固定的雙列寬度自適應布局</li></ul><h3><span id=".E5.85.B6.E5.AE.83"></span><span id="其它">其它</span></h3>
<p>CSS檔內也可以包含注釋，注釋放在<code>/*</code>和<code>*/</code>之間。一般的瀏覽器也辨識以雙斜槓(<code>//</code>)開頭的這種注釋，但是這是不規範的做法。
</p>
<h2><span id=".E5.8E.86.E5.8F.B2"></span><span id="历史">歷史</span></h2>
<h3><span id=".E5.8F.91.E5.B1.95.E5.8E.86.E5.8F.B2"></span><span id="发展历史">發展歷史</span></h3>

<h4><span id=".E6.97.A9.E6.9C.9F.E6.A0.B7.E5.BC.8F.E8.A1.A8.E7.9A.84.E5.8E.86.E5.8F.B2"></span><span id="早期样式表的历史">早期樣式表的歷史</span></h4>
<p>HTML規範雖然規定了網頁中的標題、段落應該使用的標籤，但是沒有涉及這些內容應該以何種樣式(比如大小、位置、間距、縮排等屬性)呈現在瀏覽器中。從1990年代初HTML被發明開始，樣式表就以各種形式出現了。不同的瀏覽器結合了它們各自的樣式語言，讀者(也就是瀏覽網頁的使用者)可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網頁應該怎樣被顯示。
</p><p>1993年，Robert Raisch提出了一種名為「RRP」的樣式規則建議。但這個RRP只允許網頁使用1個樣式表，不像現在的CSS能支援同時載入多個。不久後出現的Mosaic瀏覽器就採用增加新種類的HTML標籤實現樣式的表達，以滿足設計師的要求，這也與現在的CSS設計原則不符。隨著HTML內建的樣式功能的增加，外來定義樣式的語言逐漸減弱了。1993年發布的這個Mosaic瀏覽器是第一款使用者介面，並支援書籤、圖示按鈕和圖片顯示。之前的瀏覽器都是純文字瀏覽器。即使在今天，只使用作業系統命令列內建的Telnet命令，也可以檢視網頁的原始碼。</p><p>後來，台灣人魏培源開發的ViolaWWW瀏覽器使用了一種規則具有層次巢狀性的樣式表，並第1個支援通過<code>&lt;link&gt;</code>標籤參照外部樣式表。FOSI最早支援以相對尺寸值來表示字型大小。函數式風格的DSSSL語言支援在樣式表中進行定義變數、繼承變數、定義函式等功能，但是語法複雜。1994年，全球資訊網之父提姆·柏內茲-李在歐美眾多高能物理研究者和技術人員的支援下，於美國麻省理工學院創立了全球資訊網協會（W3C），其職責是提供網路標準化建議。1994年，Håkon W Lie提出層疊HTML樣式表（Cascading HTML Style Sheets，CHSS）。CHSS既支援使用者自訂樣式表，也支援網頁作者樣式表，而且可以滿足不同規則以百分比的方式組合使用。它的權重規則計算方式不夠直觀，當不同規則混合時會得到什麼實際效果並不容易從代碼中看出。1996年，出現了與CSS語法很像的表現指明語言（Presentation Specification Language，簡稱"PSL 96"）。PSL 96除表達樣式外，也支援條件判斷等功能，還可根據對瀏覽器資訊的判斷來使用不同的樣式，但未獲得青睞。
</p>
<h4><span id="CSS.E7.9A.84.E8.AF.9E.E7.94.9F.E4.B8.8E.E5.8F.91.E5.B1.95"></span><span id="CSS的诞生与发展">CSS的誕生與發展</span></h4>
<p>1994年，哈肯·維姆·萊提出了CSS的最初建議。伯特·波斯當時正在設計一個叫做<span data-orig-title="Argo (網頁瀏覽器)" data-lang-code="en" data-lang-name="英語" data-foreign-title="Argo (web browser)"><span>Argo</span></span>的瀏覽器，他們決定一起合作設計CSS。當時已經有過一些樣式表語言的建議了，但CSS是第一個含有「層疊」的主意的。在CSS中，一個檔案的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或「層疊」作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。哈肯·萊於1994年在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。當時W3C剛剛建立，W3C對CSS的發展很感興趣，它為此組織了一次討論會。哈肯、波斯和其他一些人（比如微軟的托馬斯·里爾登）是這個專案的主要技術負責人。1996年底，CSS已經完成。1996年<mark class="template-facttext" title="需要提供文獻來源">12月</mark>，哈肯·萊與伯特·波斯發布了CSS規範的第1個版本。這也成了哈肯·萊的博士論文的一部分。當時已有的主流瀏覽器的核心架構完全不適合解析CSS的語法，加上早年設計師濫用HTML標籤來表達樣式(這導致「標籤湯」(tagsoup)這一罵名的出現)、且漠不關心代碼校驗，所以CSS等到幾年之後才流行起來。1998年，瀏覽器市場份額被微軟公司的Internet Explorer 4和網景公司的Netscape Navigator 4兩大瀏覽器巨頭所占據。CSS出現後，微軟的IE瀏覽器走在了逐步實現CSS第1版標準的前列。但是因為不重視問題修補，導致遺留Bug很多，這也使得IE瀏覽器長期為人們詬病。網景則把重心放在了網頁尾本語言的開發上，但很快被微軟模仿。網景在90年代末和微軟展開的瀏覽器大戰中最終一敗塗地，走向破產邊緣，但網景也成功推出了日後廣泛流行於網頁設計中的JavaScript語言。瀏覽器大戰使得網頁設計人員深受其害，因為不同瀏覽器支援的語法規則不太一樣，網頁設計人員不得不為IE瀏覽器和網景瀏覽器的瀏覽器分別設計一套網頁。新成立的民間設計人員團體「網頁標準計劃」(WaSP)發動水軍將W3C的建議宣揚為標準，並批評還未加盟W3C標準的業界廠商。</p><p>1997年初，W3C組織了專門管CSS的工作群組，其負責人是克里斯·里雷。這個工作群組開始討論第1版中沒有涉及到的問題，其結果是1998年5月出版的第2版規則。網頁標準計劃的7位成員成立了「CSS武士團」（CSS Samurai），指出Opera瀏覽器和IE瀏覽器在支援CSS方面存在的諸多問題。Opera公司著手解決了問題，但微軟並未解決。網頁標準計劃也積極勸說網景公司和Macromedia公司分別改進其產品對CSS標準的支援。2003年，Dave Shea推出了一個名為「CSS禪意花園」("CSS Zen Garden")的站點，向人們展示出僅通過應用不同頁面樣式規則，就可以實現對網頁藝術風格的煥然一新。這個網站在網頁設計相關人群中產生了不小影響。</p><p>從2006年到2009年，「DIV+CSS」布局逐步取代缺乏靈活性的傳統表格布局，無表格網頁設計成為網頁內容布局的主流方案。此時也出現了一些為了跟風而濫用DIV布局的情況，比如將<code>&lt;h1&gt;</code>和<code>&lt;h2&gt;</code>等本身已有語意的標籤也改用<code>&lt;div&gt;</code>標籤替代。</p><p>CSS3引入的簡單動畫功能使得CSS也開始涉足以往只應由JavaScript負責的效果互動工作。到2017年為止，第3版規則還未完備。
</p>
<h3><span id=".E7.89.88.E6.9C.AC.E6.AD.B7.E5.8F.B2"></span><span id="版本歷史">版本歷史</span></h3>
<h4><span id="CSS1">CSS1</span></h4>
<p>於1994年，哈肯·維姆·萊和伯特·波斯合作設計CSS。他們在1994年首次在芝加哥的一次會議上第一次展示了CSS的建議。
</p><p>1996年12月發表的CSS1的要求有：</p>
<ul><li>支援字型的大小、字形、強調</li>
<li>支援字的顏色、背景的顏色和其他元素</li>
<li>支援文章特徵如字母、詞和行之間的距離</li>
<li>支援文字的排列、圖像、表格和其他元素</li>
<li>支援邊緣、圍框和其他關於排版的元素</li>
<li>支援id和class</li></ul><h4><span id="CSS2-2.1">CSS2-2.1</span></h4>
<p>1998年5月W3C發表了CSS2，其中包括新的內容如：
</p>
<ul><li>絕對的、相對的和固定的定位元素、媒體型的概念、</li>
<li>雙向檔案和</li>
<li>一個新的字型。</li></ul><p>CSS2.1修改了CSS2中的一些錯誤，刪除了其中基本不被支援的內容和增加了一些已有的瀏覽器的擴充內容。</p>
<h4><span id="CSS3">CSS3</span></h4>
<p>CSS3標準已部分公布，但仍未全部制訂完畢，還會有其它新內容繼續加入。W3C網站上有專頁展示CSS3發展的進展。
</p>

<p>CSS3分成了不同類別，稱為「modules」。而每一個「modules」都有於CSS2中額外增加的功能，以及向下相容。CSS3早於1999年已經開始制訂。直到2011年6月7日，CSS 3 Color Module終於發布為W3C Recommendation。</p><p>CSS3裡增加了不少功能，如：「border-radius」、「text-shadow」、「transform」以及「transition」。CSS3亦支援動畫（animation）及立體（preserved-3d）。
</p><p>部分屬性（例如旋轉類屬性（如：transform），動畫類屬性，立體類屬性），由於現時不同瀏覽器支援程度不同，需要加上不同的瀏覽器前綴來區分。
</p>
<h4><span id="CSS4">CSS4</span></h4>
<p>W3C於2011年9月29日開始了設計CSS4。直至現時只有極少數的功能被部分網頁瀏覽器支援，如使用在HTML而非SVG上的pointer-events。
</p><p>CSS4增加了一些更方便的選擇器，並簡化了一些現有選擇器的用法。
</p>
<h3><span id=".E6.8E.A1.E7.B4.8D.E7.9A.84.E5.9B.B0.E9.9B.A3"></span><span id="採納的困難">採納的困難</span></h3>
<p>瀏覽器核心主要負責解析網頁內容樣式以及進行指令碼處理（現在分別由瀏覽器內部的頁面彩現引擎和JavaScript引擎分工）。其中頁面彩現就是正確辨識出CSS代碼並在窗口中顯示出對應的內容樣式。開發一個可支援CSS語法解析的瀏覽器並非易事，CSS規則繁雜，尤其是需要考慮不同的CSS規則之間會存在相互影響的問題。自從Mozilla基金會將Gecko排版引擎單獨發布後，現在有眾多瀏覽器廠商採用由第三方發布的頁面彩現引擎，獨立開發新頁面彩現引擎的機構很少。
</p><p>首先是標準實現程度的問題。儘管CSS1標準在1996年就制訂完成了，但一直到3年後還沒有一個瀏覽器實現了其中的全部語法規則。上市的各個瀏覽器都只是實現了對一部分規則的支援。2000年3月，由微軟在麥金塔電腦平台上發布的5.0版Internet Explorer (IE)是第1個全部實現CSS1的瀏覽器。此後許多其他瀏覽器也實現了CSS1和CSS2的一部分。但到2004年為止還沒有一個瀏覽器實現了全部CSS2規則。尤其aural和paged等特性是被支援得最差的。
</p><p>其次，支援某種特性，不代表用起來就沒有問題。舊IE版本就以Bug多而聞名。其中聲名狼藉的IE 6存在元素堆疊Bug、幽靈字元，方塊神秘消失等稀奇古怪的設計缺陷。微軟自從在第1輪瀏覽器大戰中勝出後，就依仗獨霸市場的優勢，輕視修補IE Bug的呼聲，導致其市場份額後來又逐漸被其它瀏覽器蠶食，產生第2輪瀏覽器大戰。
</p><p>另外還有代碼跨瀏覽器相容性的問題。「能夠在任何瀏覽器中顯示」並不意味著「在任何一個瀏覽器中顯示的效果相同」。即使是徹底實現了CSS1的瀏覽器也遇到了許多困難。許多CSS的實現機制互相矛盾、有錯或有其它稀奇古怪的地方。為了使他們的頁面在任意系統上的任意瀏覽器中的顯示效果一致，網頁作者往往要被迫寫出繁瑣的代碼或使用各種奇技淫巧。一個最著名的錯誤涉及到顯示方形的寬度，在IE瀏覽器中方形的寬度的顯示有錯誤，其結果是方形的寬度在許多瀏覽器中被正確地顯示，但在IE上方形的寬度太窄。雖然這個錯誤有解決的辦法，但它限制了其他一些功能（IE 8.0已經改善方形寬度顯示問題）。舊版IE還有與其它瀏覽器計算方式不一樣的方盒模型。
</p>
<h2><span id=".E7.89.B9.E7.82.B9"></span><span id="特点">特點</span></h2>
<h3><span id=".E5.84.AA.E5.8B.A2"></span><span id="優勢">優勢</span></h3>
<p>網頁的讀者和作者都可以使用CSS來決定檔案的顏色、字型、排版等顯示特性。CSS最主要的目的是將檔案的內容與顯示分隔開來。這有許多好處：
</p>
<ul><li>檔案的可讀性加強</li>
<li>檔案的結構更加靈活</li>
<li>作者和讀者可以自己決定檔案的顯示</li>
<li>檔案的結構簡化了</li></ul><p>另外，在HTML中：
</p>
<ul><li>一個整個網站或其中一部分網頁的顯示資訊被集中在一個地方，要改變它們很方便</li>
<li>不同的讀者可以有不同的樣式，比如有的讀者需要字型比較大</li>
<li>HTML檔案本身的範圍變小了，它的結構簡單了，它不需要包含顯示的資訊</li></ul><p>CSS還可以控制其他參數，例如聲音（假如瀏覽器有閱讀功能的話）或給視障者用的感受裝置。
</p>
<h3><span id=".E7.BC.BA.E7.82.B9"></span><span id="缺点">缺點</span></h3>
<p>CSS明顯的缺點包括：
</p>
<ul><li>瀏覽器不同的支援
<dl><dd>瀏覽器對CSS的支援沒有統一，造成不同的瀏覽器顯示效果不同。例如在微軟Internet Explorer的舊版本6.0，有許多獨有的CSS 2.0屬性，但錯誤顯示很多重要的屬性，例如：<code>width</code>，<code>height</code>，和<code>float</code>。許多CSS編寫人員為了儘可能在常用的各個瀏覽器中達到一致的版面編排，要寫很多針對各個瀏覽器的不同的CSS代碼。當版面編排很複雜時，要在各個瀏覽器裏取得相同效果是不可能的。</dd></dl></li></ul><ul><li>CSS沒有父選擇器
<dl><dd>CSS選擇器無法提供元素的繼承性。先進的選擇器（例如XPath）有助於複雜的樣式設計。然而，瀏覽器的效能和增加彩現的問題，關係著父層選擇器，卻是CSS的工作群組拒絕建議的主要原因。<br>而CSS4則計劃包括類似功能。</dd></dl></li></ul><ul><li>不能明確地指定繼承性
<dl><dd>樣式的繼承性，建立在瀏覽器中DOM元素的層級和具體的規則上，參照CSS2說明中的章節6.4.1。</dd></dl></li></ul><ul><li>垂直控制的局限
<dl><dd>元素的水平放置普遍地易於控制，垂直控制則不然。簡單來說，垂直地圍繞一個元素、頁尾的放置不能高於可見視窗（viewport，視窗或螢幕的可見範圍）的底部範圍。這需要複雜的樣式規則，或是規則簡單，但不被廣泛支援。</dd></dl></li></ul><ul><li>沒有算術功能
<dl><dd>直至CSS 2.1的CSS沒有辦法明確簡單地進行計算（例如：<code>margin-left: 10% - 3em + 4px;</code>）。計算功能在很多情況下都是非常有用的，例如：總欄位中計算欄位的尺寸限制。無論如何，CSS WG發表了CSS局限性的草案。IE 5至IE 7提供<code>expression()</code>函式（即所謂的<b>CSS表達式</b>）來執行計算功能，例如<code>left: expression（document.body.offsetWidth - 110 + "px"）; </code>。為了與CSS標準看齊，並且該函式效能差，微軟從IE 8開始停止支援此函式。</dd>
<dd>CSS 3中具有<code>calc()</code>表達式以執行計算功能。</dd></dl></li></ul>
<ul><li>缺乏唯一性
<dl><dd>同樣的效果可以用不同的屬性來完成，這對不少的CSS編寫人員造成困擾。例如<code>position</code>、<code>display</code>與<code>float</code>定義了不同的組態方式，而且不能有效的交替使用。一個<code>display: table-cell</code>元素不能指定<code>float</code>或是<code>position: relative</code>，因為指定<code>float: left</code>的元素不應該受到<code>display</code>效果的影響。再者，沒有考慮到新建立屬性所造成的影響，例如在表格中你應該使用<code>border-spacing</code>而不是<code>margin-*</code>來指定表格元素。這是因為依照CSS準則，表格內部元素是沒有邊界（margin）的。</dd></dl></li></ul><h2><span id="CSS.E7.9A.84.E6.80.A7.E8.83.BD.E4.BC.98.E5.8C.96"></span><span id="CSS的性能优化">CSS的效能最佳化</span></h2>
<h3><span id=".E4.BD.BF.E7.94.A8.E8.AF.AD.E6.B3.95.E7.BC.A9.E5.86.99"></span><span id="使用语法缩写">使用語法縮寫</span></h3>
<p>使用CSS縮寫可以減少CSS檔案的大小，並使其更為易讀。例如：顏色縮寫（縮寫16進位的色彩值）、盒尺寸縮寫、邊框縮寫、背景縮寫和文字縮寫。
</p>
<h2><span id=".E6.97.A0.E9.9A.9C.E7.A2.8D.E8.AE.BE.E8.AE.A1"></span><span id="无障碍设计">無障礙設計</span></h2>
<ul><li>優先採用使用者樣式表中指定的重要規則是一項為色弱或色盲人士提供便利的設計考慮。</li></ul><h2><span id=".E5.8F.83.E8.A6.8B"></span><span id="參見">參見</span></h2>
<ul><li>Acid1</li>
<li>Acid2</li>
<li>Acid3</li>
<li>無表格網頁設計</li>
<li>IE盒模型缺陷</li>
<li>瀏覽器引擎CSS支援比較</li></ul><h2><span id=".E5.8F.82.E8.80.83.E8.B5.84.E6.96.99"></span><span id="参考资料">參考資料</span></h2>
<h3><span id=".E6.96.87.E5.86.85.E5.BC.95.E7.94.A8"></span><span id="文内引用">文內參照</span></h3>

<h3><span id=".E8.A1.A5.E5.85.85.E6.9D.A5.E6.BA.90"></span><span id="补充来源">補充來源</span></h3>
<ul><li><cite id="CITEREF莫振杰2016" class="citation book">莫振傑. HTML与CSS进阶教程 1. 中國北京: 人民郵電出版社. 2016年. <span title="國際標準書號">ISBN</span> 978-7-115-43295-7 <span title="連接到中文（中國大陸）網頁">（中文（中國大陸））</span>.</cite><span title="ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzh.wikipedia.org%3ACSS&amp;rft.au=%E8%8E%AB%E6%8C%AF%E6%9D%B0&amp;rft.btitle=HTML%E4%B8%8ECSS%E8%BF%9B%E9%98%B6%E6%95%99%E7%A8%8B&amp;rft.date=2016&amp;rft.edition=1&amp;rft.genre=book&amp;rft.isbn=978-7-115-43295-7&amp;rft.place=%E4%B8%AD%E5%9B%BD%E5%8C%97%E4%BA%AC&amp;rft.pub=%E4%BA%BA%E6%B0%91%E9%82%AE%E7%94%B5%E5%87%BA%E7%89%88%E7%A4%BE&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook"><span> </span></span></li></ul><h2><span id=".E5.A4.96.E9.83.A8.E9.93.BE.E6.8E.A5"></span><span id="外部链接">外部連結</span></h2>
<ul><li><span><span>官方網站</span></span></li>
<li><cite class="citation web">W3C的CSS校验服务.  <span> [<span>2005-09-02</span>]</span>. （原始內容存檔於2011-02-14） <span title="連接到英語網頁">（英語）</span>.</cite><span title="ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzh.wikipedia.org%3ACSS&amp;rft.btitle=W3C%E7%9A%84CSS%E6%A0%A1%E9%AA%8C%E6%9C%8D%E5%8A%A1&amp;rft.genre=unknown&amp;rft_id=http%3A%2F%2Fjigsaw.w3.org%2Fcss-validator%2F&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook"><span> </span></span></li>
<li><cite class="citation web">CSS4相容性測試. （原始內容存檔於2012年12月19日） <span title="連接到英語網頁">（英語）</span>.</cite><span title="ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzh.wikipedia.org%3ACSS&amp;rft.btitle=CSS4%E7%9B%B8%E5%AE%B9%E6%80%A7%E6%B8%AC%E8%A9%A6&amp;rft.genre=unknown&amp;rft_id=http%3A%2F%2Fcss4test.com%2F&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook"><span> </span></span></li></ul>
<!-- 
NewPP limit report
Parsed by mw2318
Cached time: 20230504230850
Cache expiry: 1814400
Reduced expiry: false
Complications: [vary‐revision‐sha1, show‐toc]
CPU time usage: 1.011 seconds
Real time usage: 1.427 seconds
Preprocessor visited node count: 9531/1000000
Post‐expand include size: 663154/2097152 bytes
Template argument size: 42364/2097152 bytes
Highest expansion depth: 30/100
Expensive parser function count: 76/500
Unstrip recursion depth: 0/20
Unstrip post‐expand size: 42976/5000000 bytes
Lua time usage: 0.420/10.000 seconds
Lua memory usage: 24311675/52428800 bytes
Number of Wikibase entities loaded: 1/400
--><!--
Transclusion expansion time report (%,ms,calls,template)
100.00%  990.806      1 -total
 24.40%  241.728      8 Template:Navbox
 21.83%  216.306      1 Template:Reflist
 12.55%  124.373      1 Template:W3C规范和标准
 12.17%  120.578     26 Template:Cite_web
 11.33%  112.245     49 Template:Link-en
  9.32%   92.345      1 Template:Lang-en
  8.46%   83.828      1 Template:网页浏览器
  8.17%   80.929      1 Template:Navbox_with_collapsible_sections
  6.59%   65.317      1 Template:Other_uses
-->
**階層式樣式表**（英語：**C**ascading **S**tyle **S**heets，縮寫：**CSS**；又稱**串樣式列表**、**級聯樣式表**、**串接樣式表**、**階層式樣式表**）是一種用來為結構化文件（如 HTML 文件或 XML 應用）添加樣式（字型、間距和顏色等）的電腦語言，由 W3C 定義和維護。CSS3 現在已被大部分現代瀏覽器支援，而下一版的 CSS4 仍在開發中。

CSS 不僅可以靜態地修飾網頁，還可以配合各種手稿語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。

## 概述

CSS 不能單獨使用，必須與 HTML 或 XML 一起協同工作，為 HTML 或 XML 起裝飾作用。本文主要介紹用於裝飾 HTML 網頁的 CSS 技術。其中 HTML 負責確定網頁中有哪些內容，CSS 確定以何種外觀 (大小、粗細、顏色、對齊和位置) 展現這些元素。CSS 可以用於設定頁面布局、設定頁面元素樣式、設定適用於所有網頁的全域樣式。CSS 可以零散地直接添加在要應用樣式的網頁元素上，也可以集中化內建於網頁、連結式引入網頁以及匯入式引入網頁。

CSS 最重要的目標是將檔案的內容與它的顯示分隔開來。在 CSS 出現前，幾乎所有的 HTML 檔案內都包含檔案顯示的資訊，比如字型的顏色、背景應該是怎樣的、如何排列、邊緣、連線等等都必須一一在 HTML 檔案內列出，有時重複列出。CSS 使作者可以將這些資訊中的大部分隔離出來，簡化 HTML 檔案，這些資訊被放在一個輔助的，用 CSS 語言寫的檔案中。HTML 檔案中只包含結構和內容的資訊，CSS 檔案中只包含樣式的資訊。

比如 HTML 中 `H2` 標誌這一個二級標題，它在級別上比一級標題 `H1` 低，比三級標題 `H3` 高。這些資訊都是結構上的資訊。

一般來說級別越高的標題其字型也越大，`H1` 的字型最大，因為一般來說字型越大它表示的內容就越重要，此外一般標題都使用粗體字，來突出它們的重要性。一般來說 `H2` 使用粗體字，其字型比 `H3` 大，比 `H1` 小。這些資訊是顯示用的資訊。

在 CSS 出現前，假如作者要確定 `H2` 標題的顏色、字形、大小或其他顯示特徵的話，他要使用 HTML 中的 `font` 或其他樣式指令，光 `H2` 不夠，因為 `H2` 只是一個結構指令。假如一個標題要用斜體字、紅色的字元、白色的底色的話，作者要這樣寫：

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

這些顯示用的指令使得一個 HTML 變得非常複雜，要維護也比較困難。假如所有的二級標題都要這樣來顯示的話，所有的二級標題的指令都要這麼複雜。此外讀者無法改變這些規定，假如一個讀者更喜歡藍色的標題的話，他無法改變標題的顏色，因為檔案的作者特別規定了標題的顏色。

使用 CSS 的話 `H2` 指令只規定文章的結構，其顯示由樣式表來規定，上面的例子可以變成這樣：

　
: `<H2>使用CSS</H2>`

服從的樣式表可以規定 `H2` 指令使用斜體字，紅色字和白色背景：

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

這樣顯示與內容就分開了（由於 CSS 的優點，W3C 現在正在考慮將 HTML 中的許多顯示用的指令廢棄掉）。HTML 只表達文章的結構，CSS 表達所有的顯示。CSS 可以指示顏色、字形、排列、大小以及其他許多非視覺的表達方式，比如將一篇檔案的內容讀出來。

CSS 樣式資訊可以包含在一個附件中或包含在 HTML 檔案內。讀者可以使用多個樣式表，在重複的情況下他可以選擇其中之一。不同的媒介可以使用不同的樣式表。比如一個檔案在螢光屏上的顯示可以與在印表機中列印出來的顯示不同。這樣作者可以為不同的媒體設計最佳的顯示方式。此外 CSS 的目標之一是讓讀者有更大的控制顯示的自由。假如一個讀者覺得斜體字的標題讀起來很困難，他可以使用自己的樣式表檔案，這個樣式表可以「層疊」使用，他可以只改變紅色斜體字這個樣式而保留所有其他的樣式。

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

## 主要內容

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

* 選擇器（Selector）：多個選擇器可以半形逗號（,）隔開。
* 屬性（property）：CSS1、CSS2、CSS3 規定了許多的屬性，目的在控制選擇器的樣式。
* 值（value）：指屬性接受的設定值，多個關鍵字時大都以空格隔開。

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

### 選擇器

要針對沒有標籤定義範圍進行樣式設定時，可利用 `<div>` 與 `<span>` 標籤

CSS 裡現在共有 5 種基本選擇器（Basic Selectors）和 2 種偽選擇器。不同選擇器的優先級別和運作效能往往存在差異。

#### 基本選擇器

* 標籤選擇器（h1，p 等）——`elementname`
* 類別選擇器（class）——`.elementname`
* ID 選擇器（ID）——`#elementname`
* 萬用選擇器 ——`* ns|* *|*`
* 屬性選擇器（也翻譯為「萬用字元選擇器」）——`[attribute]`

#### 屬性選擇器

屬性選擇器允許使用者自訂屬性名稱，而不僅僅限於 id，class 屬性。屬性選擇器共有 7 種。

#### 組合選擇器

CSS 里現在共有 4 種組合選擇符（Combinators）：

#### 選擇器使用範例

例子：

在這個例子中有三個選擇器：`p`、`h2` 和 `.highlight`，`color: red` 是一個定義，其中 `color` 是屬性，`red` 是 `color` 的值。

在這裏 HTML 中的結構 `P`（段落）和 `H2`（2 級標題）獲得了不同的樣式。每個段落的字體的大小比包含這個段落的結構的字體的大小要大 10%，其字形是 `Garamond`，假如 `Garamond` 沒有的話那麼使用一般的 `sans-serif` 字形。2 級標題的字用紅色，底面是白色的。這個例子中的第三個規則規定了一個 `class` 的樣式。通過 `class` 屬性每個 HTML 結構都可以被指定為這個 `class`，例如：

```
<P class="highlight">這個段落將被顯示為黃底紅字粗體。</P>
```
顯示為

這個段落將被顯示為黃底紅字粗體。

除使用 `<style>` 之外，也可於 HTML 內直接使用 `style="/*CSS在這裡*/"`︰

#### 其它選擇器

CSS 中還提供了偽元素選擇器和虛擬類別選擇器，但用途單一一些，常與其它選擇器組合在一起使用。偽元素的元素主要用於選取與另一個選擇器選中物件臨近的元素。虛擬類別選擇器用於選中處於特定狀態或具有特定性質的元素。

### 引入 CSS 規則的多種方式及其層疊性

CSS 可以有多種引入方式，一個網頁可以引入多個 CSS 檔案，同一種 CSS 規則可以被反覆多次添加。這使得 CSS 的使用方式非常靈活，但也會頻繁地出現規則衝突。同時對一個網頁元素設定無法並存的 2 種樣式時，就會引起衝突。CSS 的特色之一就是其解決規則衝突的方案。CSS 的規則衝突可以分為不同來源之間的規則衝突和同一來源內部的規則衝突。CSS 分層次、立體化的比較不同規則的優先級的方式，就是所謂層疊性 (cascading) 的體現。

首先說來源的多樣性，CSS 資訊可以來自：

* 作者樣式
  * 作者可以在他的 HTML 檔案中確定一個外來的、獨立的 CSS 檔案（外部樣式表），其優先級最低
  * 作者可以將 CSS 資訊包含在 HTML 檔案內（內部樣式表）
  * 作者可以在一個 HTML 指令內結合 CSS 指令（行內樣式），其優先級最高。一般這樣做是為了在特殊情況下，把上面來源的 CSS 抵消掉
* 客戶端自訂樣式（client-side style sheet）
  * 瀏覽網頁的使用者可以自己在本地電腦上自己寫 1 個 CSS 檔案，然後就可以在瀏覽器內通過設定好特定選項，來載入自己的 CSS 檔案。這個 CSS 檔案可以用在所有的 HTML 檔案上。當網頁作者沒有設定某項規則，但存在對應的使用者自訂規則時，使用者的規則就會起作用。假如作者的 CSS 檔案與讀者的相衝突，瀏覽器會採用作者的規則。如果讀者有特殊要求，可以通過在自訂規則末尾添加 `!important` 提升自訂規則的顯示優先權。(網頁作者也可以使用 `!important` 給規則提升權限，但是優先級別比不過由使用者寫的 `!important` 聲明，`!important` 對於網頁作者的意義僅在於網頁開發階段的規則衝突測試)
* 瀏覽器樣式
  * 假如外部沒有特別指定一個樣式的話，一般瀏覽器自己有一個內在的樣式。由於不同瀏覽器的預設樣式並不一致，所以講究美觀的網頁的設計者一般喜歡去掉這個預設的樣式。

其次還需知道規則特殊性 (specificity) 的概念。某個規則的特殊性也常被稱為該規則的具體程度。規則特殊性的高低次序如下（依次遞減）：

1. 行內樣式
2. ID 選擇器
3. class 選擇器
4. 標籤選擇器
5. 通用選擇器（也就是萬用字元選擇器，用得少）

#### 特殊性優先原則

特殊性優先原則是最重要的優先級比較規則。當引起衝突的 2 種規則的特殊性存在差異時（例如一個是通過 ID 選擇器指定樣式，另一個是通過 class 選擇器指定樣式），引擎將優先採用特殊性更高的樣式。規則的特殊性的比較是最優先的。如果能直接判斷出特殊性的差異，就無需考慮其它規則了。

#### 不同來源的規則優先性

不同來源的規則之間的優先原則是第二重要的。當規則來源相同時（同為外部樣式或同為內部樣式），下一步就需要比較不同類型來源的優先級別。總地來說，記住「行內樣式優先於內部樣式，內部樣式又優先於外部樣式」即可應對多數常見的情形。像網頁瀏覽者自訂樣式表的優先級別如何，只有瀏覽器的設計者才需要考慮，與網頁設計者的關係不大。

如果考慮有可能出現的更複雜的來源衝突，內容就比較多了。但一般在寫樣式時，應儘可能避免這些複雜情形的出現。具體來說，一般情形下的採納樣式效果的優先級順序為：

1. 行內樣式
2. 內部樣式
3. 在 HTML 中通過 `<link>` 標籤直接引入的外部樣式表
4. 在 CSS 中通過 `@import` 語句間接引入的外部樣式表
5. 瀏覽網頁的使用者自己定義的樣式表（需要手動載入）
6. 瀏覽器預設的樣式（如標題有預設大小、段落之間有預設間距等，不同瀏覽器的預設樣式不完全一樣）

CSS 中還有用 `!important` 修飾的重要性聲明。如果計入重要性聲明，那麼在以上規則的最前面還需要加上 2 條規則：

1. 使用者從本地載入的重要自訂樣式
2. 網頁設計者設定的重要樣式

設計重要性聲明是為部分特殊使用者和所有開發者提供方便。一方面，使用者可以通過設定自己的色彩方案，並對其使用重要性聲明來提升瀏覽體驗。另一方面，網頁的設計者難免會遇到因規則衝突而導致特定樣式規則失效的情形，設計者可以通過給不知何故不起作用的規則增加重要性聲明，看看是否有樣式變化來確定是否是不小心導致了規則衝突而引起特定規則被覆蓋失效。

#### 權重分數比較機制

有時還會遇到選擇器優先級無法直接判斷，而且規則的來源也相同的情形。如果網頁設計者很少使用層次比較複雜的選擇器（比如多級的後代選擇器），那麼必須比較權重的情況一般不會遇到（一般要麼是可以直接根據前面的規則判斷出優先性結果，或者是起衝突的 2 條規則的權重完全一樣，只能繼續去看後一條比較出現次序的機制）。此時，CSS 還有一套分數加權 (或者說是分數累積) 的機制用於解決此類規則衝突。先列出基本的分值：

* 1 個行內樣式占 1000 分
* 1 個 id 選擇器占 100 分
* 1 個 class 選擇器占 10 分
* 1 個標籤選擇器占 1 分

組合使用多個基本選擇器時，不同選擇器的得分會累加到一起。最終得分高的選擇器，其指定的樣式會勝出。

舉例： 
`.type1 #id3{color: green; font-size: 20px;}` 
`div p #id3{color: blue; background-color: grey;}` 
假設這 2 行代碼都能夠選中同一個 ID 為「id3」的元素，且都是出自同一來源的樣式表。可以看到，二者使用的優先級最高的選擇器都是 ID 選擇器，起衝突的樣式設定是字型顏色。一個給此元素設定字型顏色為綠色，另一個給此元素設定字型顏色為藍色。按照評分規則，因為前一種代碼使用了 1 個類選擇器和 1 個 id 選擇器，所以得分為 10+100=110 分；後一種代碼使用了 2 個標籤選擇器和 1 個 id 選擇器，所以得分為 1+1+100=102 分。因為 110 分 > 102 分，所以前一種規則勝出，目標元素的最終文字顏色應該是綠色。

#### 靠後者優先原則

當權重比較仍然不能分出優先級勝負時，最後就是把守關底的「靠後優先」的原則了，也就是後定義的樣式優先級較高。如果起衝突的規則來源相同，而且得分也相同，那麼最後的衝突解決法則就是看 CSS 代碼出現的先後順序。後出現的規則會覆蓋掉與之優先級相當的先出現的規則。也可稱作「後發制人」、「後來者居上」或「後浪推前浪」原則，隨便你怎麼稱呼。這種原則的適用情形很常見，所以此規則也很重要。

### 行級元素與塊級元素

### 方盒模型

### 浮動與定位

#### 包含塊、定位

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

#### 層次與層疊上下文

層疊上下文規則決定了當有網頁元素位置發生部分重合時，重合部分的上下疊放次序。層疊上下文規則詳細規定了當浮動、定位以及 z 軸數值同時出現時，元素疊放次序的總規則。

#### 格式化上下文

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

* 避免垂直方向不同元素的相鄰外邊距自動合併
* 清除因為為子元素設定了浮動而可能造成的父元素高度塌陷
* 實現一列寬度固定、一列寬度不固定的雙列寬度自適應布局

### 其它

CSS 檔內也可以包含注釋，注釋放在 `/*` 和 `*/` 之間。一般的瀏覽器也辨識以雙斜槓 (`//`) 開頭的這種注釋，但是這是不規範的做法。

## 歷史

### 發展歷史

#### 早期樣式表的歷史

HTML 規範雖然規定了網頁中的標題、段落應該使用的標籤，但是沒有涉及這些內容應該以何種樣式 (比如大小、位置、間距、縮排等屬性) 呈現在瀏覽器中。從 1990 年代初 HTML 被發明開始，樣式表就以各種形式出現了。不同的瀏覽器結合了它們各自的樣式語言，讀者 (也就是瀏覽網頁的使用者) 可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的 HTML 版本只含有很少的顯示屬性，讀者來決定網頁應該怎樣被顯示。

1993 年，Robert Raisch 提出了一種名為「RRP」的樣式規則建議。但這個 RRP 只允許網頁使用 1 個樣式表，不像現在的 CSS 能支援同時載入多個。不久後出現的 Mosaic 瀏覽器就採用增加新種類的 HTML 標籤實現樣式的表達，以滿足設計師的要求，這也與現在的 CSS 設計原則不符。隨著 HTML 內建的樣式功能的增加，外來定義樣式的語言逐漸減弱了。1993 年發布的這個 Mosaic 瀏覽器是第一款使用者介面，並支援書籤、圖示按鈕和圖片顯示。之前的瀏覽器都是純文字瀏覽器。即使在今天，只使用作業系統命令列內建的 Telnet 命令，也可以檢視網頁的原始碼。

後來，台灣人魏培源開發的 ViolaWWW 瀏覽器使用了一種規則具有層次巢狀性的樣式表，並第 1 個支援通過 `<link>` 標籤參照外部樣式表。FOSI 最早支援以相對尺寸值來表示字型大小。函數式風格的 DSSSL 語言支援在樣式表中進行定義變數、繼承變數、定義函式等功能，但是語法複雜。1994 年，全球資訊網之父提姆・柏內茲 - 李在歐美眾多高能物理研究者和技術人員的支援下，於美國麻省理工學院創立了全球資訊網協會（W3C），其職責是提供網路標準化建議。1994 年，Håkon W Lie 提出層疊 HTML 樣式表（Cascading HTML Style Sheets，CHSS）。CHSS 既支援使用者自訂樣式表，也支援網頁作者樣式表，而且可以滿足不同規則以百分比的方式組合使用。它的權重規則計算方式不夠直觀，當不同規則混合時會得到什麼實際效果並不容易從代碼中看出。1996 年，出現了與 CSS 語法很像的表現指明語言（Presentation Specification Language，簡稱 "PSL 96"）。PSL 96 除表達樣式外，也支援條件判斷等功能，還可根據對瀏覽器資訊的判斷來使用不同的樣式，但未獲得青睞。

#### CSS 的誕生與發展

1994 年，哈肯・維姆・萊提出了 CSS 的最初建議。伯特・波斯當時正在設計一個叫做 Argo 的瀏覽器，他們決定一起合作設計 CSS。當時已經有過一些樣式表語言的建議了，但 CSS 是第一個含有「層疊」的主意的。在 CSS 中，一個檔案的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或「層疊」作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。哈肯・萊於 1994 年在芝加哥的一次會議上第一次展示了 CSS 的建議，1995 年他與波斯一起再次展示這個建議。當時 W3C 剛剛建立，W3C 對 CSS 的發展很感興趣，它為此組織了一次討論會。哈肯、波斯和其他一些人（比如微軟的托馬斯・里爾登）是這個專案的主要技術負責人。1996 年底，CSS 已經完成。1996 年 12 月，哈肯・萊與伯特・波斯發布了 CSS 規範的第 1 個版本。這也成了哈肯・萊的博士論文的一部分。當時已有的主流瀏覽器的核心架構完全不適合解析 CSS 的語法，加上早年設計師濫用 HTML 標籤來表達樣式 (這導致「標籤湯」(tagsoup) 這一罵名的出現)、且漠不關心代碼校驗，所以 CSS 等到幾年之後才流行起來。1998 年，瀏覽器市場份額被微軟公司的 Internet Explorer 4 和網景公司的 Netscape Navigator 4 兩大瀏覽器巨頭所占據。CSS 出現後，微軟的 IE 瀏覽器走在了逐步實現 CSS 第 1 版標準的前列。但是因為不重視問題修補，導致遺留 Bug 很多，這也使得 IE 瀏覽器長期為人們詬病。網景則把重心放在了網頁尾本語言的開發上，但很快被微軟模仿。網景在 90 年代末和微軟展開的瀏覽器大戰中最終一敗塗地，走向破產邊緣，但網景也成功推出了日後廣泛流行於網頁設計中的 JavaScript 語言。瀏覽器大戰使得網頁設計人員深受其害，因為不同瀏覽器支援的語法規則不太一樣，網頁設計人員不得不為 IE 瀏覽器和網景瀏覽器的瀏覽器分別設計一套網頁。新成立的民間設計人員團體「網頁標準計劃」(WaSP) 發動水軍將 W3C 的建議宣揚為標準，並批評還未加盟 W3C 標準的業界廠商。

1997 年初，W3C 組織了專門管 CSS 的工作群組，其負責人是克里斯・里雷。這個工作群組開始討論第 1 版中沒有涉及到的問題，其結果是 1998 年 5 月出版的第 2 版規則。網頁標準計劃的 7 位成員成立了「CSS 武士團」（CSS Samurai），指出 Opera 瀏覽器和 IE 瀏覽器在支援 CSS 方面存在的諸多問題。Opera 公司著手解決了問題，但微軟並未解決。網頁標準計劃也積極勸說網景公司和 Macromedia 公司分別改進其產品對 CSS 標準的支援。2003 年，Dave Shea 推出了一個名為「CSS 禪意花園」("CSS Zen Garden") 的站點，向人們展示出僅通過應用不同頁面樣式規則，就可以實現對網頁藝術風格的煥然一新。這個網站在網頁設計相關人群中產生了不小影響。

從 2006 年到 2009 年，「DIV+CSS」布局逐步取代缺乏靈活性的傳統表格布局，無表格網頁設計成為網頁內容布局的主流方案。此時也出現了一些為了跟風而濫用 DIV 布局的情況，比如將 `<h1>` 和 `<h2>` 等本身已有語意的標籤也改用 `<div>` 標籤替代。

CSS3 引入的簡單動畫功能使得 CSS 也開始涉足以往只應由 JavaScript 負責的效果互動工作。到 2017 年為止，第 3 版規則還未完備。

### 版本歷史

#### CSS1

於 1994 年，哈肯・維姆・萊和伯特・波斯合作設計 CSS。他們在 1994 年首次在芝加哥的一次會議上第一次展示了 CSS 的建議。

1996 年 12 月發表的 CSS1 的要求有：

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

#### CSS2-2.1

1998 年 5 月 W3C 發表了 CSS2，其中包括新的內容如：

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

CSS2.1 修改了 CSS2 中的一些錯誤，刪除了其中基本不被支援的內容和增加了一些已有的瀏覽器的擴充內容。

#### CSS3

CSS3 標準已部分公布，但仍未全部制訂完畢，還會有其它新內容繼續加入。W3C 網站上有專頁展示 CSS3 發展的進展。

CSS3 分成了不同類別，稱為「modules」。而每一個「modules」都有於 CSS2 中額外增加的功能，以及向下相容。CSS3 早於 1999 年已經開始制訂。直到 2011 年 6 月 7 日，CSS 3 Color Module 終於發布為 W3C Recommendation。

CSS3 裡增加了不少功能，如：「border-radius」、「text-shadow」、「transform」以及「transition」。CSS3 亦支援動畫（animation）及立體（preserved-3d）。

部分屬性（例如旋轉類屬性（如：transform），動畫類屬性，立體類屬性），由於現時不同瀏覽器支援程度不同，需要加上不同的瀏覽器前綴來區分。

#### CSS4

W3C 於 2011 年 9 月 29 日開始了設計 CSS4。直至現時只有極少數的功能被部分網頁瀏覽器支援，如使用在 HTML 而非 SVG 上的 pointer-events。

CSS4 增加了一些更方便的選擇器，並簡化了一些現有選擇器的用法。

### 採納的困難

瀏覽器核心主要負責解析網頁內容樣式以及進行指令碼處理（現在分別由瀏覽器內部的頁面彩現引擎和 JavaScript 引擎分工）。其中頁面彩現就是正確辨識出 CSS 代碼並在窗口中顯示出對應的內容樣式。開發一個可支援 CSS 語法解析的瀏覽器並非易事，CSS 規則繁雜，尤其是需要考慮不同的 CSS 規則之間會存在相互影響的問題。自從 Mozilla 基金會將 Gecko 排版引擎單獨發布後，現在有眾多瀏覽器廠商採用由第三方發布的頁面彩現引擎，獨立開發新頁面彩現引擎的機構很少。

首先是標準實現程度的問題。儘管 CSS1 標準在 1996 年就制訂完成了，但一直到 3 年後還沒有一個瀏覽器實現了其中的全部語法規則。上市的各個瀏覽器都只是實現了對一部分規則的支援。2000 年 3 月，由微軟在麥金塔電腦平台上發布的 5.0 版 Internet Explorer (IE) 是第 1 個全部實現 CSS1 的瀏覽器。此後許多其他瀏覽器也實現了 CSS1 和 CSS2 的一部分。但到 2004 年為止還沒有一個瀏覽器實現了全部 CSS2 規則。尤其 aural 和 paged 等特性是被支援得最差的。

其次，支援某種特性，不代表用起來就沒有問題。舊 IE 版本就以 Bug 多而聞名。其中聲名狼藉的 IE 6 存在元素堆疊 Bug、幽靈字元，方塊神秘消失等稀奇古怪的設計缺陷。微軟自從在第 1 輪瀏覽器大戰中勝出後，就依仗獨霸市場的優勢，輕視修補 IE Bug 的呼聲，導致其市場份額後來又逐漸被其它瀏覽器蠶食，產生第 2 輪瀏覽器大戰。

另外還有代碼跨瀏覽器相容性的問題。「能夠在任何瀏覽器中顯示」並不意味著「在任何一個瀏覽器中顯示的效果相同」。即使是徹底實現了 CSS1 的瀏覽器也遇到了許多困難。許多 CSS 的實現機制互相矛盾、有錯或有其它稀奇古怪的地方。為了使他們的頁面在任意系統上的任意瀏覽器中的顯示效果一致，網頁作者往往要被迫寫出繁瑣的代碼或使用各種奇技淫巧。一個最著名的錯誤涉及到顯示方形的寬度，在 IE 瀏覽器中方形的寬度的顯示有錯誤，其結果是方形的寬度在許多瀏覽器中被正確地顯示，但在 IE 上方形的寬度太窄。雖然這個錯誤有解決的辦法，但它限制了其他一些功能（IE 8.0 已經改善方形寬度顯示問題）。舊版 IE 還有與其它瀏覽器計算方式不一樣的方盒模型。

## 特點

### 優勢

網頁的讀者和作者都可以使用 CSS 來決定檔案的顏色、字型、排版等顯示特性。CSS 最主要的目的是將檔案的內容與顯示分隔開來。這有許多好處：

* 檔案的可讀性加強
* 檔案的結構更加靈活
* 作者和讀者可以自己決定檔案的顯示
* 檔案的結構簡化了

另外，在 HTML 中：

* 一個整個網站或其中一部分網頁的顯示資訊被集中在一個地方，要改變它們很方便
* 不同的讀者可以有不同的樣式，比如有的讀者需要字型比較大
* HTML 檔案本身的範圍變小了，它的結構簡單了，它不需要包含顯示的資訊

CSS 還可以控制其他參數，例如聲音（假如瀏覽器有閱讀功能的話）或給視障者用的感受裝置。

### 缺點

CSS 明顯的缺點包括：

* 瀏覽器不同的支援

　
: 瀏覽器對 CSS 的支援沒有統一，造成不同的瀏覽器顯示效果不同。例如在微軟 Internet Explorer 的舊版本 6.0，有許多獨有的 CSS 2.0 屬性，但錯誤顯示很多重要的屬性，例如：`width`，`height`，和 `float`。許多 CSS 編寫人員為了儘可能在常用的各個瀏覽器中達到一致的版面編排，要寫很多針對各個瀏覽器的不同的 CSS 代碼。當版面編排很複雜時，要在各個瀏覽器裏取得相同效果是不可能的。
* CSS 沒有父選擇器

　
: CSS 選擇器無法提供元素的繼承性。先進的選擇器（例如 XPath）有助於複雜的樣式設計。然而，瀏覽器的效能和增加彩現的問題，關係著父層選擇器，卻是 CSS 的工作群組拒絕建議的主要原因。 
而 CSS4 則計劃包括類似功能。
* 不能明確地指定繼承性

　
: 樣式的繼承性，建立在瀏覽器中 DOM 元素的層級和具體的規則上，參照 CSS2 說明中的章節 6.4.1。
* 垂直控制的局限

　
: 元素的水平放置普遍地易於控制，垂直控制則不然。簡單來說，垂直地圍繞一個元素、頁尾的放置不能高於可見視窗（viewport，視窗或螢幕的可見範圍）的底部範圍。這需要複雜的樣式規則，或是規則簡單，但不被廣泛支援。
* 沒有算術功能

　
: 直至 CSS 2.1 的 CSS 沒有辦法明確簡單地進行計算（例如：`margin-left: 10% - 3em + 4px;`）。計算功能在很多情況下都是非常有用的，例如：總欄位中計算欄位的尺寸限制。無論如何，CSS WG 發表了 CSS 局限性的草案。IE 5 至 IE 7 提供 `expression()` 函式（即所謂的 **CSS 表達式**）來執行計算功能，例如 `left: expression（document.body.offsetWidth - 110 + "px"）;` 。為了與 CSS 標準看齊，並且該函式效能差，微軟從 IE 8 開始停止支援此函式。

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

* 缺乏唯一性

　
: 同樣的效果可以用不同的屬性來完成，這對不少的 CSS 編寫人員造成困擾。例如 `position`、`display` 與 `float` 定義了不同的組態方式，而且不能有效的交替使用。一個 `display: table-cell` 元素不能指定 `float` 或是 `position: relative`，因為指定 `float: left` 的元素不應該受到 `display` 效果的影響。再者，沒有考慮到新建立屬性所造成的影響，例如在表格中你應該使用 `border-spacing` 而不是 `margin-*` 來指定表格元素。這是因為依照 CSS 準則，表格內部元素是沒有邊界（margin）的。

## CSS 的效能最佳化

### 使用語法縮寫

使用 CSS 縮寫可以減少 CSS 檔案的大小，並使其更為易讀。例如：顏色縮寫（縮寫 16 進位的色彩值）、盒尺寸縮寫、邊框縮寫、背景縮寫和文字縮寫。

## 無障礙設計

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

## 參見

* Acid1
* Acid2
* Acid3
* 無表格網頁設計
* IE 盒模型缺陷
* 瀏覽器引擎 CSS 支援比較

## 參考資料

### 文內參照

### 補充來源

* 莫振傑. HTML 与 CSS 进阶教程 1. 中國北京：人民郵電出版社. 2016 年. ISBN 978-7-115-43295-7 （中文（中國大陸））.

## 外部連結

* 官方網站
* W3C 的 CSS 校验服务. [2005-09-02]. （原始內容存檔於 2011-02-14） （英語）.
* CSS4 相容性測試. （原始內容存檔於 2012 年 12 月 19 日） （英語）.
.css