CSS

階層式樣式表是一種用來為結構化文件的計算機語言，由W3C定義和維護。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發中。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。概述.CSS不能單獨使用，必須與HTML或XML一起協同工作，為HTML或XML起裝飾作用。本文主要介紹用於裝飾HTML網頁的CSS技術。其中HTML負責確定網頁中有哪些內容，CSS確定以何種外觀(大小、粗細、顏色、對齊和位置)展現這些元素。CSS可以用於設定頁面佈局、設定頁面元素樣式、設定適用於所有網頁的全域性樣式。CSS可以零散地直接新增在要應用樣式的網頁元素上，也可以集中化內置於網頁、連結式引入網頁以及匯入式引入網頁。CSS最重要的目標是將檔案的內容與它的顯示分隔開來。在CSS出現前，幾乎所有的HTML檔案內都包含檔案顯示的資訊，比如字型的顏色、背景應該是怎樣的、如何排列、邊緣、連線等等都必須一一在HTML檔案內列出，有時重複列出。CSS使作者可以將這些資訊中的大部分隔離出來，簡化HTML檔案，這些資訊被放在一個輔助的，用CSS語言寫的檔案中。HTML檔案中只包含結構和內容的資訊，CSS檔案中只包含樣式的資訊。比如HTML中codice_1標誌這一個二級標題，它在級別上比一級標題codice_2低，比三級標題codice_3高。這些資訊都是結構上的資訊。一般來說級別越高的標題其字型也越大，codice_2的字型最大，因為一般來說字型越大它表示的內容就越重要，此外一般標題都使用粗體字，來突出它們的重要性。一般來說codice_1使用粗體字，其字型比codice_3大，比codice_2小。這些資訊是顯示用的資訊。在CSS出現前，假如作者要確定codice_1標題的顏色、字形、大小或其他顯示特徵的話，他要使用HTML中的codice_9或其他樣式指令，光codice_1不夠，因為codice_1只是一個結構指令。假如一個標題要用斜體字、紅色的字元、白色的底色的話，作者要這樣寫：codice_12這些顯示用的指令使得一個HTML變得非常複雜，要維護也比較困難。假如所有的二級標題都要這樣來顯示的話，所有的二級標題的指令都要這麼複雜。此外讀者無法改變這些規定，假如一個讀者更喜歡藍色的標題的話，他無法改變標題的顏色，因為檔案的作者特別規定了標題的顏色。使用CSS的話codice_1指令只規定文章的結構，其顯示由樣式表來規定，上面的例子可以變成這樣：codice_12服從的樣式表可以規定codice_1指令使用斜體字，紅色字和白色背景：codice_16這樣顯示與內容就分開了。HTML只表達文章的結構，CSS表達所有的顯示。CSS可以指示顏色、字形、排列、大小以及其他許多非視覺的表達方式，比如將一篇檔案的內容讀出來。CSS樣式資訊可以包含在一個附件中或包含在HTML檔案內。讀者可以使用多個樣式表，在重複的情況下他可以選擇其中之一。不同的媒介可以使用不同的樣式表。比如一個檔案在熒光屏上的顯示可以與在印表機中打印出來的顯示不同。這樣作者可以為不同的媒體設計最佳的顯示方式。此外CSS的目標之一是讓讀者有更大的控制顯示的自由。假如一個讀者覺得斜體字的標題讀起來很困難，他可以使用自己的樣式表文件，這個樣式表可以“層疊”使用，他可以只改變紅色斜體字這個樣式而保留所有其他的樣式。包含CSS的XHTML檔案示例."http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;body{background:#fff;color:#777;h1{font-weight:bold;font-style:italic;font-family:sans-serif;color:green;這個句子用大的、紅色斜體字在綠色背景上顯示，通用的h1樣式在這裡被取代了。主要內容.CSS由多組「規則」組成。每個規則由「選擇器」組成：屬性和值之間用半形冒號隔開，屬性和值合稱為「特性」。多個特性間用“;”隔開，最後用“{ }”括起來。選擇器.要針對沒有標籤定義範圍進行樣式設定時，可利用codice_17與codice_17標籤CSS裡現在共有5種基本選擇器和2種偽選擇器。不同選擇器的優先級別和運作效能往往存在差異。屬性選擇器.屬性選擇器允許使用者自定義屬性名稱，而不僅僅限於id，class屬性。屬性選擇器共有7種。組合選擇器.CSS裡現在共有4種組合選擇符：選擇器使用示例.例子：p{font-size: 110%;font-family: garamond, sans-serif;h2{color: red;background: white;.highlight{color: red;background: yellow;font-weight: bold;在這個例子中有三個選擇器：codice_24、codice_25和codice_26，codice_27是一個定義，其中codice_28是屬性，codice_29是codice_28的值。在這裡HTML中的結構codice_31獲得了不同的樣式。每個段落的字型的大小比包含這個段落的結構的字型的大小要大10%，其字形是codice_33，假如codice_33沒有的話那麼使用一般的codice_35字形。2級標題的字用紅色，底面是白色的。這個例子中的第三個規則規定了一個codice_36的樣式。透過codice_36屬性每個HTML結構都可以被指定為這個codice_36，例如：顯示為這個段落將被顯示為黃底紅字粗體。除使用codice_39之外，也可於HTML內直接使用codice_40︰這個段落同樣會被顯示為黃底紅字粗體。其它選擇器.CSS中還提供了偽元素選擇器和虛擬類別選擇器，但用途單一一些，常與其它選擇器組合在一起使用。偽元素的元素主要用於選取與另一個選擇器選中物件臨近的元素。虛擬類別選擇器用於選中處於特定狀態或具有特定性質的元素。引入CSS規則的多種方式及其層疊性.CSS可以有多種引入方式，一個網頁可以引入多個CSS檔案，同一種CSS規則可以被反覆多次新增。這使得CSS的使用方式非常靈活，但也會頻繁地出現規則衝突。同時對一個網頁元素設定無法並存的2種樣式時，就會引起衝突。CSS的特色之一就是其解決規則衝突的方案。CSS的規則衝突可以分為不同間的規則衝突和同一部的規則衝突。CSS分層次、立體化的比較不同規則的優先順序的方式，就是所謂層疊性(cascading)的體現。首先說多樣性，CSS資訊可以來自：其次還需知道規則特殊性(specificity)的概念。某個規則的特殊性也常被稱為該規則的具體程度。規則特殊性的高低次序如下：特殊性優先原則.特殊性優先原則是最重要的優先順序比較規則。當引起衝突的2種規則的特殊性存在差異時，引擎將優先採用特殊性更高的樣式。規則的特殊性的比較是最優先的。如果能直接判斷出特殊性的差異，就無需考慮其它規則了。不同規則優先性.不同規則之間的優先原則是第二重要的。當規則同時，下一步就需要比較不同型別優先級別。總地來說，記住“行內樣式優先於內部樣式，內部樣式又優先於外部樣式”即可應對多數常見的情形。像網頁瀏覽者自定義樣式表的優先級別如何，只有瀏覽器的設計者才需要考慮，與網頁設計者的關係不大。如果考慮有可能出現的更復雜的突，內容就比較多了。但一般在寫樣式時，應儘可能避免這些複雜情形的出現。具體來說，一般情形下的採納樣式效果的優先順序順序為：CSS中還有用codice_41修飾的重要性宣告。如果計入重要性宣告，那麼在以上規則的最前面還需要加上2條規則：設計重要性宣告是為部分特殊使用者和所有開發者提供方便。一方面，使用者可以透過設定自己的色彩方案，並對其使用重要性宣告來提升瀏覽體驗。另一方面，網頁的設計者難免會遇到因規則衝突而導致特定樣式規則失效的情形，設計者可以透過給不知何故不起作用的規則增加重要性宣告，看看是否有樣式變化來確定是否是不小心導致了規則衝突而引起特定規則被覆蓋失效。權重分數比較機制.有時還會遇到選擇器優先順序無法直接判斷，而且規則的相同的情形。如果網頁設計者很少使用層次比較複雜的選擇器。此時，CSS還有一套分數加權(或者說是分數累積)的機制用於解決此類規則衝突。先列出基本的分值：組合使用多個基本選擇器時，不同選擇器的得分會累加到一起。最終得分高的選擇器，其指定的樣式會勝出。舉例：codice_48codice_49假設這2行程式碼都能夠選中同一個ID為“id3”的元素，且都是出自同一樣式表。可以看到，二者使用的優先順序最高的選擇器都是ID選擇器，起衝突的樣式設定是字型顏色。一個給此元素設定字型顏色為綠色，另一個給此元素設定字型顏色為藍色。按照評分規則，因為前一種程式碼使用了1個類選擇器和1個id選擇器，所以得分為10+100=110分；後一種程式碼使用了2個標籤選擇器和1個id選擇器，所以得分為1+1+100=102分。因為110分&gt;102分，所以前一種規則勝出，目標元素的最終文字顏色應該是綠色。靠後者優先原則.當權重比較仍然不能分出優先順序勝負時，最後就是把守關底的“靠後優先”的原則了，也就是後定義的樣式優先順序較高。如果起衝突的規則同，而且得分也相同，那麼最後的衝突解決法則就是看CSS程式碼出現的先後順序。後出現的規則會覆蓋掉與之優先順序相當的先出現的規則。也可稱作“後發制人”、“後來者居上”或“後浪推前浪”原則，隨便你怎麼稱呼。這種原則的適用情形很常見，所以此規則也很重要。浮動與定位.包含塊、定位.包含塊是CSS定位屬性所依託的理論模型。層次與層疊上下文.層疊上下文規則決定了當有網頁元素位置發生部分重合時，重合部分的上下疊放次序。層疊上下文規則詳細規定了當浮動、定位以及z軸數值同時出現時，元素疊放次序的總規則。格式化上下文.格式化上下文有特殊的佈局性質，巧妙建立格式化上下文可以解決方便地達到幾種特殊目的：其它.CSS檔內也可以包含注釋，注釋放在codice_50和codice_51之間。一般的瀏覽器也識別以雙斜槓(codice_52)開頭的這種註釋，但是這是不規範的做法。歷史.發展歷史.早期樣式錶的歷史.HTML規範雖然規定了網頁中的標題、段落應該使用的標籤，但是沒有涉及這些內容應該以何種樣式(比如大小、位置、間距、縮排等屬性)呈現在瀏覽器中。從1990年代初HTML被髮明開始，樣式表就以各種形式出現了。不同的瀏覽器結合了它們各自的樣式語言，讀者(也就是瀏覽網頁的使用者)可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網頁應該怎樣被顯示。1993年，Robert Raisch提出了一種名為“RRP”的樣式規則建議。但這個RRP只允許網頁使用1個樣式表，不像現在的CSS能支援同時載入多個。不久後出現的Mosaic瀏覽器就採用增加新種類的HTML標籤實現樣式的表達，以滿足設計師的要求，這也與現在的CSS設計原則不符。隨著HTML自帶的樣式功能的增加，外來定義樣式的語言逐漸減弱了。1993年釋出的這個Mosaic瀏覽器是第一款使用者介面，並支援書籤、圖示按鈕和圖片顯示。之前的瀏覽器都是純文字瀏覽器。即使在今天，只使用作業系統命令列自帶的Telnet命令，也可以檢視網頁的原始碼。後來，臺灣人魏培源開發的ViolaWWW瀏覽器使用了一種規則具有層次巢狀性的樣式表，並第1個支援透過codice_45標籤引用外部樣式表。FOSI最早支援以相對尺寸值來表示字型大小。函式式風格的DSSSL語言支援在樣式表中進行定義變數、繼承變數、定義函式等功能，但是語法複雜。1994年，全球資訊網之父蒂姆·伯納斯-李在歐美眾多高能物理研究者和技術人員的支援下，於美國麻省理工學院創立了全球資訊網聯盟。PSL 96除表達樣式外，也支援條件判斷等功能，還可根據對瀏覽器資訊的判斷來使用不同的樣式，但未獲得青睞。CSS的誕生與發展.1994年，哈肯·維姆·萊提出了CSS的最初建議。伯特·波斯當時正在設計一個叫做的瀏覽器，他們決定一起合作設計CSS。當時已經有過一些樣式表語言的建議了，但CSS是第一個含有“層疊”的主意的。在CSS中，一個檔案的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。哈肯·萊於1994年在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。當時W3C剛剛建立，W3C對CSS的發展很感興趣，它為此組織了一次討論會。哈肯、波斯和其他一些人是這個專案的主要技術負責人。1996年底，CSS已經完成。1996年#重定向1997年初，W3C組織了專門管CSS的工作組，其負責人是克里斯·裡雷。這個工作組開始討論第1版中沒有涉及到的問題，其結果是1998年5月出版的第2版規則。網頁標準計劃的7位成員成立了“CSS武士團”，指出Opera瀏覽器和IE瀏覽器在支援CSS方面存在的諸多問題。Opera公司著手解決了問題，但微軟並未解決。網頁標準計劃也積極勸說網景公司和Macromedia公司分別改進其產品對CSS標準的支援。2003年，Dave Shea推出了一個名為“CSS禪意花園”("CSS Zen Garden")的站點，向人們展示出僅透過應用不同頁面樣式規則，就可以實現對網頁藝術風格的煥然一新。這個網站在網頁設計相關人群中產生了不小影響。從2006年到2009年，“DIV+CSS”佈局逐步取代缺乏靈活性的傳統表格佈局，無表格網頁設計成為網頁內容佈局的主流方案。此時也出現了一些為了跟風而濫用DIV佈局的情況，比如將codice_54和codice_55等本身已有語義的標籤也改用codice_56標籤替代。CSS3引入的簡單動畫功能使得CSS也開始涉足以往只應由JavaScript負責的效果互動工作。到2017年為止，第3版規則還未完備。版本歷史.CSS1.於1994年，哈肯·維姆·萊和伯特·波斯合作設計CSS。他們在1994年首次在芝加哥的一次會議上第一次展示了CSS的建議。1996年12月發表的CSS1的要求有：CSS2-2.1.1998年5月W3C發表了CSS2，其中包括新的內容如：CSS2.1修改了CSS2中的一些錯誤，刪除了其中基本不被支援的內容和增加了一些已有的瀏覽器的擴充套件內容。CSS3.CSS3標準已部分公佈，但仍未全部制訂完畢，還會有其它新內容繼續加入。W3C網站上有專頁展示CSS3發展的進展。CSS3分成了不同類別，稱為「modules」。而每一個「modules」都有於CSS2中額外增加的功能，以及向後相容。CSS3早於1999年已經開始制訂。直到2011年6月7日，CSS 3 Color Module終於發布為W3C Recommendation。CSS3裡增加了不少功能，如：「border-radius」、「text-shadow」、「transform」以及「transition」。CSS3亦支援動畫。部分屬性，由於現時不同瀏覽器支援程度不同，需要加上不同的瀏覽器字首來區分。CSS4.W3C於2011年9月29日開始了設計CSS4。直至現時只有極少數的功能被部分網頁瀏覽器支援，如使用在HTML而非SVG上的pointer-events。CSS4增加了一些更方便的選擇器，並簡化了一些現有選擇器的用法。採納的困難.瀏覽器核心主要負責解析網頁內容樣式以及進行指令碼處理。其中頁面渲染就是正確識別出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、幽靈字元，方塊神秘消失等稀奇古怪的設計缺陷。微軟自從在第1輪瀏覽器大戰中勝出後，就依仗獨霸市場的優勢，輕視修補IE Bug的呼聲，導致其市場份額後來又逐漸被其它瀏覽器蠶食，產生第2輪瀏覽器大戰。另外還有程式碼跨瀏覽器相容性的問題。“能夠在任何瀏覽器中顯示”並不意味著“在任何一個瀏覽器中顯示的效果相同”。即使是徹底實現了CSS1的瀏覽器也遇到了許多困難。許多CSS的實現機制互相矛盾、有錯或有其它稀奇古怪的地方。為了使他們的頁面在任意系統上的任意瀏覽器中的顯示效果一致，網頁作者往往要被迫寫出繁瑣的程式碼或使用各種奇技淫巧。一個最著名的錯誤涉及到顯示方形的寬度，在IE瀏覽器中方形的寬度的顯示有錯誤，其結果是方形的寬度在許多瀏覽器中被正確地顯示，但在IE上方形的寬度太窄。雖然這個錯誤有解決的辦法，但它限制了其他一些功能。舊版IE還有與其它瀏覽器計算方式不一樣的方盒模型。特點.優勢.網頁的讀者和作者都可以使用CSS來決定檔案的顏色、字型、排版等顯示特性。CSS最主要的目的是將檔案的內容與顯示分隔開來。這有許多好處：另外，在HTML中：CSS還可以控制其他引數，例如聲音或給視障者用的感受裝置。缺點.CSS明顯的缺點包括：p {margin: calc (1rem - 2px) calc (1rem - 1px)CSS的效能最佳化.使用語法縮寫.使用CSS縮寫可以減少CSS檔案的大小，並使其更為易讀。例如：顏色縮寫、盒尺寸縮寫、邊框縮寫、背景縮寫和文字縮寫。