Cascading Style Sheets（層疊樣式表／串樣式列表），簡寫為CSS，由W3C定義和維護的標準，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字型、間距和顏色等）的電腦語言。目前最新版本是CSS 2.1，為W3C的候選推薦標準。下一版本CSS 3仍然在開發過程中。
概述
一個網頁的讀者和作者都可以使用CSS來決定檔案的顏色、字型、排版等顯示特性。CSS最主要的目的是將檔案的結構（用HTML或其他相關的語言寫的）與檔案的顯示（CSS）分隔開來。這個分隔有許多好處：
1.檔案的可讀性被加強
2.檔案的結構更加靈活
3.作者和讀者可以自己決定檔案的顯示
4.檔案的結構簡化了。
CSS還可以使用其他的顯示方式，比如聲音（假如瀏覽器有閱讀功能的話）或給視障者用的感受裝置。此外CSS還可以與XHTML、XML或其他結構檔案一起使用，唯一條件是顯示這種檔案的瀏覽器裝備了接受CSS的功能。HTML檔案中的每一個class或id都可以有自己的顯示特徵，而且每一個沒有id特性的HTML結構也可以有自己的顯示特徵。這些結構有的是HTML自己需要的，有的是專門為CSS設定的。 CSS資訊可以來自：
作者樣式
作者可以在他的HTML檔案中確定一個外來的、獨立的CSS檔案
作者可以將CSS資訊包含在HTML檔案內
作者可以在一個HTML指令內結合CSS指令，這樣做一般是為了在一個特殊情況下將總體的CSS指令抵消掉
讀者樣式
讀者可以在他的瀏覽器內設立一個地區性的CSS檔案。這個CSS檔案可以用在所有的HTML檔案上。假如作者的CSS檔案與讀者的相衝突，那麼讀者可以確定他想使用哪個
瀏覽器的樣式
假如外部沒有特別指定一個樣式的話，一般瀏覽器自己有一個內在的樣式
使用CSS的優點有：一個整個網站或其中一部分網頁的顯示資訊被集中在一個地方，要改變它們很方便
不同的讀者可以有不同的樣式，比如有的讀者需要字型比較大
HTML檔案本身的範圍變小了，它的結構簡單了，它不需要包含顯示的資訊
樣式規則
CSS的語法很簡單，它使用一組英語詞來表示不同的樣式和特徵。一個式樣表由一組規則組成。每個規則由一個「選擇器」（selector）和一個定義部分組成。每個定義部分包含一組由半形分號（;）分離的定義。這組定義放在一對大括弧（{ }）之間。每個定義由一個特性，一個半形冒號（:）和一個值組成。
選擇器（Selector）
通常為檔中的元素（element），如HTML中的<body>，<p>，<strong>等標籤，多個選擇器可以半形逗號（,）隔開。
屬性（property）
CSS1、CSS2、CSS3規定了許多的屬性，目的在控制選擇器的樣式。
值（value）
指屬性接受的設定值，可由各種關鍵字（keyword）組成，多個關鍵字時大都以空格隔開。
要針對沒有標籤定義範圍進行樣式設定時，可利用<div>與<span>標籤
例子：
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>
CSS檔內也可以包含注釋，注釋以/*開始，以*/結尾，例如： /*注釋*/
縮寫規則
使用CSS縮寫可以減少CSS檔案的大小，並使其更為易讀[1]，例如：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;
歷史
從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規格1996年就完成了，但一直到三年後還沒有一個瀏覽器徹底實現了這些規格。2000年3月出版的微軟在麥金塔電腦上執行的Internet Explorer 5.0是第一個徹底貫徹CSS1的瀏覽器。此後許多其他瀏覽器也貫徹了CSS1和CSS2的一部分。但到2004年為止還沒有一個瀏覽器徹底貫徹了CSS2。尤其aural和paged等特性是被支援得最差的。即使徹底貫徹了CSS1的瀏覽器也遇到了許多困難。許多CSS的貫徹互相矛盾、有錯或有其他稀奇古怪的地方。為了使他們的頁面在所有的瀏覽器中、在所有的系統上的顯示相同，作者往往要使用特別的技巧或解決特殊的困難。一個最著名的錯誤涉及到顯示方形的寬度，在Internet Explorer瀏覽器中方形的寬度的顯示有錯誤，其結果是方形的寬度在許多瀏覽器中被正確地顯示，但在Internet Explorer上方形的寬度太窄。雖然這個錯誤有解決的辦法，但它限制了其他一些功能（最新版8.0已改善方形寬度顯示問題）。
使用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檔案的例子
<?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>這個句子用綠色、粗體和斜體字顯示</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作者常選擇一個比較有說明性的名稱而使用顯示特徵作為它們的名稱。比如一個作者可能使用bigred來命名一個用大紅字體的突出顯示的位元組。在當時，對作者來說這個名稱可能是很直覺的，但假如後來作者決定突出顯示的位元組應該使用綠色，而不是紅色的話，他的命名就有毛病了。在上面這個例子中，一個更合適的名稱應該是emphasized，它描寫的是這個class的用意，而不是它是如何被顯示的。另一個毛病是未記錄的、未定義的和往往會被遺忘的名稱。一個網頁作者可能會選擇上百個名稱。名稱如footer、footnote或者explanation、note、info、more可能是指同一回事。這樣許多重複的名稱就出現了。有時一個複雜的網站的設計者可能會依賴在HTML檔案內與HTML指令結合的CSS指令來解決這個問題，但這樣一來他又把內容與顯示黏有一起了，而且這樣一來這個檔案就只適合於某一媒體了。（外部樣式表的一個大優點就是它是跨媒體的，因為不同的樣式可以特別適用於不同的輸出媒體。）HTML本身的複雜性是另一個困難處。雖然大部分使用CSS的檔案比傳統的使用表格的檔案要整潔，但過分使用class和過於細膩的結構層次同樣使HTML變得繁庸。此外有的作者過分使用div指令。另一個陷阱是為了克服常見的瀏覽器錯誤而引入特別的CSS指令，這些指令當然是為了克服已知的錯誤而引入的，但它們使一個CSS檔案的維護性能降低，有時這樣的CSS檔案的維護量甚至比過去的HTML檔案的維護量還大。有時一個作者可能會過度地使用CSS來決定他的檔案應該怎樣被顯示，如：一個作者會決定隱藏超連結底下的橫線，這很容易做到，但對讀者來說這可能會是一個不方便。
CSS的要求
1996年12月發表的CSS1的要求有：支援字型的大小、字形、強調
支援字的顏色、背景的顏色和其他元素
支援文章特徵如字母、詞和行之間的距離
支援文字的排列、影像、表格和其他元素
支援邊緣、圍框和其他關於排版的元素
支援id和class
W3C管理CSS1要求1998年5月W3C發表了CSS2，其中包括新的內容如絕對的、相對的和固定的定位元素、媒體型的概念、雙向檔案和一個新的字型。W3C管理CSS2要求CSS2.1修改了CSS2中的一些錯誤，刪除了其中基本不被支援的內容和增加了一些已有的瀏覽器的擴充功能內容。它現在是一個要求候選者。CSS3正在發展中。W3C發表一個CSS3發展過程報告。
CSS的限制
使用「完整」的CSS的缺點包括：
瀏覽器支援的不一致性
瀏覽器的漏洞或缺乏支援的CSS功能，導致不同的瀏覽器顯示出不同的CSS版面編排。例如在微軟Internet Explorer 6.0的舊版本 ，執行了許多自己的CSS 2.0屬性，曲解了很多重要的屬性，例如：width，height，和float。許多所謂的CSS人員，必須在最熱門的或常用的瀏覽器中達到一致的版面編排。在不同的瀏覽器中，要達到像素精準的版面編排，有時候是不可能的。
CSS沒有父層選擇器
CSS選擇器無法提供元素的父層或繼承性，以符合某種程度上的標準。先進的選擇器（例如XPath）有助於複雜的樣式設計。然而，瀏覽器的性能和增加彩現的問題關係著父層選擇器，卻是CSS的工作群組拒絕建議的主要原因。
不能明確地指定繼承性
樣式的繼承性，建立在瀏覽器中DOM元素的層級和具體的規則上，參照CSS2說明中的章節6.4.1。
垂直控制的侷限
元素的水平放置普遍地易於控制，垂直控制則非憑直覺性的、較迂迴的甚至是不可能的。簡單來說，例如：垂直地圍繞一個元素、頁尾的放置不能高於可見視窗（viewport，視窗或螢幕的可見範圍[4]）的底部範圍、需要複雜而非憑直覺性的樣式規則，或是簡單但不被廣泛支援的規則。
顯示的缺乏
目前的CSS沒有辦法明確又簡單的顯示屬性值（例如：margin-left: 10% - 3em + 4px;）。這在很多情況下都是非常有用的，例如：總欄位中計算欄位的尺寸限制。無論如何，CSS WG[5]發表了CSS侷限性的草案，而Internet Explorer 5以後的版本支援相似功能的語法顯示。
缺乏正交性
同樣的效果可以用不同的屬性來完成，這經常會造成困擾。例如position、display與float定義了不同的配置方式，而且不能有效的交替使用。一個display: table-cell元素不能指定float或是position: relative，因為指定float: left的元素不應該受到display效果的影響。再者，沒有考慮到新建立屬性所造成的影響，例如在表格中你應該使用border-spacing而不是margin-*來指定表格元素。這是因為依照CSS準則，表格內部元素是沒有邊界（margin）的。
沒有留言:
張貼留言