HTML 標籤原本被設計為用於定義文檔內容。通過使用 <h1>、<p>、<table> 這樣的標籤，HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的資訊。同時文檔布局由瀏覽器來完成，而不使用任何的格式化標籤。
由於兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標籤和屬性（比如字型標籤和顏色屬性）添加到 HTML 規範中，建立文檔內容清晰地獨立於文檔表現層的網站變得越來越困難。
為瞭解決這個問題，全球資訊網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 之外創造出樣式（Style）。所有的主流瀏覽器均支援層疊樣式表。
樣式表極大地提高了工作效率
樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字型標籤和顏色屬性所起的作用那樣。樣式通常儲存在外部的 .css 檔案中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變網站中所有頁面的布局和外觀。
由於允許同時控制多重頁面的樣式和布局，CSS 可以稱得上 WEB 設計領域的一個突破。作為網站開發人員，你能夠為每個 HTML 元素定義樣式，並將之應用於你希望的任意多的頁面中。如需進行全域的更新，只需簡單地改變樣式，然後網站中的所有元素均會自動地更新。
多重樣式將層疊為一個
樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 檔案中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式聲明：<head> 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（預設值）。
CSS 基礎文法
CSS 文法由三部分構成：選取器、屬性和值：selector { property : value }
選取器 (selector) 通常是你希望定義的 HTML 元素或標籤，屬性 (property) 是你希望改變的屬性，並且每個屬性都有一個值。屬性和值被冒號分開，並由花括弧包圍，這樣就組成了一個完整的樣式聲明（declaration）：
值的不同寫法和單位
除了英文單詞 red，我們還可以使用十六進位的顏色值 #ff0000：p { color:
#ff0000; }為了節約位元組，我們可以使用 CSS 的縮寫形式：p { color:
#f00; }我們還可以通過兩種方法使用 RGB 值：p { color:
rgb(255,0,0); } p { color:rgb(100%,0%,0%); }
當使用 RGB 百分比時，即使當值為 0 時也要寫百分比符號。但是在其他的情況下就不需要這麼做了。比如說，當尺寸為 0 像素時，0 之後不需要使用 px 單位，因為 0 就是 0，無論單位是什麼。
空格和大小寫
大多數樣式表包含不止一條規則，而大多數規則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯：
body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia Palatino serif;}
CSS 進階文法選取器的分組
你可以對選取器進行分組，這樣，被分組的選取器就可以分享相同的聲明。用逗號將需要分組的選取器分開。
h1,h2,h3,h4,h5,h6{color: green;}
繼承及其問題
根據 CSS，子項目從父元素繼承屬性。但是它並不總是按此方式工作。看看下面這條規則：
body { font-family: Verdana, sans-serif; }
根據上面這條規則，網站的 body 元素將使用 Verdana 字型（假如訪問者的系統中存在該字型的話）。
通過 CSS 繼承，子項目將繼承最進階元素（在本例中是 body）所擁有的屬性（這些子項目諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子項目都應該顯示 Verdana 字型，子項目的子項目也一樣。並且在大部分的現代瀏覽器中，也確實是這樣的。
但是在那個瀏覽器大戰的血腥年代裡，這種情況就未必會發生，那時候對標準的支援並不是企業的優先選擇。比方說，Netscape 4 就不支援繼承，它不僅忽略繼承，而且也忽略應用於 body 元素的規則。IE/Windows 直到 IE6 還存在相關的問題，在表格內的字型樣式會被忽略。我們又該如何是好呢？
幸運地是，你可以通過使用我們稱為 "Be Kind to Netscape 4" 的冗餘法則來處理舊式瀏覽器無法理解繼承的問題。
body { font-family: Verdana, sans-serif;}p, td, ul, ol, li, dl, dt, dd { font-family: Verdana, sans-serif;}
4.0 瀏覽器無法理解繼承，不過他們可以理解組選取器。這麼做雖然會浪費一些使用者的頻寬，但是如果需要對 Netscape 4 使用者進行支援，就不得不這麼做。如果你不希望 "Verdana, sans-serif" 字型被所有的子項目繼承，又該怎麼做呢？比方說，你希望段落的字型是 Times。沒問題。建立一個針對 p 的特殊規則，這樣它就會擺脫父元素的規則：
body { font-family: Verdana, sans-serif;}td, ul, ol, ul, li, dl, dt, dd { font-family: Verdana, sans-serif;}p { font-family: Times, "Times New Roman", serif;}
CSS 派生選取器（也可稱為：父子選取器）
通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
在 CSS1 中，通過這種方式來應用規則的選取器被稱為上下文選取器 (contextual selectors)，這是由於它們依賴於上下文關係來應用或者避免某項規則。在 CSS2 中，它們稱為派生選取器，但是無論你如何稱呼它們，它們的作用都是相同的。
派生選取器允許你根據文檔的上下文關係來確定某個標籤的樣式。通過合理地使用派生選取器，我們可以使 HTML 程式碼變得更加整潔。
li strong { font-style: italic; font-weight: normal;}請注意標記為 <strong> 的藍色代碼的上下文關係：
<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li><li>我是正常的字型。</li></ol>
CSS id 選取器
id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式，id 選取器以 "#" 來定義。
下面的兩個 id 選取器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
#red{color:red;}#green{color:green;}
下面的 HTML 程式碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。
<pid="red">這個段落是紅色。</p><pid="green">這個段落是綠色。</p>
注意：id 屬性只能在每個 HTML 文檔中出現一次。
id 選取器和派生選取器
#sidebar p{font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元，儘管它也可能是一個表格或者其他區塊層級元素。
一個選取器，多種用法， 即使被標註為 sidebar 的元素只能在文檔中出現一次，這個 id 選取器作為派生選取器也可以被使用很多次：
#sidebar p{font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2{font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
在這裡，與頁面中的其他 p 元素明顯不同的是，sidebar 內的 p 元素得到了特殊的處理，同時，與頁面中其他所有 h2 元素明顯不同的是，sidebar 中的 h2 元素也得到了不同的特殊處理。
id 選取器即使不被用來建立派生選取器，它也可以獨立發揮作用：
#sidebar{border: 1px dotted #000;
padding: 10px;
}
根據這條規則，id 為 sidebar 的元素將擁有一個像素寬的黑色點狀邊框，同時其周圍會有 10 個像素寬的內邊距（padding，內部空白）。
CSS 類別選取器
在 CSS 中，類別選取器以一個點號顯示：
.center{text-align: center
}
所有擁有 center 類的 HTML 元素均為置中。在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。
<h1
class="center"> This heading will be center-aligned </h1><p
class="center"> This paragraph will also be center-aligned. </p>
類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
和 id 一樣，class 也可被用作派生選取器：
.fancy td{color: #f60;background: #666;}
在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div）
元素也可以基於它們的類而被選擇：
td.fancy{color: #f60;background: #666;}
在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。
<tdclass="fancy">
你可以將類 fancy 分配給任何一個表格元素任意多的次數。那些以 fancy 標註的儲存格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的儲存格不會受這條規則的影響。還有一點值得注意，class 為 fancy 的段落也不會是帶有灰色背景的橙色，當然，任何其他被標註為 fancy 的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式，這個效果被限制於被標註為 fancy 的表格單元（即使用 td 元素來選擇 fancy 類）。
如何建立 CSS
插入樣式表的方法有三種：
外部樣式表當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個網站的外觀。
<head> <linkrel="stylesheet" type="text/css" href="mystyle.css" /></head>
外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 副檔名進行儲存。
hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}
不要在屬性值與單位之間留有空格。假如“margin-left: 20 px” 而不是 “margin-left: 20px” ！
內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。
內聯樣式<head><style type="text/css">hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style></head>
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法！
多重樣式<p
style="color: sienna; margin-left: 20px">This is a paragraph</p>
如果某些屬性在不同的樣式表中被同樣的選取器定義，那麼屬性值將從更具體的樣式表中被繼承過來。
例如，外部樣式表擁有針對 h3 選取器的三個屬性：
h3 { color: red; text-align: left; font-size: 8pt; }
而內部樣式表擁有針對 h3 選取器的兩個屬性：
h3 { text-align: right; font-size: 20pt; }
假如擁有內部樣式表的這個頁面同時與外部樣式表連結，那麼 h3 得到的樣式是：
color:red; text-align:right; font-size:20pt;
即顏色屬性將被繼承於外部樣式表，而文字流向（text-alignment）和字型尺寸（font-size）會被內部樣式表中的規則取代。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
