本頁使用了標題或全文手工轉換

階層式樣式表

維基百科,自由的百科全書
前往: 導覽搜尋
CSS
(層疊樣式表)
CSS-shade.svg
副檔名 .css
網路媒體型式 text/css
統一類型標識英語Uniform Type Identifier public.css
開發者 哈肯·維姆·萊伯特·波斯全球資訊網協會
初始版本 1996年12月17日,​20年前​(1996-12-17
格式類型 樣式表語言英語Style sheet language
標準 第一版
第二版
第二版第一次修訂
第三版各模組目前的規格化進度與規格書連結
Html5 css3 styling.svg
層疊樣式表
Wikibooks-logo.svg
您可以在維基教科書中尋找此百科條目的相關電子教程:

層疊樣式表英語: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]

1

偽元素選擇器[編輯]

偽元素可以選擇不在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屬性,參見[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;
}

在這個例子中有三個選擇器:ph2.highlightcolor: red是一個定義,其中color是屬性,redcolor的值。

在這裏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檔案的大小,並使其更為易讀[5],例如:

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的建議。

完全使用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年已開始制訂。[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);
}
上述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的瀏覽器如SafariGoogle Chrome,基於TridentInternet Explorer 10,和基於GeckoFirefox(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
連結:
 維基百科

CSS4[編輯]

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

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

  • 選擇目標
$ul li.clicked {
    background: white;
}

CSS4裡其中一項新功能就是能夠定義於Selection Chain裡哪一個是目標[11]。於上例裡,ul前面加了一個$號,代表它就是要改變的目標,即「把裡面有liclassclicked)的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、IE 7等舊版本)的顯示錯誤而額外編寫。

有時一個作者可能會過度地使用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屬性,但錯誤顯示很多重要的屬性,例如:widthheight,和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編寫人員造成困擾。例如positiondisplayfloat定義了不同的配置方式,而且不能有效的交替使用。一個display: table-cell元素不能指定float或是position: relative,因為指定float: left的元素不應該受到display效果的影響。再者,沒有考慮到新建立屬性所造成的影響,例如在表格中你應該使用border-spacing而不是margin-*來指定表格元素。這是因為依照CSS準則,表格內部元素是沒有邊界(margin)的。

參考文獻[編輯]

參見[編輯]

外部連結[編輯]