第二章 CSS工作原理（剖析CSS規則）

阿新 • • 發佈：2019-01-19

一簡述：CSS樣式與HTML的關係

第 1 章我們瞭解了怎麼通過 HTML 來建立文件結構。本章，我們來說一說 CSS 規則怎麼為 HTML 新增樣式，並解釋層疊的工作機制——當元素的同一個樣式屬性有多₄ 種樣式值的時候，CSS 就要靠層疊機制來決定最終應用哪種樣式。

每個 HTML 元素都有一組樣式屬性，可以通過 CSS 來設定。這些屬性涉及元素在螢幕上顯示時的不同方面，比如在螢幕上位置、邊框的寬度，文字內容的字型、字號和顏色，等等。CSS 就是一種先選擇 HTML 元素，然後設定選中元素 CSS 屬性的機5 制。CSS 選擇符和要應用的樣式構成了一條 CSS 規則。

好，我們就先聊一聊 CSS 規則，以及怎麼把 CSS 規則應用到 HTML 元素。請讀者跟著我做幾個例子，這些例子都要用到下面這個簡單的 HTML5 模板。這個模板的程式碼

也可以登入 http://www.stylinwithcss.com 下載。

這段程式碼也展示了 CSS 註釋與 HTML 註釋在格式上的區別。

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Template</title>

<style>

/* CSS 規則放在<style>標籤中 */

</style>

</head>

<body>

</body>

</html>

程式碼裡包含一個 HTML 的<style>標籤。通過這個標籤可以把 CSS 樣式直接寫在文件中（用專業說法，是把 CSS 樣式嵌入到文件中）。瀏覽器會負責把<style>標籤中 CSS 樣式應用給<body>標籤中的 HTML 元素（甚至包括<html>標籤）。

二剖析 CSS 規則

1.規則實際上就是一條完整的 CSS 指令。規則聲明瞭要修改的元素和要應用給該元素的樣式。

下面就是一條 CSS 規則，它可以把段落的文字設定為紅色。

p {color:red;}

把它應用給以下 HTML 標記

<p>This text is very important!</p>

這個段落的文字就會顯示為紅色

這個HTML 模板以及本書所有程式碼示例，都可以到這裡下載：http://www. stylin-withcss.com。

- 23 -

<!DOCTYPE html>

<html>

<head>

/*CSS 樣式要嵌入在頁面 head 元素中的<style>標籤裡*/

p {color:red;}

</style>

</head>

<body>

<p>This text is very important!</p>

</body>

</html>

2.【為文件新增樣式的三種方法】

有三種方法可以把 CSS 新增到網頁中，分別是寫在元素標籤裡（也叫行內樣式）、寫在<style>標籤裡（也叫嵌入樣式）和寫在單獨的 CSS 樣式表中（也叫連結樣式）。

行內樣式

行內樣式是寫在特定 HTML 標籤的 style 屬性裡的，比如：

<p>This paragraph simply takes on the browser's default paragraph style.</p>

<p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">By adding inline CSS styling to this paragraph, you override the default styles.</p>

行內樣式的作用範圍非常有限。行內樣式只能影響它所在的標籤，而且總會覆蓋嵌入樣式和連結樣式。

嵌入樣式

嵌入的 CSS 樣式是放在 HTML 文件的 head 元素中的，比如：

</style>

</head>

嵌入樣式的應用範圍僅限於當前頁面。頁面樣式會覆蓋外部樣式表中的樣式，但會被行內樣式覆蓋。像本書前面例子中那樣使用嵌入方式為某個元件（比如選單）設計樣式是很方便的，因為 HTML 和 CSS 同在一頁，可以互相參照。但是，等到 CSS 樣式設計完畢，元件功能齊備之後，還是應該把相應的樣式轉移到外部樣式表，以便其他頁面也能共用相同的樣式。

連結樣式

在建立包含多個頁面的網站時，需要把樣式集中在一個單獨的檔案裡，這個檔案就叫樣式表。樣式表其實就是一個副檔名為.css 的文字檔案。可以在任意多個 HTML 頁面中連結同一個樣式表文件，每個頁面中只需加入類似下面的這一行程式碼即可：

連結樣式的作用範圍可以是整個網站。只要使用<link>標籤把樣式錶鏈接到每個頁面，相應的頁面就可以使用其中的樣式。隨後，只要修改了樣式表中的樣式，改動就會在所有被選中的元素上體現出來，無論這個元素在哪個頁面裡。這樣，既可以做到全站頁面外觀統一，又便於整站樣式更新。

除了以上三種為頁面新增樣式的方法，還有一種在樣式表中連結其他樣式表的方法，那就應用 @import 指令（是一種at規則）：

@import url(css/styles2.css)

要注意的是，@import 指令必須出現在樣式表中其他樣式之前，否則@import 引用的樣式表不會被載入。

有一點很重要，那就是 CSS 樣式是通過<style>標籤嵌入到頁面裡的。當瀏覽器遇到開標籤<style>時，就會由解釋 HTML 程式碼切換為解釋 CSS 程式碼。等遇到閉標籤</style>時，它會再切換回解釋HTML程式碼。

注意：

對於寫在樣式表裡的樣式，就不需要<style>標籤了。如果你在樣式表裡加上這個標籤，樣式表中的樣式就不會被瀏覽器載入了。

本章後面的例子都將使用這個模板。讀者可以把這個模板寫到一個文字檔案裡，然後儲存為副檔名是.html 的檔案。之後，只要像前面那樣，把每個例子的 CSS 和 HTML 程式碼複製貼上到這個模板中就行了。粘貼後儲存，再在瀏覽器中開啟，就可以看到效果。

CSS規則命名慣例
CSS 規則由選擇符和宣告兩部分組成，其中選擇符用於指出規則所要選擇的元素
（圖 2-2 的示例選擇符是要選擇段落），宣告則又由兩部分組成：屬性和值。屬性指出
要影響元素哪方面的樣式（圖 2-2 的示例屬性影響的是文字顏色），值就是屬性的一₂
個新狀態（圖 2-2 中是紅色）。

p {color:red;}

4.對這個基本的結構，有三種方法可以進行擴充套件。

第一種方法：多個宣告包含在一條規則裡。

p {color:red; font-size:12px; font-weight:bold;}

這樣，一條規則就可以把段落文字設定成紅色，12 畫素大，粗體。

注意三個宣告末尾都有一個分號，以示分隔。其中，最後一個位於右花括號之前的分號是可選的，但我始終都會加上它。因為將來再新增宣告時就不用再記著加了。

有讀者可能會好奇地想，這些屬性（比如 font-size 和 color）還有其他什麼值呢？比如，指定顏色值的時候是不是可以不用顏色名，而用 RGB（red,green,blue）格式？當然，可以。不過，我想還是容我把選擇符的工作機制講完吧。本章後面，我們再詳細講規則的宣告部分。

第二種方法：多個選擇符組合在一起。如果想讓<h1>、<h2>和<h3>的文字都變成藍色，

粗體，可以這樣分別寫：

h1 {color:blue; font-weight:bold;}

h2 {color:blue; font-weight:bold;}

h3 {color:blue; font-weight:bold;}

但其實，把三個選擇符組合在一起也可以，這樣就能減少重複輸入：

h1, h2, h3 {color:blue; font-weight:bold;}

千萬注意每個選擇符之間要用逗號分隔（最後一個後面不用加）。至於選擇符之間的空格，隨意，可加可不加，但加了好像看得更清楚。

第三種方法：多條規則應用給一個選擇符。假設，你在寫完前面那條規則後，又想只把 h3 變成斜體，那可以再為 h3 寫一條規則：

h1, h2, h3 {color:blue; font-weight:bold;}

h3 {font-style:italic;}

以上這三種規則結構，是今後我們要寫的更復雜的選擇組合的基礎。更復雜的選擇組合是啥意思？比如說，你想寫一條 CSS 規則，希望給位於附註欄（aside 元素）中的一個段落新增樣式，讓這個段落看起來與正文（比如 article 元素）中的段落不一樣。但我們到目前為止看到的規則，會影響整個文件中同種型別的所有元素。下面我們就來講一講怎麼隨心所欲地選擇在標記中位於特殊區域的元素。

所有用於選擇特定元素的選擇符又分三種。

瑨上下文選擇符。基於祖先或同胞元素選擇一個元素。

瑨 ID 和類選擇符。基於 id 和 class 屬性的值（你自己設定）選擇元素。

屬性選擇符。基於屬性的有無和特徵選擇元素。

三上下文選擇符

1.簡述：

下面，我們就來解決上一節提到的那個問題：你想分別給 article 和 aside 中的段落文字，分別設定不同的字號。像這種“基於位置”變換某個標籤樣式的問題，可以用上下文選擇符來解決，本節我們就來講一講這種選擇符。

定義：

上下文選擇符的格式如下：

標籤 1 標籤 2 {宣告}
其中，標籤 2 就是我們想要選擇目標，而且只有在標籤 1 是其祖先元素（不一定是
父元素）的情況下才會被選中。	2
上下文選擇符，嚴格來講（也就是 CSS 規範裡），叫後代組合式選擇符（descendant	2
combinator selector），就是一組以空格分隔的標籤名。用於選擇作為指定祖先元素後
代的標籤。
article p {font-weight:bold;}	3

這個例子中的上下文選擇符表明，只有是 article 後代的 p 元素才會應用後面的樣式。換句話說，上面這條規則的目標是位於 article 上下文中的 p 元素。

<body>

<h1>Contextual selectors are <em>very</em> selective</h1>

<p>This example shows how to target a <em>specific</em> tag.</p>

</article>

<aside>

<p>Contextual selectors are <em>very</em> useful!</p> </aside>

</body>

以上標記在沒有應用 CSS 的情況下，如圖 2-3 所示。

圖中盒子的輪廓是通過在 Firefox 的 Web Developer 工具條中選擇 Outline Block Level Elements 和 Outline Custom Elements（可以在彈出的視窗中輸入行內元素的名字）生

成的。

在接下來我向大家展示那些瞄準標記中特定元素的 CSS 規則時，建議大家參照圖 2-4 的 DOM 結構圖。

我們就從最簡單的一個標籤的選擇符開始。

em {color:green;}

這條規則選擇頁面中所有 em 元素，因此三個 em 元素中的文字都會變成綠色，如圖 1 2-6 所示（圖中為淺灰色）。

接下來修改這個上下文選擇符，讓它選擇頁面中特定區域中的標籤。

p em {color:green;}

萬萬牢記，上下文選擇符以空格作為分隔符，而分組選擇符則以逗號作為分隔符，不要弄混。

現在，前面的 p 元素是上下文，後面的 em 元素是要選擇的目標。這裡選擇符的意思用白話說，就是：“選擇以 p 元素為祖先的所有 em 元素。”好好，看看圖 2-4 中的結構圖，哪些標籤會被這條規則選中？

沒錯，你說得對，會選中兩個段落中的 em，而不會選中標題中的 em。因為標題中的 em 並沒有作為祖先的段落，因此這條規則對它不適用。

◆ 進一步展示了單上下文選擇符的可能性。下面的 CSS 規則

article em {color:green;}

這次，我們使用了 article 作為上下文，因此該元素中標題及段落下的 em 都變成了綠色（圖中是淺灰色）。而位於 aside 中的 em 未受影響，因為它沒有 article 這麼個祖先元素。注意，至於 article 與 em 之間還隔著一個 p 元素（或 h1 元素），都不影響結果。只要 em 在整個層次結構中有一個叫 article 的祖先元素就可以了。

要是我只想選擇標題中的 em 呢？那就需要更加具體的上下文。

article h1 em {color:green;}

這裡選擇符的意思就是說：“選中的 em 必須有一個祖先是 h1，後者進而還要有一個祖先是 article。”

3. 特殊的上下文選擇符

剛才，我們學習的上下文選擇符是以某個祖先標籤作為上下文。只要有標籤在它的層次結構“上游”存在這麼一個祖先，那麼就會選中該標籤。無論從該標籤到作為祖先的上下文之間隔著多少層次都沒有關係。不過，有時候我們可能還會需要比“某些祖先”更加具體的上下文。比如說吧，要是你想根據父元素或者同胞元素的標籤名來選擇元素怎麼辦呢？

下面我們再用另一段標記來演示幾種特殊的上下文選擇符。

<h2>An H2 Heading</h2>

<p>This is paragraph 1</p>

<p>Paragraph 2 has <a href="#">a link</a> in it.</p>

</section>

子選擇符>

標籤 1 > 標籤 2

標籤 2 必須是標籤 1 的子元素，或者反過來說，標籤 1 必須是標籤 2 的父元素。與常規的上下文選擇符不同，這個選擇符中的標籤 1 不能是標籤 2 的父元素之外的其他祖先元素。

section > h2 {font-style:italic;}

圖 2-10 展示了以上規則的結果。

緊鄰同胞選擇符+

標籤 1 + 標籤 2

標籤 2 必須緊跟在其同胞標籤 1 的後面。

h2 + p {font-variant:small-caps;}

◆ 一般同胞選擇符~

標籤 1 ~ 標籤 2

標籤 2 必須跟（不一定緊跟）在其同胞標籤 1 後面。

用 Shift+1 鍵左側的鍵輸入字元～（波浪號）。

h2 ~ a {color:red;}

◆ 通用選擇符*

（按 Shift+8）

通用選擇符*（常被稱為星號選擇符）是一個萬用字元，它匹配任何元素，因此下面這條規則

* {color:green;}

會導致所有元素（的文字和邊框）都變成綠色。不過，一般在使用*選擇符時，都會同時使用另一個選擇符，比如：

color 屬性設定的是前景色。前景色既影響文字也影響邊框，但人們通常只用它設定文字顏色。

總之，只有一個標籤名的選擇符會選中頁面中所有相同標籤的例項。而通過上下文選擇符，則可以指定標籤必須具備相應的祖先或同胞。

p * {color:red;}

這樣只會把 p 包含的所有元素的文字變成紅色。

這個選擇符有一個非常有意思的用法，即用它構成非子選擇符，比如：

section * a {font-size:1.3em;}

如圖 2-13 所示，任何是 section 孫子元素，而非子元素的 a 標籤都會被選中。至於 a 的父元素是什麼，沒有關係。

4. ID 和類選擇符

ID 和類為我們選擇元素提供了另一套手段，利用它們可以不用考慮文件的層次結構。只要你在 HTML 標記中為元素添加了 id 和 class 屬性，就可以在 CSS 選擇符中使用 ID 和類名，直接選中文件中特定的區域。

可以給 id 和 class 屬性設定任何值，但不能以數字或特殊符號開頭。

◆ 類屬性

類屬性就是 HTML 元素的 class 屬性，body 標籤中包含的任何 HTML 元素都可以新增這個屬性。下面這段程式碼展示了 HTML class 屬性的用法。

<h1 class="specialtext">This is a heading with the <span>same class</span> as the second paragraph.</h1>

<p>This tag has no class.</p>

<p class="specialtext"> When a tag has a class attribute, you can target it <span>regardless</span> of its position in the hierarchy.</p>

圖 2-14 展示了這段程式碼的顯示結果。

注意，我已經給其中兩個標籤添加了 specialtext 類。

1. 類選擇符

.類名

注意，類選擇符前面是點（.），緊跟著類名，兩者之間沒有空格。

類選擇符就是在 HTML 類名前面加一個點（英文句號）。

好，我們來為標籤應用如下 CSS 樣式。

p {font-family:helvetica, sans-serif; font-size:1.2em;}

.specialtext {font-style:italic;}

圖 2-15	兩個段落中文字的字型都變成了 Helvetica，而標題和第二個段落都有 specialtext 類， ⁴
所以都變成了斜體

應用這兩條規則的結果，就是兩個段落都以 Helvetica 字型（如果本地沒有該字型則使用瀏覽器通用的無襯線字型）顯示，而帶有 specialtext 類的段落同時也變成了斜體。h1 中的文字仍然使用瀏覽器預設字型（一般是 Times），因為 Helvetica 字型只應用給段落，不過由於它也有 specialtext 類，所以也應用了斜體。另外，沒有預設樣式的 span，由於我們沒有明確為其新增樣式，所以就繼承了其父元素的樣式。

2. 標籤帶類選擇符

如果你只想瞄準帶有這個類的段落，可以把標籤名和類選擇符寫在一塊，比如：

p {font-family:helvetica, sans-serif; font-size:1.2em;}

.specialtext {font-style:italic;}

p.specialtext {color:red;}

如圖 2-16 所示，第三條 CSS 規則只選擇帶 specialtext 類的段落。像這樣組合標籤名和類選擇符，可以讓你更精確地選擇特定的標籤。

圖 2-16通過組合標籤名和類選擇符，可以讓選擇符更具體

下面我們就把這個技巧進一步發揮一下。

p {font-family:helvetica, sans-serif; font-size:1.2em;}

.specialtext {font-style:italic;} p.specialtext {color:red;}

p.specialtext span {font-weight:bold;}

如圖 2-17 所示，單詞“regardless”變成了粗斜體，因為包含它的 span 位於一個帶有 specialtext 類的段落中。這四條規則全都會對 span 產生影響，因為它從其父元素，那個帶 specialtext 類的段落那裡，繼承了前三條規則的樣式。我們已經兩次提到了繼承，關於繼承我們放在本章後面再詳細介紹。

圖 2-17再新增一個選擇符，可以把選擇目標鎖定為更特殊的元素

3. 多類選擇符

可以給元素新增多個類，比如：

<p class="specialtext featured">Here the span tag <span>may or may not</span> be styled.</p>

多個類名，如這裡的 specialtext 和 featured，放在同一對引號裡，用空格分隔。實際上，更準確的說法，就應該是 HTML 的 class 屬性可以有多個空格分隔的值。要

選擇同時存在這兩個類名的元素，可以這樣寫：

.specialtext.featured {font-size:120%;}

注意，CSS 選擇符的兩個類名之間沒有空格，因為我們只想選擇同時具有這兩個類名的那個元素。如果你加了空格，那就變成了“祖先/後代”關係的上下文選擇符了。

每個類名分別用一個 HTML class 屬性的做法是常見的錯誤，正確的做法是像上面的程式碼那樣，只用一個 class 屬性，但給它設定多個值。本章後面還會講到多類名的實際用法。

第二章 CSS工作原理（剖析CSS規則）

第二章 CSS工作原理（剖析CSS規則）

第二章線性表2（鏈接表）

第二章資訊處理表示（2.1-ing）

springmvc工作原理（無原始碼解析）

《演算法》第二章——Nuts and bolts（螺絲和螺帽）

SpringMVC工作原理（含案例圖解）

Java語言程序設計（第三版）第二章課後習題答案（僅供參考）

一文詳解 LVS、Nginx 及 HAProxy 工作原理（附大圖）

瀏覽器工作原理（五）：CSS解析（CSS parsing）

反向傳播的工作原理（深度學習第三章）

linux設備驅動之platform平臺總線工作原理（三）

【SpringMVC架構】SpringMVC入門實例，解析工作原理（二）

第九章 Servllet工作原理解析

Servlet工作原理（讀許令波《深入分析javaWeb技術內幕》）筆記

css最佳實踐（reset.css）

CSS基礎樣式（base.css）

三層交換機工作原理（轉載）

瀏覽器工作原理（二）：瀏覽器渲染過程概述

Windows核心編程之核心總結（第二章字符和字符串處理）（2018.5.27）

詳解postfix郵箱服務器安裝、配置及其工作原理（內附源碼包）

第二章 CSS工作原理（剖析CSS規則）

相關推薦