頁面中使用CSS的三種方法：
CSS被設計用來與HTML聯合建立網頁，它不能獨立運行，需要依附到頁面上才能發揮作用。通常在網頁中CSS規定了3種定義樣式的方法：
直接將樣式控制放置在單個HTML元素內，稱為內聯式。
在網頁的head部分定義樣式，稱為嵌入式。
以副檔名.css的檔案儲存樣式定義，稱為外部連結式，被連結的檔案稱為CSS檔案。
內聯樣式直接將CSS放在某個HTML標籤中，通過使用style屬性設定，一般形式為：
style="屬性名稱1: 值1; 屬性名稱2: 值2;……"
屬性名稱與屬性值之間用“:”分隔，如果一個樣式中有多個屬性，各屬性之間用分號“;”隔開。
內置樣式
在網頁的head部分直接實現CSS樣式, 即在<head>與</head>標籤內，以<style>開始，</style>結束。
CSS規則由兩部分組成：選擇符和聲明。聲明由屬性名稱和屬性值組成。所以簡單的CSS規則如下：
選擇符{屬性名稱1: 值1; 屬性名稱2: 值2; ……}
例如： p { color : Green; }
p（段落標籤）為選擇符，color（顏色）是p的屬性名稱，green（綠色）是color的屬性值。該規則聲明所有段落標籤的內容應該將color屬性設定為綠色，即所有<p>中文本將變成綠色。
CSS中主要的4個要素
選擇符：表明CSS規則應用到頁面的哪個部分。選擇符最簡單的類型是元素選擇符，它指出明確的標籤元素，例如HTML中的<p>標籤。
聲明：聲明包含在{}大括弧內。大括弧內應首先給出屬性名稱，接著是冒號，然後是屬性值。結尾分號是可選項，推薦使用結尾分號，以便於規則的擴充。
屬性：屬性按官方CSS規範定義。使用者可以定義特有的樣式效果，與CSS相容的瀏覽器可能會支援這些效果，如果不支援的瀏覽器會忽略這些屬性。
值：聲明的值放置在屬性名稱和冒號之後。它確切定義應該如何設定屬性。每個屬性值的範圍也在CSS規範中定義。
連結式樣式
在頁面中使用CSS最常用的方法是連結式樣式。這樣可以在網頁中調用已經定義好的樣式表檔案（css檔案）。
與嵌入式相比，連結式可以將定義好的樣式在網站的多個頁面上重複使用，提高了開發效率，降低了維護成本，同時也實現了將頁面結構和表現徹底分離，最適合大型網站的外觀設計。
樣式規則
無論是定義內嵌式樣式還是連結式樣式，每個樣式的定義格式相同：
選擇符 {屬性名稱1: 值1; 屬性名稱2: 值2; ……}
其中，選擇符是指樣式定義的對象，可以是HTML標記元素、使用者自訂的類、使用者自訂的id、偽類、具有層次關係的樣式規則及並列的樣式選擇符等。
1．元素選擇符
任何HTML元素都可以是一個CSS的元素選擇符，例如，div{color : red}，該樣式規則中的元素選擇符是div，div塊內的所有文字顏色為紅色。
2．類選擇符
類選擇符用於定義頁面上的相關HTML元素組，使它們具有合適的相同樣式規則。建立類時，使用者需要給它命名，命名時最好使用字母和數字。
定義了類之後，使用者可以使用它作為CSS的選擇符。類選擇符以“.”為起始標記，一般格式為：
.類選擇符 {屬性名稱1: 值1; 屬性名稱2: 值2; ……}
例如：
.c1 { color : Red; }
.c2 { font-size : large; }
上面定義了兩個類，類“c1”定義了顏色屬性，類“c2”定義了字型大小屬性。
在HTML文檔中可以按下列方式引用：
<div>
<h1 class="c1">通知</h1>
<p class="c2">將與今天下午2點召開各部門會議。</p>
</div>
標籤<h1>中的文本顏色為紅色，標籤<p>中的字型大小為“large”。因為它們各自的class屬性值為類“c1”和類“c2”。
3．id選擇符
只有在頁面上的標籤才能具有給定的id，它必須是唯一的，並只用於指示該元素。
下面的例子中標籤<a>定義了一個id屬性，值是“next”。
<a href="next.htm" id="next">下一步</a>
在CSS中，id選擇符由id值前面的“#”（井號）符號指示，例如：
#next { font-size : large; }
在實際應用中，使用者應如何選取類選擇或id選擇符設定樣式呢？
類選擇符更靈活，id選擇符能完成的它都能完成，甚至比id選擇符能完成的還要多。如果想重用樣式，使用者也可以使用類選擇符來完成。但是用id選擇符就完成不了，因為id值在頁面文檔中必須是唯一的，即只有一個元素具有該值。
注意：如果在一個元素的樣式定義中，既引用了元素選擇符，又引用了類選擇符和id選擇符，則id選擇符的優先順序最高，其次是類選擇符，元素選擇符的優先順序最低。
4．偽類
偽類可以看做是一種特殊的類選擇符，是能被支援CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對連結在不同狀態下定義不同的樣式效果。
在CSS中用4個偽類來定義連結樣式，分別是a:link、a:visited、a:hover和a:active，
例如：
a:link {color: #FF0000} /* 未被訪問的連結 紅色 */
a:visited {color: #00FF00} /* 已被訪問過的連結 綠色 */
a:hover {color: #FFCC00} /* 滑鼠懸浮在上的連結 橙色 */
a:active {color: #0000FF} /* 滑鼠點中啟用連結 藍色 */
以上語句分別定義了連結、已訪問過的連結、滑鼠停在上方時、點擊滑鼠時的樣式。注意，必須按以上順序書寫，否則不能按預期效果顯示。
5．包含選擇符
包含選擇符用於定義具有層次關係的樣式規則，它由多個樣式選擇符組成，選擇符之間用空格隔開。一般格式為：
選擇符1 選擇符2 …… {屬性名稱1: 值1; 屬性名稱2: 值2; ……}
例如，div h1{ color : red }，這種方式只對div中包含的h1起作用，對單獨的div或h1均無效。
6．並列選擇符
如果有多個不同的樣式選擇符的樣式相同，則可以使用並列選擇符簡化定義，每個樣式選擇符之間用逗號隔開。一般格式為：
選擇符1, 選擇符2, ……{屬性名稱1: 值1; 屬性名稱2: 值2; ……}
例如：.classone, #bb, h1{color : red}
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
