第五章 使用CSS樣式
本章要點
對HTML文檔應用樣式的方法
CSS樣式代碼編寫規則
CSS樣式選取器 的種類及使用
目錄：
5.1對HTML文檔應用樣式
5.2CSS樣式代碼編寫規則
5.3CSS樣式選取器
5.4樣式的優先順序
5.1 對HTML文檔應用樣式
1.應用樣式的方法
當設計好樣式之後，需要將樣式應用到HTML文檔中，可以用下
面的三種方式，將CSS應用於HTML頁面上。
（1）內聯樣式
內聯樣式是將樣式寫在標記裡面的， 它只對己所在的標記起作
用。內聯樣式表 用到<style>標記。
（2）內部樣式表
內部樣式表是寫在<head></head>裡面的，它只針對所在的 HTML頁
面有效。內部樣式表也用到<style>標記，寫法為：
<style type="text/css">
/*樣式規則*/
</style>
（3）外部樣式表
CSS允許將所有樣式放在一個或多個以.css為結尾的外部樣式表檔案
中。通過將外部樣式表附加到HTML文檔上的方法可以靈活的應用樣
式。附件外部樣式表上有兩種方法。可以連結它們，也可以匯入它
們。
2 .應用樣式的優先順序
所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，如果遇到不同的樣式表的規則有衝突的地方，將按優先順序來確定應用哪一個規則,內聯樣式擁有最高的優先權。
（1）瀏覽器預設設定
（2）外部樣式表
（3）內部樣式表
（4）內聯樣式
5.2 CSS樣式代碼編寫規則
1.樣式代碼編寫規則
CSS規則由一個選擇符（selector）和一個聲明（declaration）構成。聲明由屬性（properties）和屬性的取值（value）組成，聲明用來設定指定選擇符的樣式。
selector { property : value }
---如果需要對一個選擇符指定多個屬性時，使用分號將所有的屬性和值分開。
---為了減少樣式表的重複聲明，可以在一條樣式規則定義語句中組合若干個選取器，每個選取器之間用逗號（，）隔開。
2.規則的注釋
在樣式表中的規則的比較多時，可以通過注釋來管理樣式表。
所有的注釋都以斜杠和星號（/*）開始，以星號加斜杠結束（*/）。可以在複雜和重要的樣式中使用，這樣當以後再看以前設計的樣式表時，就知道各個規則是的作用了。
3.規則的標誌
注釋對於閱讀整個樣式表很重要，但通過引入了標誌的概念可以追蹤單個規則，這對複雜的樣式表非常有用。標誌使用樣式表中不常用的字元作為注釋的起始，有助於結合文字編輯器的尋找工具來檢索規則。
4.規則的排版
縮排主要是為了保證代碼的清晰可讀。在實際的使用中，可以單擊一次Tab鍵來縮排選取器，而單擊兩次Tab鍵來縮排聲明和結束大括弧。這樣的排版規則可以使查詢規則非常容易。
這樣做可以使得即使在樣式表不斷增大的情況下，仍然可以避免混亂。
5.樣式命名的通用規則
（1）命名所選用的單詞應選擇不過於具體表示某一狀態（如顏色、字型大小大小等）的單詞，以避免當狀態改變時名稱失去意義。
（2）樣式CLASS名由以字母開頭的小寫字母（a-z）、數字（0-9）、底線（_）、減號（-）組成。
（3）樣式ID名稱由不以數字開頭的小寫字母（a-z）、數字（0-9）、底線（_）組成。
（4）模組、類型、狀態、位置等的所使用的單詞或其縮寫，保持上面的順序，盡量保持用兩到三個單詞說清用途。
5.3 CSS樣式選取器
1. HTML標記選取器
一個HTML頁面由很多不同的標記組成，CSS中的HTML標記選取器用來聲明哪些標記採用哪種CSS樣式。因此，每一種HTML標記的名稱都可以作為相應的標記選取器的名稱。
2. CLASS選取器
CLASS（class）選取器是一類最常用的選取器，它用來定義HTML頁面中需要特殊表現的樣式。class選取器的名稱可以由使用者自訂，屬性和值跟HTML標記選取器一樣，也必須符合CSS規範，class選取器的名稱前有一個圓點（.）做為首碼。
如果要使用指定的class選取器，需要在相應的HTML標記中，通過class=“class選取器名字”的形式進行聲明。
3. ID選取器
ID（id）選取器只能在HTML頁面中使用一次，針對性更強。在HTML的標記中只需要用id屬性，就可以調用CSS中的id選取器。id選取器的名稱由使用者自訂，屬性和值的寫法和其他標記選取器一樣，但在CSS中，id選取器的名稱前有一個“#”符號做為首碼。
4.進階選取器
（1）偽class選取器和虛擬元素選取器
偽class選取器和虛擬元素選取器，可以為文檔中非具體存在的結構指定樣式，或者為某些元素（包括文檔本身）的狀態指定樣式，它會根據某種條件而非文檔結構應用樣式。
偽類名
:link
:visited
:focus
:hover
:active
(2）交集選取器
交集選取器由兩個選取器組成，其結果是選中二者各自元素範圍的交集。其中第一個必須是標記選取器，第二個必須是class選取器或者id選取器。兩個選取器之間不能有空格，必須連續書寫。
p.classname {
color:#339; font-size:16px; }
（3）後代選取器
後代選取器可用來尋找特定元素或元素組的後代。後代選取器是用一個用空格符隔開的兩個或更多的單一選取器組成的字串。後代選取器是根據文檔中的上下文來選取元素的。兩個選取器之間用有空格隔開。
div p{
color:red;
}
（4）子選取器
這個選取器與後代選取器的區別：子選取器（child selector）僅是指它的直接後代，或者可以理解為作用於子項目的第一個後代。而後代選取器是作用於所有子後代元素。後代選取器通過空格來進行選擇，而子選取器是通過“>”進行選擇。
div>p{
color:red;
}
（5）屬性選取器
屬性選取器可以根據某個屬性是否存在或屬性的值來尋找元素，因此能夠實現某些非常有意思的效果。可以認為class和id選取器其實就是屬性選取器，只不過是選擇了class或者id的值而已。低版本的瀏覽器不支援屬性選取器，但當前主流的標準瀏覽器都很好的支援屬性選取器。
屬性選取器的格式是元素後跟中括弧，中括弧內帶屬性，或者屬性運算式。
有簡易屬性選取器和精確屬性值選取器。
5.4樣式的優先順序
層疊的重要度次序：
（1）標有!important的使用者樣式。
（2）標有!important的作者樣式。
（3）作者樣式。
（4）使用者樣式。
（5）瀏覽器/使用者代理程式應用的樣式。
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
