CSS

層疊樣式表
	File:CSS.svg
副檔名	.css
網路媒體型式	text/css
開發者	World Wide Web Consortium
首次發佈	17 December 1996年，28年前
格式類型	Style sheet language
標準	第一版; 第二版; 第二版第一次修訂

層疊樣式表

層疊樣式表（英語：Cascading Style Sheets，簡寫CSS），又稱串樣式列表，一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。目前最新版本是CSS2.1，為W3C的推薦標準。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發過程中。

優勢

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

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

另外，在HTML中：

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

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

CSS位置

CSS資訊可以來自：

作者樣式
- 作者可以在他的HTML檔案中確定一個外來的、獨立的CSS檔案（外部樣式表），其優先級最低
- 作者可以將CSS資訊包含在HTML檔案內（內部樣式表）
- 作者可以在一個HTML指令內結合CSS指令（行內樣式），其優先級最高。一般這樣做是為了在特殊情況下，把上面來源的CSS抵消掉

自訂樣式
- 讀者可以在他的瀏覽器內設立一個CSS檔案。這個CSS檔案可以用在所有的HTML檔案上。假如作者的CSS檔案與讀者的相衝突，那麼讀者可以選擇一個
瀏覽器樣式
- 假如外部沒有特別指定一個樣式的話，一般瀏覽器自己有一個內在的樣式

語法

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

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

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

選擇器

要針對沒有標籤定義範圍進行樣式設置時，可利用<div>與<span>標籤於CSS裏現在共有5種基本選擇器（Basic Selectors）^[1]和2種偽選擇器。

基本選擇器

類型選擇器(h1,p等) —— elementname
類別選擇器(class) —— .elementname
ID選擇器(ID) —— #elementname
萬用選擇器 —— * ns|* *|*
屬性選擇器 —— [attribute]

偽元素選擇器

偽元素指的是為不同的狀態、性質而設置的元素

屬性	描述
`:after` 或 `::after`	元素之後
`:before` 或 `::before`	元素之前
`:first-letter` 或 `::first-letter`	文字第一個字母
`:first-line` 或 `::first-line`	文字首行
`::selection`	滑鼠已選擇（CSS3）

虛擬類別選擇器

虛擬類別選擇器可以選擇不在Document 結構中的資訊。

屬性	狀態
`:link`	超連結未被訪問
`:visited`	超連結被訪問過
`:hover`	滑鼠在元素上面
`:active`	滑鼠在元素上按着
`:focus`	焦點在元素上
`:target`	元素被URL標記 (CSS 3 新增的類別)
`:lang`	向帶有指定 lang 屬性的元素添加樣式。

屬性選擇器

屬性選擇器允許用戶自訂屬性名稱，而不僅僅限於id,class屬性，參見^[2]。屬性選擇器共有7種^[3]^[4]。

代碼	意思
`[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）：^[1]

符號	標題文字
`A > B`	選擇A下一層的元素B
`A ~ B`	選擇與A同父層的元素B
`A + B`	選擇與A相鄰的元素B（不能被任何元素相隔）
`A B`	包含選擇符

註釋

CSS檔內也可以包含註釋，註釋放在 /* 和*/之間。

例子

例子：

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在這裡*/"︰

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

縮寫

使用CSS縮寫可以減少CSS檔案的大小，並使其更為易讀^[5]，例如：

1.顏色縮寫：16進制的色彩值，如果每兩位的值相同，可以進行縮寫，例如：

000000可以縮寫為#000，#336699可以縮寫為#369;

2.盒尺寸縮寫：Property: Value1 Value2 Value3 Value4；四個值依次表示Top，Right，Bottom，Left

3.邊框縮寫

邊框的屬性如下：

     border-width: 1px;
     border-style: solid;
     border-color: #000;

可以縮寫為一句：

     border: 1px solid #000;

4.背景縮寫

     background-color: #F00;
     background-image: url(background.gif);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: 0 0;

可以縮寫為一句：

     background: #F00 url(background.gif) no-repeat fixed 0 0;

歷史

發展歷史

從1990年代初HTML被發明開始，樣式表就以各種形式出現了，不同的瀏覽器結合了它們各自的樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網頁應該怎樣被顯示。

但隨着HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。隨着這些功能的增加外來定義樣式的語言越來越沒有意義了。

1994年哈坤·利提出了CSS的最初建議。伯特·波斯（Bert Bos）當時正在設計一個叫做「Argo」的瀏覽器，他們決定一起合作設計CSS。

當時已經有過一些樣式表語言的建議了，但CSS是第一個含有「層疊」的主意的。在CSS中，一個檔案的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或「層疊」作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。

哈坤於1994年在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。當時W3C剛剛建立，W3C對CSS的發展很感興趣，它為此組織了一次討論會。哈坤、波斯和其他一些人（比如微軟的托馬斯·雷爾登）是這個專案的主要技術負責人。1996年底，CSS已經完成。1996年12月CSS要求的第一版本被出版。

1997年初，W3C內組織了專門管CSS的工作群組，其負責人是克里斯·里雷。這個工作群組開始討論第一版中沒有涉及到的問題，其結果是1998年5月出版的第二版要求。到2007年為止，第三版還未完備。

版本歷史

CSS1

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

File:Jarní šablona.PNG

完全使用CSS做成的網頁

1996年12月發表的CSS1的要求有（W3C管理CSS1要求）：

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

CSS2-2.1

1998年5月W3C發表了CSS2（W3C管理CSS2要求），其中包括新的內容如：

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

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

CSS3

CSS3正在發展中。W3C發表一個CSS3發展過程報告。

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

CSS3 裏增加了不少功能，如︰「border-radius」、「text-shadow」、「transform」以及「transition」。

div{
    border-radius:10px;
    text-shadow:0px 2px 2px #AAA;
    box-shadow:0px 3px 10px #AAA;
    transform:rotate(-15deg);
}

↑ 把 <div> 圓角半經10像素（px），反時針旋轉15度，加上2像素（px）的文字陰影，並加上10像素（px）的灰色陰影。

但由於現時不同瀏覽器仍需要加上不同的前綴，所以需要寫成這樣︰

div{
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;

    text-shadow:0px 2px 2px #AAA;

    -webkit-box-shadow:0px 3px 10px #AAA;
    -moz-box-shadow:0px 3px 10px #AAA;
    box-shadow:0px 3px 10px #AAA;

    -webkit-transform:rotate(-15deg);
    -moz-transform:rotate(-15deg);
    -ms-transform:rotate(-15deg);
    -o-transform:rotate(-15deg);
    transform:rotate(-15deg);
}

↑ 部分屬性在Firefox需要加上-moz-、Safari以及Google Chrome需加上-webkit-、Opera需加上-o-、Internet Explorer 9裏部份需加上-ms-。

這是一個CSS3 的示範。
連結︰
　維基百科

上面是一個CSS3 的示範。注意div裏的連結仍可按下。

CSS3 亦支援動畫（animation）及立體（preserved-3d）。但是現時（2012年）只有內有 Webkit 的瀏覽器如 Safari 及 Google Chrome，基於 Trident 的 Internet Explorer 10，和基於 Gecko 的 Firefox (10 及以上版本)等瀏覽器支援。

CSS3 3D
連結︰
　維基百科

HTML代碼

<div style="-webkit-perspective:500;position:relative;margin-left:50px;width:108px;height:108px;border:1px solid black;-webkit-box-shadow: inset 0px 0px 15px #aaa;-moz-box-shadow: inset 0px 0px 15px #aaa;box-shadow:inset 0px 0px 15px #aaa;">
 <div style="position:relative;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;">
  <div style="width:100px;height:100px;border:1px solid black;padding:3px;background:orange;-webkit-transform:rotateY(40deg);-ms-transform:perspective(500px) rotateY(40deg);-moz-transform:perspective(500px) rotateY(40deg);transform:perspective(500px) rotateY(40deg);">
   <p>CSS3 3D<br />
   連結︰<br />
　   <span class="plainlinks"><a class="external text" href="https://zh.wikipedia.org/">維基百科</a></span></p>
  </div>
 </div>
</div>

上面是一個CSS3 立體的示範，如果你現在使用的是內有 Webkit 的瀏覽器（如 Safari（包括iPhone等）及 Google Chrome）, Firefox 10+ 或者 Internet Explorer 10 Developer/Consumer/Release preview 便能看到。
該div沿Y 軸立體旋轉了40度。注意div裏的連結仍可按下。

CSS4

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

CSS4增加了一些更方便的方法以選擇不同元素︰

選擇目標

$ul li.clicked {
    background: white;
}

CSS4裏其中一項新功能就是能夠定義於Selection Chain裏哪一個是目標^[11]。於上例裏，ul前面加了一個$號，代表它就是要改變的目標，即「把裏面有li（class是clicked）的ul的底色轉為白色。」

:matches()

:matches(div, p, nav) span{
  font-size: 18px;
}

CSS4裏其中另一項新功能就是能夠是用:matches()來簡化選擇器。上方的例子等如︰

div span, p span, nav span{
  font-size: 18px;
}

事實上現在已有瀏覽器支援類似的功能，如Firefox和Webkit︰^[12]

/*Firefox使用-moz-前綴*/
-moz-any(div, p, nav) span{
  font-size: 18px;
}
/*Webkit使用-webkit-前綴*/
-webkit-any(div, p, nav) span{
  font-size: 18px;
}

採納的困難

儘管CSS1規格1996年就完成了，但一直到三年後還沒有一個瀏覽器徹底實現了這些規格。2000年3月出版的微軟在麥金塔電腦上運行的Internet Explorer 5.0是第一個徹底貫徹CSS1的瀏覽器。此後許多其他瀏覽器也貫徹了CSS1和CSS2的一部分。但到2004年為止還沒有一個瀏覽器徹底貫徹了CSS2。尤其 aural 和 paged 等特性是被支援得最差的。

即使徹底貫徹了CSS1的瀏覽器也遇到了許多困難。許多CSS的貫徹互相矛盾、有錯或有其他稀奇古怪的地方。為了使他們的頁面在所有的瀏覽器中、在所有的系統上的顯示相同，作者往往要使用特別的技巧或解決特殊的困難。一個最著名的錯誤涉及到顯示方形的寬度，在Internet Explorer瀏覽器中方形的寬度的顯示有錯誤，其結果是方形的寬度在許多瀏覽器中被正確地顯示，但在Internet Explorer上方形的寬度太窄。雖然這個錯誤有解決的辦法，但它限制了其他一些功能（Internet Explorer 8.0已改善方形寬度顯示問題）。

作用

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:bold italic 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>

一個讀者定義的樣式表的例子

檔案 highlightheaders.css 的內容是：

H1 {color: white; background: orange !important; }
H2 {color: white; background: green !important; }

這樣的檔案被貯存在讀者的電腦內，他在瀏覽器內記錄下顯示時使用這個檔案。 !important 表示在顯示時使用讀者的規定，而不是作者的規定。

注意

有時一個網頁的作者會濫用CSS。有些習慣於只使用HTML的作者可能會忽視CSS提供的可能性。比如有些習慣於使用HTML的顯示元素的作者可能會在所有的HTML檔案內加入CSS樣式。這比將HTML顯示和結構指令混在一起是一個進步，但它還是有許多同樣的缺點，而且維護時的工作量與混合使用差不多。

CSS與其他程式語言有着一些共同的陷阱。尤其在命名CSS的 id 和 class 時，CSS作者常選擇一個比較有說明性的名稱而使用顯示特徵作為它們的名稱。比如一個作者可能使用「big-red」來命名一個用大紅字體的突出顯示的位元組。在當時，對作者來說這個名稱可能是很直覺的，但假如後來作者決定突出顯示的位元組應該使用綠色，而不是紅色的話，他的命名就有毛病了。在上面這個例子中，一個更合適的名稱應該是「emphasized」（強調），它描寫的是這個「class」的用意，而不是它是如何被顯示的。

另一個毛病是未記錄的、未定義的和往往會被遺忘的名稱。一個網頁作者可能會選擇上百個名稱。名稱如footer、footnote或者explanation、note、info、more可能是指同一回事。這樣許多重複的名稱就出現了。有時一個複雜的網站的設計者可能會結合HTML和CSS來解決這個問題，但這樣一來他又把內容與顯示黏有一起了，而且這樣一來這個檔案就只適合於某一媒體了。（外部樣式表的一個大優點就是它是跨媒體的，因為不同的樣式可以特別適用於不同的輸出媒體。）

HTML本身的複雜性是另一個困難處。雖然大部分使用CSS的檔案比傳統的使用表格的檔案要整潔，但過分使用class和過於細膩的結構層次同樣使HTML變得繁庸。此外有的作者過分使用 div 元素。

另一個陷阱是為了解決常見的瀏覽器錯誤而引入特別的CSS樣式，這些樣式當然是為了除錯而引入的，但它們使一個CSS檔案的維護效能降低，有時這樣的CSS檔案的維護量甚至比過去的HTML檔案的維護量還大。常見的特別CSS樣式多是針對Internet Explorer （尤其IE 6、IE7 等舊版本）的顯示錯誤而額外編寫。

有時一個作者可能會過度地使用CSS來決定他的檔案應該怎樣被顯示，如：一個作者會決定隱藏超連結底下的橫線，這很容易做到，但對瀏覽者來說這可能會帶來不便。

有些新的CSS3 樣式尚未成為標準，因此在使用時需要加上前綴（Prefix），使其可以在採用不同排版引擎的瀏覽器中正確顯示。但於 Internet Explorer 10 Release Preview 起, transform, transition, animation 和 gradient 漸變等屬性均可不加字首。^[13]^[14]例如使用transition 時，需要額外撰寫四行編碼：

-webkit-transition: height 0.2s linear;　/* 針對使用WebKit排版引擎的瀏覽器，如Google Chrome、Apple Safari */
-moz-transition: height 0.2s linear;　/* 針對使用Gecko排版引擎的瀏覽器，如Mozilla Firefox */
-o-transition: height 0.2s linear;　/* 針對使用Presto排版引擎的瀏覽器，如Opera */
-ms-transition: height 0.2s linear;　/* MSIE, 但 Release Preview 起可以不用前缀 */
transition: height 0.2s linear;　/* CSS3標準，放最後 */

CSS 的大小因此增大，到這些 CSS 樣式不需前綴時，又需要額外花時間把它們刪除。

缺點

CSS明顯的缺點包括：

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

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

不能明確地指定繼承性
樣式的繼承性，建立在瀏覽器中DOM元素的層級和具體的規則上，參照CSS2說明中的章節6.4.1。^[16]

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

沒有算術功能

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

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）的。

參考文獻

^ ^1.0 ^1.1 CSS Reference. Mozilla Developer Network （英語）.
^ http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_attribute_att
^ https://developer.mozilla.org/en/CSS/Attribute_selectors
^ http://msdn.microsoft.com/zh-cn/library/aa770071(v=vs.85)
^ 常用CSS縮寫語法總結
^ Bert Bos. Descriptions of all CSS specifications. World Wide Web Consortium. 2011-02-18.
^ W3C︰http://www.w3.org/2011/05/css-pr.html.en
^ http://www.w3.org/TR/2011/WD-selectors4-20110929/
^ http://www.webmonkey.com/2011/10/discover-whats-new-in-css-4/
^ https://developer.mozilla.org/en/CSS/pointer-events
^ http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject
^ http://www.webmonkey.com/2011/04/simplify-your-css-with-the-any-selector/
^ Unprefixed CSS3 Gradients in IE10
^ Moving the Stable Web Forward in IE10 Release Preview
^ Internet Explorer vs. the Standards, a primer on standards violations in Explorer
^ Assigning property values, Cascading, and Inheritance
^ http://www.w3.org/TR/CSS21/visuren.html#viewport
^ CSS Values and Units Module Level 3. W3C. 2012-08-28 （英語）.
^ CSS Values and Units Reference. MSDN （英語）.
^ calc. Mozilla Developer Network （英語）.

參見

外部連結

[mozillacssref-1] 1.0 ^1.1 CSS Reference. Mozilla Developer Network （英語）.

[2] ttp://www.w3school.com.cn/tiy/t.asp?f=csse_selector_attribute_att

[3] ttps://developer.mozilla.org/en/CSS/Attribute_selectors

[4] ttp://msdn.microsoft.com/zh-cn/library/aa770071(v=vs.85)

[5] 常用CSS縮寫語法總結

[6] Bert Bos. Descriptions of all CSS specifications. World Wide Web Consortium. 2011-02-18.

[7] W3C︰http://www.w3.org/2011/05/css-pr.html.en

[8] ttp://www.w3.org/TR/2011/WD-selectors4-20110929/

[9] ttp://www.webmonkey.com/2011/10/discover-whats-new-in-css-4/

[10] ttps://developer.mozilla.org/en/CSS/pointer-events

[11] ttp://www.w3.org/TR/2011/WD-selectors4-20110929/#subject

[12] ttp://www.webmonkey.com/2011/04/simplify-your-css-with-the-any-selector/

[13] Unprefixed CSS3 Gradients in IE10

[14] Moving the Stable Web Forward in IE10 Release Preview

[15] Internet Explorer vs. the Standards, a primer on standards violations in Explorer

[16] Assigning property values, Cascading, and Inheritance

[17] ttp://www.w3.org/TR/CSS21/visuren.html#viewport

[18] CSS Values and Units Module Level 3. W3C. 2012-08-28 （英語）.

[19] CSS Values and Units Reference. MSDN （英語）.

[20] . Mozilla Developer Network （英語）.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

閱論編網頁技術與標準
文件呈現語言	HTML（HTML5） XHTML* XML* XForms* DHTML
樣式格式描述語言	CSS* XSL*
動態網頁技術	CGI FastCGI ASP ASP.NET ColdFusion JSP Perl（PSGI） Python（WSGI） Ruby Smalltalk PHP
用戶端互動技術	JavaFX AJAX（XMLHTTP） WebSocket ActionScript（Flash Flex AIR） Asm.js NaCl WebAssembly* ActiveX Java applet
用戶端手稿語言	ECMAScript（JavaScript，JScript） VBScript
標識定位語言	URL URI XPath URL重寫
文件綱要語言	DTD* XML Schema*
* 代表由W3C制定和維護的標準與規範