CSS

「CSS」重定向至此。关于其他用法，请见「CSS (消歧义)」。

层叠样式表

扩展名	.css
互联网媒体类型	text/css
开发者	World Wide Web Consortium
首次发布	1996年12月17日​（1996-12-17）
格式类型	样式表语言
标准	第一版 第二版 第二版第一次修订 第三版各模組目前的規格化進度與規格書連結

层叠样式表

• CSS動畫
• CSS盒模型
• CSS濾器
• 无表格网页设计
• 响应式网页设计
• 维基教科书

层叠样式表（英語：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）和 2 种伪选择器。

基本選擇器

• 類型選擇器（h1，p等）——elementname
• 類別選擇器（class）——.elementname
• ID選擇器（ID）——#elementname
• 萬用選擇器——* ns|* *|*
• 屬性選擇器——[attribute]

偽元素選擇器

偽元素可以選擇不在 Document 結構中的資訊。

属性	描述
:after 或 ::after	元素之后
:before 或 ::before	元素之前
:first-letter 或 ::first-letter	文本第一个字母
:first-line 或 ::first-line	文本首行
::selection	鼠标已选择（CSS3）

虛擬類別選擇器

虛擬類別選擇器指的是为不同的状态、性质的元素。

属性	狀態
:link	超链接未被访问
:visited	超链接被访问过
:hover	滑鼠（鼠標）在元素上面
:active	滑鼠（鼠標）在元素上按着
:focus	焦點在元素上
:target	元素被 URL 標記（CSS 3 新增的類別）
:lang	向带有指定lang属性的元素添加样式。

属性选择器

屬性选择器允许用户自定义属性名称，而不仅仅限于id，class属性，参见。屬性选择器共有7種。

代碼	意思
[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）：

符号	标题文字
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在這裡*/"︰

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

缩写

使用 CSS 缩写可以减少 CSS 文件的大小，并使其更为易读，例如：

1. 颜色缩写：16 进制的色彩值，如果每两位的值相同，可以进行缩写，例如：

1. 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;

4.文字缩写

	font-weight: bold;
	font-size: 12px;
	line-height: 1.8em;
	font-family: Arial;

可以缩写为一句： 但文字縮寫一定要具有字型大小、字體樣式這兩個屬性。行高用/分隔

     font:bold 12px/1.8em Arial;

历史

发展历史

从 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 月出版的第二版要求。到 2017 年为止，第三版还未完備。

版本歷史

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的標誌。

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

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);
}

上述 CSS 代码会把

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

瀏覽器差异

部分属性（例如旋转类属性（如：transform），动画类属性，立体类属性），由於現時不同瀏覽器支持程度不同，需要加上不同的浏览器前綴来区分。

对于瀏覽器前缀，Firefox 需要加上-moz-、Safari 以及 Google Chrome 等基于 Webkit 开发的需加上-webkit-、Opera 基于 Presto开发的需加上-o-、Internet Explorer 9 裡部份需加上-ms-。无前缀为 W3C 标准，待各個瀏覽器的实现一致并且标准实现得到规范则全部实现效果一致。

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

旋转类属性示意代码：

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);
}

左侧demo的理想结果。

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

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

---

立体类属性代码示意：

<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>

左侧Demo的理想结果。

CSS3 3D
連結：
　維基百科

• 上面是一個 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。直至現時只有極少數的功能被部分網頁瀏覽器支援，如使用在 HTML 而非 SVG 上的 pointer-events。

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

• 選擇目標

$ul li.clicked {
    background: white;
}

CSS4 裡其中一項新功能就是能夠定義於 Selection Chain 裡哪一個是目標。於上例裡，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︰

/*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、IE 7 等舊版本）的顯示錯誤而額外編寫。

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

有些新的 CSS3 樣式尚未成為標準，因此在使用時需要加上前綴（Prefix），使其可以在採用不同排版引擎的瀏覽器中正確顯示。但于Internet Explorer 10 Release Preview 起, transform, transition, animation 和 gradient 渐变等属性均可不加前缀。例如使用 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。許多 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 标准看齐，并且 expression（）函数性能差，微軟从 IE 8 开始停止支持此函数。但 CSS 3 中具有 calc（）表达式以执行计算功能。例如：

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

參見

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

外部链接

• W3C的CSS首頁
• W3C的CSS校验服务
• CSS4相容性測試