CSS

CSS ，全稱即Cascading Style Sheets，也就是層疊樣式表，是一種用來為結構化文檔（如 HTML 文檔或 XML 應用）添加樣式（字體、間距和顏色等）的計算機語言，也是美化網頁的核心，CSS 是一種描述性的樣式語言，因此相對C語言等其他語言邏輯要求很低，其文件擴展名為 .css。

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

在使用HTML定義頁面效果的網站中，往往需要大量或重複的表格和font元素形成各種規格的文字樣式，這樣做的後果就是會產生大量的HTML標籤，從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在載入頁面時使用的時間也會大大的減少。

CSS 選擇器用於「查找」（或選取）要設置樣式的 HTML 元素。我們可以將 CSS 選擇器分為五類：1.簡單選擇器（根據名稱、id、類來選取元素），2.組合器選擇器（根據它們之間的特定關係來選取元素），3.偽類選擇器（根據特定狀態選取元素），4.偽元素選擇器（選取元素的一部分並設置其樣式），5.屬性選擇器（根據屬性或屬性值來選取元素）。

發展歷程

1990年，Tim Berners-Lee和Robert Cailliau共同發明了Web。1994年，Web真正走出實驗室。

從HTML被發明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。

隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。

1994年哈坤·利提出了CSS的最初建議。而當時伯特·波斯（Bert Bos）正在設計一個名為Argo的瀏覽器，於是他們決定一起設計CSS。

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

哈坤於1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年的www網路會議上CSS又一次被提出，博斯演示了Argo瀏覽器支持CSS的例子，哈肯也展示了支持CSS的Arena瀏覽器。

同年，W3C組織（World WideWeb Consortium）成立，CSS的創作成員全部成為了W3C的工作小組並且全力以赴負責研發CSS標準，層疊樣式表的開發終於走上正軌。有越來越多的成員參與其中，例如微軟公司的托馬斯·萊爾頓(Thomas Reaxdon)，他的努力最終令Internet Explorer瀏覽器支持CSS標準。哈坤、波斯和其他一些人是這個項目的主要技術負責人。1996年底，CSS初稿已經完成，同年12月，層疊樣式表的第一份正式標準（Cascading style Sheets Level 1）完成，成為w3c的推薦標準。

1997年初，W3C組織負責CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了1998年5月出版的CSS規範第二版。

編程開發

編程工具

記事本：使用Windows系統自帶的記事本可以編輯網頁。只需要在保存文檔時，以.html為後綴名進行保存即可。

Dreamweaver：它與Flash、Fireworks並稱網頁三劍客。Dreamweaver是集網頁製作和管理網站於一身的所見即所得網頁編輯器，它是第一套針對專業網頁設計師特別開發的視覺化網頁開發工具，利用它可以輕而易舉地製作出充滿動感的網頁。

語言特點

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

總體來說，CSS具有以下特點：

豐富的樣式定義

CSS提供了豐富的文檔樣式外觀，以及設置文本和背景屬性的能力；允許為任何元素創建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

易於使用和修改

CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統一存放，進行統一管理。

另外，可以將相同樣式的元素進行歸類，使用同一個樣式進行定義，也可以將某個樣式應用到所有同名的HTML標籤中，也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應的樣式聲明進行修改。

多頁面應用

CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬於任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現多個頁面風格的統一。

層疊

簡單的說，層疊就是對一個元素多次設置同一個樣式，這將使用最後一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些後來定義的樣式將對前面的樣式設置進行重寫，在瀏覽器中看到的將是最後面設置的樣式效果。

頁面壓縮

在使用HTML定義頁面效果的網站中，往往需要大量或重複的表格和font元素形成各種規格的文字樣式，這樣做的後果就是會產生大量的HTML標籤，從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在載入頁面時使用的時間也會大大的減少。另外，CSS樣式表的復用更大程度的縮減了頁面的體積，減少下載的時間。

工作原理

CSS是一種定義樣式結構如字體、顏色、位置等的語言，被用於描述網頁上的信息格式化和顯示的方式。CSS樣式可以直接存儲於HTML網頁或者單獨的樣式單文件。無論哪一種方式，樣式單包含將樣式應用到指定類型的元素的規則。外部使用時，樣式單規則被放置在一個帶有文件擴展名_css的外部樣式單文檔中。

樣式規則是可應用於網頁中元素，如文本段落或鏈接的格式化指令。樣式規則由一個或多個樣式屬性及其值組成。內部樣式單直接放在網頁中，外部樣式單保存在獨立的文檔中，網頁通過一個特殊標籤鏈接外部樣式單。

名稱CSS中的「層疊（cascading）」表示樣式單規則應用於HTML文檔元素的方式。具體地說，CSS樣式單中的樣式形成一個層次結構，更具體的樣式覆蓋通用樣式。樣式規則的優先順序由CSS根據這個層次結構決定，從而實現級聯效果。

語言基礎

屬性

屬性

屬性的名字是一個合法的標識符，它們是CSS語法中的關鍵字。一種屬性規定了格式修飾的一個方面。例如：color是文本的顏色屬性，而text-indent則規定了段落的縮進。

要掌握一個屬性的用法，有六個方面需要了解。具體敘述如下：

①該屬性的合法屬性值（legal value）。顯然段落縮進屬性text-indent只能賦給一個表示長度的值，而表示背景圖案的background．image屬性則應該取一個表示圖片位置鏈接的值或者是關鍵字none表示不用背景圖案。

②該屬性的默認值（initial value）。當在樣式表單中沒有規定該屬性，而且該屬性不能從它的父級元素那兒繼承的時候，則瀏覽器將認為該屬性取它的默認值。

③該屬性所適用的元素（Applies to）。有的屬性只適用於某些個別的元素，比如white-space屬性就只適用於塊級元素。white-space屬性可以取normal、pre和nowrap三個值。當取normal的時候，瀏覽器將忽略掉連續的空白字元，而只顯示一個空白字元。當取pre的時候，則保留連續的空白字元。而取nowrap的時候，連續的空白字元被忽略，而且不自動換行。

④該屬性的值是否被下一級繼承（inherited）。

⑤如果該屬性能取百分值（percentage），那麼該百分值將如何解釋。也就是百分值所相對的標準是什麼。如margin屬性可以取百分值，它是相對於margin所存元素的容器的寬度。

⑥該屬性所屬的媒介類型組（media groups）。

屬性值

①整數和實數

這和普通意義上的整數和實數沒有多大區別。在CSS中只能使用浮點小數，而不能像其他編程語言那樣使用科學記數法表示實數，即1.2E3在CSS中將是不合法的。下面是幾個正確的例子，整數：128、-313，實數：12.20、1415、-12.03。

②長度量

一個長度量由整數或實數加上相應的長度單位組成。長度量常用來對元素定位。而定位分為絕對定位和相對定位，因而長度單位也分為相對長度單位和絕對長度單位。

相對長度單位有：em——當前字體的高度，也就是font.size屬性的值；ex——當前字體中小寫字母x的高度；Dx——一個像素的長度，其實際的長度由顯示器的設置決定。

另一一點值得注意的是，子級元素不繼承父級元素的相對長度值，只繼承它們的實際計算值。

③百分數量（percentages）

百分數量就是數字加上百分號。顯然，百分數量總是相對的，所以和相對長度量一樣，百分數量不被子級元素繼承。

選擇器

類型選擇器

CSS中的一種選擇器是元素類型的名稱。使用這種選擇器(稱為類型選擇器)，可以向這種元素類型的每個實例上應用聲明。例如，以下簡單規則的選擇器是H1，因此規則作用於文檔中所有的H1元素：

簡單屬性選擇器

CLASS屬性

CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應用聲明。BODY內的所有元素都有CLASS屬性。從本質上講，可以使用CLASS屬性來分類元素，在樣式表中創建規則來引用CLASS屬性的值，然後瀏覽器自動將這些屬性應用到該組元素。

類選擇器以標誌符（句點）開頭，用於指示後面是哪種類型的選擇器。對於類選擇器，之所以選擇句點是因為在很多編程語言中它與術語「類」相關聯。翻譯成英語，標誌符表示「帶有類名的元素」。

ID屬性

ID屬性的操作類似於CLASS屬性，但有一點重要的不同之處：ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用於設置單個元素的樣式規則。包含ID屬性的選擇器稱為ID選擇器。

需要注意的是，ID選擇器的標誌符是散列符號（#）。標誌符用來提醒瀏覽器接下來出現的是ID值。

STYLE屬性

儘管在選擇器中可以使用CLASS和ID屬性值，STYLE屬性實際上可以替代整個選擇器機制。不是只具有一個能夠在選擇器中引用的值(這正是ID和CLASS具有的值)，STYLE屬性的值實際上是一個或多個CSS聲明。

通常情況下，使用CSS，設計者將把所有的樣式規則置於一個樣式表中，該樣式表位於文檔頂部的STYLE元素內（或在外部進行鏈接）。但是，使用STYLE屬性能夠繞過樣式表將聲明直接放置到文檔的開始標記中。

組合選擇器類型

可以將類型選擇器、ID選擇器和類選擇器組合成不同的選擇器類型來構成更複雜的選擇器。通過組合選擇器，可以更加精確地處理希望賦予某種表示的元素。例如，要組合類型選擇器和類選擇器，一個元素必須滿足兩個要求：它必須是正確的類型和正確的類以便使樣式規則可以作用於它。

外部信息：偽類和偽元素

在CSS1中，樣式通常是基於在HTML源代碼中出現的標記和屬性。對於很多設計情景而言這種做法完全可行，但是它無法實現設計者希望獲得的一些常見的設計效果。

設計偽類和偽元素可以實現其中的一些效果。這兩種機制擴充了CSS的表現能力。在CSS1中，使用偽類可以根據一些情況改變文檔中鏈接的樣式，如根據鏈接是否被訪問，何時被訪問以及用戶和文檔的交互方式來應用改變。藉助於偽元素，可以更改元素的第一個字母和第一行的樣式，或者添加源文檔中沒有出現過的元素。

偽類和偽元素都不存在於HTML；也就是說，它們在HTML代碼中是不可見的。這兩種機制都得到了精心設計以便能夠在CSS以後的版本中做進一步地擴充；也就是說實現更多的效果。

語言標準

在CSS 2.1規範中，識別符（包括選擇符中的元素名、類、ID）只能包含A～Z、a～z、0～9等字元，加上連字元「-」、下劃線「_」。識別符不能以數字開頭，以連字元和下劃線開頭也是不允許的。只有屬性、屬性值、單位、偽類、偽元素和「@」規則可以由連字元「-」開頭。同時，其他元素名稱、類和ID標識符也不允許用連字元開頭。

CSS的識別符也需要用反斜杠「」規避特殊字元，這些規避字元遵循IS010646規範。特殊字元的規避方法有兩種：第一種方法是遇到特殊字元則在這些字元前直接添加反斜杠，例如，「AT&T」變為「AT&T」；另一種方法為用反斜杠和Unicode或IS010646等值的十六進位數值一起，規避特殊字元，例如，「AT&T」變為「AT26T」。

技術應用

網站

在HTML文件里加一個超級鏈接, 引入外部的 CSS 文檔。這個方法最方便管理整個網站的網頁風格, 它讓網頁的文字內容與版面設計分開。只要在一個CSS文檔內（擴展名為 CSS）定義好網頁的風格，然後在網頁中加一個超級鏈接連接到該文檔，那麼網頁就會按照在CSS文檔內定義好的風格顯示出來。

語言評價

層疊樣式表（Cascading Style Sheet，CSS）有助於實現負責任的Web設計。CSS對開發者構建Web站點的影響很大，並且這種影響可能是無止境的。將網頁的大部分甚至是全部的表示信息從（X）HTML文件中移出，並將它們保留在一個樣式表中有諸多優點，如降低文件大小、節省網路帶寬以及易於維護等。此外，站點的表現信息和核心內容相分離，使得站點的設計人員能夠在短暫的時間內對整個網站進行各種各樣的修改。

CSS簡化了網頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數量（因為重複設置的格式將被只保存一次）。只要修改保存著網站格式的CSs樣式表文件就可以改變整個站點的風格特色，在修改頁面數量龐大的站點時，顯得格外有用。這就避免了一個個網頁的修改，大大減少了工作量。