一．樣式表基礎
1． 樣式表中每一個條目由選擇符（selector）和對應的規則群組成，選擇符通常是HTML元素名稱，也可以是類（class）、標識符（id）、偽類（pseudo class，它們標示了超連結的不同狀態）等。
2． 將樣式表（規則）添加到HTML文檔中有3種方式：
① 外部樣式表。
② 應用於整個文檔的樣式，位於<head>區，包括內建樣式表和輸入樣式表。
③ 行內樣式，通過絕大多數元素的style屬性實現。
3． 樣式表內的注釋用/* …*/。通過將樣式規則包圍在HTML注釋<!-- -->之間可以讓那些不支援樣式表技術的老瀏覽器也能正常工作而不是直接把樣式規則顯示在螢幕上。一般而言，瀏覽器會忽略不認識的元素和屬性，但包圍在元素之間的內容會顯示出來。
4． 每一條規則必須以分號；結束。
5． 如果多個元素共用相同的樣式規則，可以使用逗號將它們分組定義。這裡分組的概念與分類（class）或標識符（id）的概念不同，前者設定的規則對整個文檔中所有的該元素都起作用，而後者只對該元素的一個子集（class或id相同的）起作用。當成組規則和其他規則都涉及到同一個元素時，它們將被組合起來，以產生某個元素的完整的樣式。
舉例：成組規則的應用。
h1,h2,h3 {background : yellow; color : black;}
h1 {font-size : 200%;}
h2 {font-size : 150%;}
h3 {font-size : 125%;}
二．外部樣式表
外部樣式表通過在<head>區內使用<link>元素來引用，<link>元素有三大屬性：
① rel：指明了連結關係，這裡是stylesheet。
② href：指明了外部樣式表的URL。
③ type：指明了樣式表的類型，這裡是text/css。（其他還有jss）
舉例：外部樣式表的引用方式。
<head>
<title>Style Sheet Linking Example</title>
<link rel = "stylesheet" href = "\css\css1.css" type = "text/css">
</head>
三．應用於整個文檔的樣式表
3．1 內建樣式表
內建樣式表的使用方式是直接寫在head區的style元素內，從而形成應用與整個文檔的樣式表。這種情況下只需要用到style元素的type屬性。
舉例：內建樣式表的使用。
<head>
<style type = “text/css”>
<!--
body {
font: 10pt;
font-family: Serif;
color: black;
background-color: white;
}
-->
</style>
</head>
3．2 輸入樣式表
輸入樣式表也是引用一個外部樣式表，但不是通過link元素而是在style區內通過@import文法來引用：@import url（css的url地址）；可以在<style>元素內引用一些輸入樣式表，同時又指定一些只應用於本文檔的樣式。但是（Netscape）瀏覽器對輸入樣式表的支援還不普遍，所以建議使用<link>來引用外部樣式表。
舉例：輸入樣式表和內建樣式表的聯合使用。
<head>
<style type = “type/css”>
<!--
@import url(corerules.css);
@import url(linkrules.css);
/* a rule specific to this document */
h1{
font : 24pt;
font-family : Sans-Serif;
color : black;
text-align : center;
}
-->
</style>
</head>
四．行內樣式
絕大多數元素都有style屬性。行內樣式資訊並不需要從不支援樣式表的瀏覽器中隱藏，因為瀏覽器會忽略它們不理解的任何屬性。
舉例：行內樣式的使用。
<h1 style = “font-size: 48pt; font-family: Arial; color: green;”>CSS1 Inline</h1>
五．樣式規則的轄域
以上討論了樣式表的存放位置，現在討論樣式表的作用範圍，兩者既有聯絡又有區別：行內樣式規則自然決定了它的影響範圍是當前元素，而其他樣式規則可以靈活地設定規則的作用範圍。
5．1 簡單規則
最簡單的規則不妨稱它們為文檔規則和行內規則。前者可以應用到整個文檔中出現的所有的某元素（如所有的<p>元素），後者只應用到當前元素。
5．2 id規則
使用id屬性的元素除了可以作為超連結的目標外（類似name屬性，在載入頁面時將顯示定位在頁面的指定位置），還可以用它來和樣式表中的某個樣式規則綁定（比name屬性強的地方）。無論是作為超連結的href還是樣式規則的選擇符，引用id的格式為：＃id值。在一個HTML文檔中，id屬性值必須全域唯一。
舉例：id屬性與超連結或樣式表的結合使用。
如有<p id = “SecondParagraph”>…</p>，則可以如下引用：
<a href = “# SecondParagraph”>Go to SecondParagraph</a> 或者
<head>
<style type = “text/css”>
<!--
＃SecondParagraph {background-color : green;}
-->
</style>
</head>
5．3 class規則
和id屬性一樣，class屬性也是HTML核心屬性之一，多數元素都有該屬性。class屬性定義了一個元素所屬類的名稱。class取值不要求唯一，同一類元素的多個執行個體、多個不同類的元素都可能屬於同一個類。使用類可以顯著地減少文檔中必需的樣式規則的數量。樣式規則中有兩種引用class的格式：
① 為所有該類的元素設定樣式：.類名{樣式規則;}
② 為屬於該類的所有X元素設定樣式：X.類名{樣式規則;}
舉例：class規則的使用。
<style type = “text/css”>
<!--
.main-item {font-size:150%;}
h1.veryimportant {background-color:orange;}
-->
</style>
5．4 偽類（pseudo－classes）和虛擬元素（pseudo－elements）
5．4．1 偽類
一組專門的預定義的類稱為偽類，主要用來處理超連結的狀態。超連結顯示文字的狀態可以通過偽類選擇符＋樣式規則來控制。偽類選擇符包括：
① a:link：未訪問連結
② a:visited：已訪問連結
③ a:active：啟用時（連結獲得焦點時）連結的顏色
④ a:hover：滑鼠移到連結上時
一般a:hover和a:visited連結的狀態（顏色、底線等）應該是相同的。前三者分別對應body元素的link、vlink、alink這三個屬性。四個“狀態”的先後過程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能設定有無底線（總是有的）。
舉例：偽類的常見狀態值
<style type = “text/css”>
<!--
a:link {color: blue; text-decoration:none;} //未訪問：藍色、無底線
a:active:{color: red; } //啟用：紅色
a:visited {color:purple;text-decoration:none;} //已訪問：purple、無底線
a:hover {color: red; text-decoration:underline;} //滑鼠移近：紅色、底線
-->
</style>
5．4．2 虛擬元素
兩個虛擬元素：:first-letter和:first-letter。它們常常和像<p>這樣的元素引導的一段文字一起使用，用來影響其中首字母或者首行的顯示，如p:first-letter和p:first-line。
<style type = “text/css”>
<!--
p:first-line {background-color:yellow;}
p:first-letter{color:red;font-size:150%;}
-->
</style>
5．5 情景選擇（contextual selection）
情景選擇允許對位於某嵌套層次內的某元素進行樣式控制，該規則通過按照嵌套的順序列出元素的名稱，然後給出樣式規則來建立。
舉例：使所有出現在<p>元素內的<strong>元素都有黃色的背景顏色。
p strong {background-color : yellow;}
六．樣式規則的繼承與嵌套
該性質允許對元素的多種規則進行組合，既可以從父元素那裡繼承一些屬性，也可以重寫某些屬性。層疊（CSS中的C）的一般思想有效地建立了一個系統以確定在有多個樣式表的文檔中哪些規則將被應用。例如，使用id屬性為一個特定的<p>元素指定規則，這相對於通過class規則指定的規則具有優先權，而class規則相對於為<p>元素自身指定的規則有優先權。相對於應用於整個文檔的樣式或連結進來的外部樣式，通過一個style屬性指定的行內樣式是更重要的。考慮究竟哪一個規則將最終生效的簡單方法是：越專門的規則優先順序越高，和標記位置越近的規則優先順序越高。
如果需要一個特定的規則永遠不被後面的另一條規則重寫，可以用!important聲明。對希望絕不被忽略的規則，可以在這個規則的分號之前插入聲明!important，它一定要放在規則的最後，分號之前的位置，否則將被忽略。另外，許多老版本的瀏覽器並不支援該聲明。
舉例：使用!important聲明不被重寫的規則。
P {color:red !important;font-size:12pt;}
<p style=“color:green;font-size:24pt;”}...</p>
<p>元素最終將以紅色、24點大小顯示。
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
