- HTML+CSS+JavaScript網頁制作：Web前端開發（第3版）
- 劉瑞新 張兵義 朱立等編著
- 3326字
- 2021-12-17 17:37:45
4.3 CSS語法基礎
前面介紹了如何在網頁中定義和引用CSS樣式表，接下來要講解CSS是如何定義網頁外觀的。其定義的網頁外觀由樣式規則和選擇符決定。
16 CSS的基本語法
4.3.1 CSS樣式規則
CSS為樣式化網頁內容提供了一條捷徑，即樣式規則。每一條樣式規則都是單獨的語句。
1.樣式規則
樣式表的每條規則都有兩個主要部分：選擇符（selector）和聲明（declaration）。選擇符決定哪些因素要受到影響，聲明由一個或多個屬性及其屬性值組成。其語法如下。
selector表示要進行格式化的元素；在選擇器后的大括號中的即為聲明部分；用“屬性:屬性值”描述要應用的格式化操作。
圖4-5 CSS樣式規則
例如，分析一條如圖4-5所示的CSS樣式規則。
選擇符：h1代表CSS樣式的名字。
聲明：聲明包含在一對大括號“{}”內，用于告訴瀏覽器如何渲染頁面中與選擇符相匹配的對象。聲明內部由屬性及其屬性值組成，并用冒號隔開，以分號結束。聲明可以是一個或者多個屬性及其屬性值的組合。
屬性（property）：是定義的具體樣式（如顏色、字體等）。
屬性值（value）：屬性值放置在屬性名和冒號后面，具體內容隨屬性的類別而呈現不同形式，一般包括數值、單位及關鍵字。
例如，將HTML中<body>和</body>標簽內的所有文字設置為“華文中宋”、文字大小為12px、黑色文字、白色背景，則只需要在樣式中如下定義。
從上述代碼片段可以看出，這樣的CSS代碼結構十分清晰，為方便以后編輯，還可以在每行后面添加注釋說明。但是，這種寫法雖然使得閱讀CSS變得方便，卻無形中增加了很多字節，對于有一定基礎的Web設計人員來說，可以將上述代碼改寫為如下格式。
2.選擇符的類型
選擇符決定了格式化將應用于哪些元素。CSS選擇符包括基本選擇符、復合選擇符、通配符選擇符和特殊選擇符。
4.3.2 基本選擇符
17 CSS的選擇器-1
基本選擇符包括標簽選擇符、class類選擇符和id選擇符。
1.標簽選擇符
標簽選擇符是指以文檔對象模型（DOM）作為選擇符，即選擇某個HTML標簽為對象，設置其樣式規則。一個HTML頁面由許多不同的標簽組成，而標簽選擇符就是聲明哪些標簽采用哪種CSS樣式。因此，每一種HTML標簽的名稱都可以作為相應的標簽選擇符的名稱。標簽選擇符就是網頁元素本身，定義時直接使用元素名稱。其格式如下。
其中，E表示網頁元素（Element）。例如以下代碼表示標簽選擇符。
應用上述樣式的代碼如下。
圖4-6 標簽選擇符示例
本例在瀏覽器中的顯示效果如圖4-6所示。
2.class類選擇符
class類選擇符用來定義HTML頁面中需要特殊表現的樣式，使用元素的class屬性值為一組元素指定樣式。class類選擇符的名稱可以由用戶自定義，屬性和屬性值跟HTML標簽選擇符一樣，必須符合CSS規范。其格式如下。
使用class類選擇符時，需要使用英文．（點）進行標識，示例代碼如下。
應用class類選擇符的代碼如下。
圖4-7 class類選擇符示例
本例在瀏覽器中的顯示效果如圖4-7所示。
3.id選擇符
id選擇符用來對某個單一元素定義單獨的樣式。id選擇符只能在HTML頁面中使用一次，針對性更強。定義id選擇符時要在id名稱前加上一個“#”號。其格式如下。
其中，“#id名”是定義的id選擇符名稱。該選擇符名稱在一個文檔中是唯一的，只對頁面中的唯一元素進行樣式定義。這個樣式定義在頁面中只能出現一次，其適用范圍為整個HTML文檔中所有由id選擇符所引用的設置。
示例代碼如下。
應用id選擇符的代碼如下。
本例在瀏覽器中的顯示效果如圖4-8所示。
4.3.3 復合選擇符
圖4-8 id選擇符示例
復合選擇符包括“交集”選擇符、“并集”選擇符和“后代”選擇符。
1.“交集”選擇符
“交集”選擇符由兩個選擇符直接連接構成，其結果是選中兩者各自元素范圍的交集。其中，第一個選擇符必須是標簽選擇符，第二個選擇符必須是class類選擇符或id選擇符。這兩個選擇符之間不能有空格，必須連續書寫。
圖4-9 “交集”選擇符
例如，如圖4-9所示的“交集”選擇符，第一個選擇符是段落標簽選擇符，第二個選擇符是class類選擇符。
【例4-5】“交集”選擇符示例。本例在瀏覽器中的顯示效果如圖4-10所示。
圖4-10 “交集”選擇符示例
【說明】頁面中只有第2個段落使用了“交集”選擇符，可以看到兩個選擇符樣式交集的效果為字體大小為20px、紅色邊框且無下畫線。
2.“并集”選擇符
與“交集”選擇符相對應的還有一種“并集”選擇符，或者稱為“集體聲明”。它的結果是同時選中各個基本選擇符所選擇的范圍。任何形式的基本選擇符都可以作為“并集”選擇符的一部分。
圖4-11 “并集”選擇符
例如，如圖4-11所示的“并集”選擇符，集合中分別是<h1>、<h2>和<h3>標簽選擇符，“集體聲明”將為多個標簽設置同一樣式。
【例4-6】“并集”選擇符示例。本例在瀏覽器中的顯示效果如圖4-12所示。
圖4-12 “并集”選擇符示例
【說明】頁面中<h1>、<h2>和<h3>標簽使用了“并集”選擇符，可以看到這3個標簽設置了同一樣式，即文字顏色均為紫色。
3.“后代”選擇符
在CSS選擇符中，還可以通過嵌套的方式，對選擇符或者HTML標簽進行聲明。當標簽發生嵌套時，內層的標簽就成為外層標簽的“后代”。“后代”選擇符在樣式中會常常用到，因布局中常常用到容器的外層和內層，使用“后代”選擇符就可以控制某個容器層的子層，使其他同名的對象不受該規則影響。
“后代”選擇符能夠簡化代碼，實現大范圍的樣式控制。例如，當用戶對<h1>標簽下面的<span>標簽進行樣式設置時，就可以使用“后代”選擇符進行相應的控制。“后代”選擇符的寫法就是把外層的標簽寫在前面，內層的標簽寫在后面，之間用空格隔開。
圖4-13 “后代”選擇符
例如，如圖4-13所示的“后代”選擇符，外層的標簽是<h1>，內層的標簽是<span>，<span>標簽就成為<h1>標簽的后代。
【例4-7】“后代”選擇符示例。本例在瀏覽器中的顯示效果如圖4-14所示。
圖4-14 “后代”選擇符示例
4.3.4 通配符選擇符
通配符選擇符是一種特殊的選擇符，用“*”表示，與Windows通配符“*”具有相似的功能，可以定義所有元素的樣式。其格式如下。
例如，通常在制作網頁時首先將頁面中所有元素的外邊距和內邊距設置為0，代碼如下。
此外，還可以對特定元素的子元素應用樣式，例如以下代碼。
應用上述樣式的代碼如下。
圖4-15 通配符選擇符示例
上述代碼在瀏覽器中的顯示效果如圖4-15所示。
從代碼的執行結果可以看出，由于通配符選擇符定義了所有文字的顏色為黑色，因此<h2>和<div>標簽中文字的顏色為黑色。接著又定義了<p>標簽的文字顏色為藍色，所以<p>標簽中文字的顏色呈現為藍色。最后定義了<p>標簽內所有子元素的文字顏色為紅色，所以<p><span>和</span></p>標簽之間的文字顏色呈現為紅色。
4.3.5 特殊選擇符
18 CSS的選擇器-2
除前面講解的選擇符外，還有兩個比較特殊的、針對屬性操作的選擇符——偽類選擇符和偽元素。
1.偽類選擇符
偽類選擇符可看作一種特殊的類選擇符，是能被支持CSS的瀏覽器自動識別的特殊選擇符。其最大的用處是，可以對鏈接在不同狀態下的內容定義不同的樣式效果。之所以名字中有“偽”字，是因為它所指定的對象在文檔中并不存在，它指定的是一個與其相關的選擇符的狀態。偽類選擇符和類選擇符不同，它不能像類選擇符一樣隨意用別的名字。
偽類選擇符可以讓用戶在使用頁面的過程中增加更多的交互效果，例如應用最為廣泛的錨點標簽<a>的幾種狀態（未訪問超鏈接狀態、已訪問超鏈接狀態、鼠標指針懸停在超鏈接上的狀態以及被激活的超鏈接狀態），具體代碼如下所示。
需要注意的是，要把active樣式寫到hover樣式后面，否則active樣式是不生效的。因為當瀏覽者按下鼠標按鍵未松手（active）的時候其實也是獲取焦點（hover）的時候，所以如果把hover樣式寫到active樣式后面就把樣式重寫了。
【例4-8】偽類選擇符的應用。當鼠標懸停在超鏈接上的時候背景色變為其他顏色，文字字體變大，并且添加了邊框線，待鼠標離開超鏈接時又恢復到默認狀態，這種效果就可以通過偽類選擇符實現。本例在瀏覽器中的顯示效果如圖4-16和圖4-17所示。
圖4-16 鼠標懸停在超鏈接上時
圖4-17 鼠標離開超鏈接時
19 CSS的選擇器-3
20 CSS的選擇器-4
21 CSS的選擇器-5
2.偽元素
與偽類選擇符類似，偽元素通過對插入到文檔中的虛構元素進行觸發，從而達到某種效果。CSS的主要目的是給HTML元素添加樣式，然而，在一些案例中給文檔添加額外的元素是多余的或是不可能的。CSS有一個特性——允許用戶添加額外元素而不擾亂文檔本身，這就是“偽元素”。偽元素的語法如下。
偽元素及其作用見表4-2。
表4-2 偽元素及其作用
【例4-9】 偽元素的應用。本例在瀏覽器中的顯示效果如圖4-18所示。
圖4-18 偽元素的顯示效果
【說明】在本示例代碼中，分別對“h4:first-letter”“p:first-line”進行了樣式設置。從圖4-18中可以看出，凡是<h4>與</h4>之間的內容，都應用了首字號增大且變為紅色的樣式；凡是<p>與</p>之間的內容，都應用了首行文字變為紅色的樣式。