跳至內容

CSS

本頁使用了標題或全文手工轉換
維基百科，自由的百科全書
（重新導向自层叠样式表）
  關於與「CSS」標題相近或相同的條目頁，請見「CSS (消歧義)」。
  關於層疊樣式表在維基百科的應用，詳見Help:層疊樣式表。
CSS
階層式樣式表
CSS3的標誌
副檔名
.css
網路媒體型式
text/css
統一類型標識public.css
開發者哈肯·維姆·萊、伯特·波斯、全球資訊網協會
首次發布1996年12月17日，​27年前​（1996-12-17）
格式類型樣式表語言
標準第一版
第二版
第二版第一次修訂
第三版各模組目前的規格化進度與規格書連結

階層式樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發中。

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

概述

[編輯]
階層式樣式表
本模板：

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

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檔案範例

[編輯]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
    <style type="text/css">
    body{
        background:#fff;
        color:#777;
    }
    h1{
        font-weight:bold;
        font-style:italic;
        font-family:sans-serif;
        color:green;
    }
    </style>
</head>
<body>
    <h1>這個句子用綠色、粗體和斜體字顯示</h1>
    <p>普通字。</p>
    <h1 style="color:red; background:green;">
    這個句子用大的、紅色斜體字在綠色背景上顯示，通用的h1樣式在這裡被取代了。
    </h1>
    <h1 style="color: green;"><strong><em>這個句子用綠色、粗體和斜體字顯示</em></strong></h1>
</body>
</html>

主要內容

[編輯]

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

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

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

選擇器

[編輯]

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

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

基本選擇器

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

屬性選擇器

[編輯]

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

代碼 說明
[attribute] 元素有attribute的屬性。
[attribute="value"] 屬性attribute裡是value
[attribute~="value"] 屬性attribute裡使用空白分開的字串裡其中一個是value
[attribute|="value"] 屬性attribute裡是value或者以value-開頭的字串
[attribute^="value"] 屬性attribute裡最前的是value
[attribute$="value"] 屬性attribute裡最後的是value
[attribute*="value"] 屬性attribute裡有value出現過至少一次

組合選擇器

[編輯]

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

符號 說明
A > B 子代選擇器，選擇A下一層的元素B
A ~ B 兄弟選擇器，選擇與A同層的元素B
A + B 相鄰兄弟選擇器，選擇與A相鄰的元素B（不能被任何元素相隔）
A B 後代選擇器，包含選擇符

選擇器使用範例

[編輯]

例子： 

p{
    font-size: 110%;
    font-family: garamond, sans-serif;
}
h2{
    color: red;
    background: white;
}
.highlight{
    color: red;
    background: yellow;
    font-weight: bold;
}

在這個例子中有三個選擇器：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在這裡*/"︰ 

<p style="color:red; background:yellow; font-weight:bold;">
    這個段落同樣會被顯示為黃底紅字粗體。
</p>

其它選擇器

[編輯]

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選擇器指定樣式），引擎將優先採用特殊性更高的樣式。規則的特殊性的比較是最優先的。如果能直接判斷出特殊性的差異，就無需考慮其它規則了。

不同來源的規則優先性

[編輯]

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

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

  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軸數值同時出現時，元素疊放次序的總規則。

格式化上下文

[編輯]

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

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

其它

[編輯]

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

歷史

[編輯]

發展歷史

[編輯]
哈肯·維姆·萊，Opera公司首席技術長和CSS網頁標準共同創始人

早期樣式表的歷史

[編輯]

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

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

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

CSS的誕生與發展

[編輯]

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

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

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

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

版本歷史

[編輯]

CSS1

[編輯]

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

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

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

CSS2-2.1

[編輯]

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

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

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

CSS3

[編輯]

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

CSS3的標誌。

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

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

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

CSS4

[編輯]

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

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、幽靈字元，方塊神秘消失等稀奇古怪的設計缺陷。[23]微軟自從在第1輪瀏覽器大戰中勝出後，就依仗獨霸市場的優勢，輕視修補IE Bug的呼聲，導致其市場份額後來又逐漸被其它瀏覽器蠶食，產生第2輪瀏覽器大戰。

另外還有代碼跨瀏覽器相容性的問題。「能夠在任何瀏覽器中顯示」並不意味著「在任何一個瀏覽器中顯示的效果相同」。[12]即使是徹底實現了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[24]。許多CSS編寫人員為了儘可能在常用的各個瀏覽器中達到一致的版面編排，要寫很多針對各個瀏覽器的不同的CSS代碼。當版面編排很複雜時，要在各個瀏覽器裏取得相同效果是不可能的。
  • CSS沒有父選擇器
    CSS選擇器無法提供元素的繼承性。先進的選擇器（例如XPath）有助於複雜的樣式設計。然而，瀏覽器的效能和增加彩現的問題，關係著父層選擇器，卻是CSS的工作群組拒絕建議的主要原因。
    而CSS4則計劃包括類似功能。
  • 不能明確地指定繼承性
    樣式的繼承性，建立在瀏覽器中DOM元素的層級和具體的規則上，參照CSS2說明中的章節6.4.1。[25]
  • 垂直控制的局限
    元素的水平放置普遍地易於控制，垂直控制則不然。簡單來說，垂直地圍繞一個元素、頁尾的放置不能高於可見視窗（viewport，視窗或螢幕的可見範圍[26]）的底部範圍。這需要複雜的樣式規則，或是規則簡單，但不被廣泛支援。
  • 沒有算術功能
    直至CSS 2.1的CSS沒有辦法明確簡單地進行計算（例如：margin-left: 10% - 3em + 4px;）。計算功能在很多情況下都是非常有用的，例如：總欄位中計算欄位的尺寸限制。無論如何，CSS WG[27]發表了CSS局限性的草案。IE 5至IE 7提供expression()函式（即所謂的CSS表達式）來執行計算功能，例如left: expression（document.body.offsetWidth - 110 + "px"）; 。為了與CSS標準看齊，並且該函式效能差，微軟從IE 8開始停止支援此函式。
    CSS 3中具有calc()表達式以執行計算功能[28][29]。
p {
    margin: calc (1rem - 2px) calc (1rem - 1px) 
}
  • 缺乏唯一性
    同樣的效果可以用不同的屬性來完成，這對不少的CSS編寫人員造成困擾。例如position、display與float定義了不同的組態方式，而且不能有效的交替使用。一個display: table-cell元素不能指定float或是position: relative，因為指定float: left的元素不應該受到display效果的影響。再者，沒有考慮到新建立屬性所造成的影響，例如在表格中你應該使用border-spacing而不是margin-*來指定表格元素。這是因為依照CSS準則，表格內部元素是沒有邊界（margin）的。

CSS的效能最佳化

[編輯]

使用語法縮寫

[編輯]

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

無障礙設計

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

參見

[編輯]

參考資料

[編輯]

文內參照

[編輯]
  1. ^ Carey Wodehouse. What is CSS? Cascading Style Sheets - Hiring Headquarters. Upwork Global Inc. 2005年6月 [2018年4月21日]. （原始內容存檔於2018年4月22日） （英語）. 
  2. ^ 2.0 2.1 CSS Reference. Mozilla Developer Network. [2011-11-23]. （原始內容存檔於2011-10-14） （英語）. 
  3. ^ 莫振傑 2016，第191頁，第12章「效能最佳化」
  4. ^ Attribute selectors. Mozilla Developer Network. [2011-11-23]. （原始內容存檔於2011-11-12）. 
  5. ^ Hyphen [-=] Attribute Selector. msdn.microsoft.com. [2012-03-17]. （原始內容存檔於2015-09-30）. 
  6. ^ What is cascading style sheet (CSS)?. WhatIs.com. 2005年6月 [2018年4月21日]. （原始內容存檔於2018年4月21日） （英語）. 
  7. ^ 莫振傑 2016，第223頁
  8. ^ Glen Stansberry. 10 Biggest Milestones in Web Development [Web發展史上的十大里程碑]. "被遺忘" (譯者). 2008年11月29日 [2018年4月21日]. （原始內容存檔於2018年4月21日） （中文（中國大陸））. 
  9. ^ David Gourley & Brian Totty & Marjorie Sayer & Sailu Reddy & Anshu Aggarwal. 第1章“HTTP概述”第6节“连接”第3小节“使用Telnet实例”. HTTP权威指南 [HTTP: The Definitive Guide]. 陳涓（翻譯），趙振平（翻譯），李盼（責任編輯），丁曉昀 (執行編輯) 1. 人民郵電出版社. 2012: 16-17. ISBN 978-7-115-28148-7 （中文（中國大陸））. 
  10. ^ 10.0 10.1 10.2 10.3 10.4 Mark Norman Francis. 互联网和Web的历史以及Web标准的演化. 站長之家. W3C標準WEB前端DHTML精英俱樂部 (翻譯). 2009年10月23日 [2018年4月21日]. （原始內容存檔於2018年4月21日） （中文（中國大陸））. 
  11. ^ Lie, Håkon. Cascading HTML style sheets -- a proposal. W3C. 1994-10-10 [2023-04-02]. （原始內容存檔於2017-06-29） （英語）. 
  12. ^ 12.0 12.1 12.2 12.3 Roger Johansson. Web标准发展建议与实例. 網易學院，網易科技. "x5studio" (翻譯). [2018年4月21日]. （原始內容存檔於2018年4月21日） （中文（中國大陸））. 
  13. ^ CSS BBS站長. DIV+CSS是WEB标准化发展的必经之路. A5創業網. 2009年1月12日 [2018年4月21日]. （原始內容存檔於2018年4月22日） （中文（中國大陸））. 
  14. ^ CSS1要求. W3C. （原始內容存檔於2004-08-20） （英語）. 
  15. ^ CSS2要求. W3C. （原始內容存檔於2004-08-20） （英語）. 
  16. ^ 要求候选者. W3C. （原始內容存檔於2004-08-11） （英語）. 
  17. ^ CSS3发展过程报告. W3C. （原始內容存檔於2004-08-11） （英語）. 
  18. ^ Bert Bos. Descriptions of all CSS specifications. World Wide Web Consortium. 2011-02-18 [2011-08-04]. （原始內容存檔於2011-03-31）. 
  19. ^ W3C︰http://www.w3.org/2011/05/css-pr.html.en （頁面存檔備份，存於網際網路檔案館）
  20. ^ Selectors Level 4. www.w3.org. [2011-11-23]. （原始內容存檔於2012-05-30）. 
  21. ^ Gilbertson, Scott. Discover What’s New in CSS 4. [2011-11-23]. （原始內容存檔於2012-05-30）. 
  22. ^ pointer-events. Mozilla Developer Network. [2012-04-11]. （原始內容存檔於2012-03-20）. 
  23. ^ IE6将告别历史死后大快人心的十件事情. COMSHARP CMS，站長之家 (轉載). 2009年4月16日 [2018年4月21日]. （原始內容存檔於2018年4月21日） （中文（中國大陸））. 
  24. ^ Internet Explorer vs. the Standards, a primer on standards violations in Explorer. [2008-10-13]. （原始內容存檔於2005-08-26）. 
  25. ^ Assigning property values, Cascading, and Inheritance. [2008-10-13]. （原始內容存檔於2008-10-26）. 
  26. ^ Visual formatting model. www.w3.org. [2008-10-13]. （原始內容存檔於2009-01-05）. 
  27. ^ CSS Values and Units Module Level 3. W3C. 2012-08-28 [2008-10-13]. （原始內容存檔於2008-04-23） （英語）. 
  28. ^ CSS Values and Units Reference. MSDN （英語）. [永久失效連結]
  29. ^ calc. Mozilla Developer Network. [2012-04-16]. （原始內容存檔於2012-05-05） （英語）. 
  30. ^ 常用CSS縮寫語法總結網際網路檔案館的存檔，存檔日期2011-01-12.

補充來源

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

外部連結

[編輯]
維基教科書中的相關電子教學：CSS
取自「https://zh.wikipedia.org/w/index.php?title=CSS&oldid=84501949」