1.為文件新增樣式的三種方法

• 行內樣式（寫在特定 HTML 標籤的 style 屬性裡）

• 嵌入樣式（嵌入的 CSS 樣式是放在 HTML 文件的 head 元素中）

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

除了以上三種為頁面新增樣式的方法，還有一種在樣式表中連結其它樣式表的方法，那就是應用 @import

指令。就像這樣：@import url(css/styles2.css).
要注意的是， @import 指令必須出現在樣式表中其他樣式之前，否則 @import 引用的樣式表不會被載入。

2.CSS規則命名慣例

CSS 規則由 選擇符 和 宣告 兩部分組成，其中選擇符用於指出規則所要選擇的元素，宣告則又由兩部分組成：屬性 和 值。屬性指出要影響元素哪方面的樣式，值就是屬性的一個新狀態。

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

• 多個宣告包含在一條規則裡

• 多個選擇符組合在一起

• 多條規則應用給一條選擇符

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

• 上下文選擇符（基於祖先或同胞元素選擇一個元素）

• ID和類選擇符（基於 id 和 class 屬性的值選擇的元素）

• 屬性選擇符（基於屬性的有無和特徵選擇元素）

3.上下文選擇符

格式：標籤 1 標籤 2 {宣告}
示例：article p {font-weight:bold;}
說明：標籤2就是我們想要選擇目標，而且只有在標籤 1 是是其祖先元素（不一定是父元素）的情況下才會被選中。

上下文選擇符，嚴格來講（也就是 CSS 規範裡），叫後代組合式選擇符（ descendant combinator selector），就是一組以空格分隔的標籤名。用於選擇作為指定祖先元素後代的標籤。

提示：請記住，上下文選擇符以空格作為分隔符，而分組選擇符則以逗號作為分隔符

。

4.特殊的上下文選擇符

4.1 子選擇符 >

格式：標籤 1 > 標籤 2
示例：section > h2 {font-style:italic;}
說明：標籤 2 必須是標籤 1 的子元素，或者反過來說， 標籤 1 必須是標籤 2 的父元素。與常規的上下文選擇符不同，這個選擇符中的標籤 1 不能是標籤 2 的父元素之外的其他祖先元素。

4.2 緊鄰同胞選擇符 +

格式：標籤 1 + 標籤 2
示例：h2 + p {font-variant:small-caps;}
說明：標籤 2 必須緊跟在其同胞標籤 1 的後面。

4.3 一般同胞選擇符 ~

格式：標籤 1 ~ 標籤 2
示例：h2 ~ a {color:red;}
說明：標籤 2 必須跟（不一定緊跟）在其同胞標籤 1 後面。

4.4 通用選擇符 *

格式：* {...}
示例：* {color:green;}
說明：上面示例會導致所有元素（的文字和邊框）都變成綠色。
不過，一般在使用 * 選擇符時，都會同時使用另一個選擇符。
例如：p * {color:red;} // 這樣只會把p包含的所有元素的文字變成紅色。
還有一個非常有意思的用法，即用它構成非子選擇符：
例如：section * a {font-size:1.3em;}
這樣，任何是 section 孫子元素，而非子元素的 a 標籤都會被選中。至於 a
的父元素是什麼，沒有關係。
總之，只有一個標籤名的選擇符會選中頁面中所有相同標籤的例項。而通過上下文
選擇符，則可以指定標籤必須具備相應的祖先或同胞。

5.ID 和類選擇符

ID 和類為我們選擇元素提供了另一套手段，利用它們可以不用考慮文件的層次結構。

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

5.1 類屬性

5.1.1 類選擇符

格式：.類名
示例：.specialtext {font-style:italic;}

5.1.2 標籤帶類選擇符

格式：標籤名.類名
示例：p.specialtext {color:red;}

5.1.3 多類選擇符

格式：.類名.類名
示例：.specialtext.featured {font-size:120%;}
說明：CSS選擇符的兩個類名之間沒有空格，因為我們只想選擇同時具有這兩個類名的的那個元素。如果加了空格，那就變成了“祖先/後代”關係的上下文選擇符了。

提示：不要像使用 ID 一樣，每個類都指定一個不同的類名，然後再為每個類編寫規則。如果你確實有這種隨意使用類的習慣，那說明你可能想大多數對 CSS 充滿激情的初學者一樣，還不瞭解繼承和上下文選擇符的作用。 於是，你可能會給每個標籤都重複寫同樣的樣式（比如為頁面中很多標籤分別指定相同的字型）。實際上，繼承和上下文選擇符能讓不同的標籤共享樣式，從而降低你需要編寫和維護的 CSS 量。

5.2 ID屬性

格式：#ID名 或 標籤名#ID名
示例：#specialtext {CSS 樣式宣告 } 或 p#specialtext {CSS 樣式宣告 }

提示：ID還可以用於頁內導航。 例如：<a href="#bio">Biography</a>，注意 href 屬性值開頭的 # ，它表示這個連結的目標在當前頁面中，因而不會觸發瀏覽器載入頁面（如果沒有 #，瀏覽器就會嘗試載入 bio 目錄下的預設頁面了）。如果連結的 href 屬性裡只有一個 #，那麼點選該連結會返回頁面頂部。例如：<a href="#">Back to Top</a>，換句話說，要寫一個“返回頂部”連結，根本不需要 ID 為 # 的目標元素。

注意：如果暫時不知道某個 href 應該放什麼 URL，也可以用 # 作為佔位符，但不能把該屬性留空。 因為 href 屬性值為空的連結的行為跟正常連結不一樣。這樣，團隊中的其他人將來可以用中間層（比如 PHP）變數替換 #，以便動態接收來自資料庫的 URL。

6.屬性選擇符

6.1 屬性名選擇符

格式：標籤名[屬性名]
示例：img[title] {border:2px solid blue;}

提示：一般來說，人們經常給 alt 和 title 屬性設定相同的值。 alt 屬性中的文字會在圖片因故未能載入時顯示，或者由螢幕閱讀器朗讀出來。而 title 屬性會在使用者滑鼠移動到圖片上時，顯示一個包含相應文字的提示。

6.2 屬性值選擇符

格式：[屬性名="屬性值"]
示例：img[title="red flower"] {border:4px solid green;}
說明：在 HTML5 中， 屬性值的引號可加可不加，在此為了清楚起見，建議新增。

7.偽類

偽類（Pseudo classes）是選擇符的螺栓，用來指定一個或者與其相關的選擇符的狀態。它們的形式是 selector:pseudo class { property: value; }，簡單地用一個半形英文冒號（:）來隔開選擇符和偽類。

偽類可以分為兩種：

• UI（ User Interface，使用者介面）偽類會在 HTML 元素處於某個狀態時（比如滑鼠
  指標位於連結上），為該元素應用 CSS 樣式。

• 結構化偽類會在標記中存在某種結構上的關係時（如某個元素是一組元素中的第
  一個或最後一個），為相應元素應用 CSS 樣式。

7.1 UI偽類

7.1.1 連結偽類

針對連結的偽類一共有4個，因為連結始終會處於如下4種狀態之一。

• Link
• Visited
• Hover
• Active

提示：由於這4個偽類的特指度相同，如果不按照這裡列出的順序使用它們，瀏覽器可能不會顯示預期效果。方便記憶：LoVe? HA! 大寫字母就是每個偽類的頭一個字母。

提示：一個冒號（ : ）表示偽類，兩個冒號（ :: ）表示 CSS3 新增的偽元素。

7.1.2 :focus偽類

表單中的文字欄位在使用者單擊它時會獲得焦點，然後使用者才能在其中輸入字元。
例如：input:focus {border:1px solid blue;}
上面一行程式碼會在游標位於 input 欄位中時，為該欄位新增一個藍色邊框。這樣可以讓使用者明確地知道輸入的字元會出現在哪裡。

7.1.3 :target偽類

如果使用者點選一個指向頁面中其他元素的連結，則那個元素就是目標（ target），可以
用:target 偽類選中它。
例如：對於這個連結：<a href="#more_info">More Information</a>
位於頁面的其它地方、ID 為 more_info 的那個元素就是目標。
假設該元素為這樣：<h2 id="more_info">This is the information you are looking for.</h2>
那麼，CSS規則：#more_info:target {background:#eee}
會在使用者單擊連結轉向 ID 為 more_info 的元素時，為該元素新增灰色背景。

維基百科在其引證中大量使用了:target 偽類。維基百科的引證連結就是正文裡那些
不起眼的數字連結。引證本身則位於長長的頁面的最下方。如果沒有:target 應用的
突出顯示，很難知道你點選的連結對應著一大堆引證中的哪一個。

7.2 結構化偽類

結構化偽類可以根據標記的結構應用樣式，比如根據某元素的父元素或前面的同胞元素是什麼。

7.2.1 :first-child和:last-child

格式：
e:first-child
e:last-child
示例：ol.results li:first-child {color:blue;}

7.2.2 :nth-child

格式：e:nth-child(n)
示例：li:nth-child(3)
說明：e 表示元素名，n 表示一個數值（也可以使用 odd 或 even）

8.偽元素

顧名思義，偽元素就是你的文件中若有實無的元素。

8.1 ::first-letter偽元素

格式：e::first-letter
示例：p::first-letter {font-size:300%;}

提示：如果不用偽元素建立這個首字元放大效果，必須手工給該字母加上標籤，
然後再為該標籤應用樣式。而偽元素實際上是替我們添加了無形的標籤。

8.2 ::first-line偽元素

格式：e::first-line
示例：p::first-line {font-variant:small-caps;}
說明：選中文字段落（一般情況下是段落）的第一行。

8.3 ::before和::after偽元素

格式：
e::before
e::after
示例：
對標記：
<p class="age">25</p>
新增如下樣式：
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
會得到如下結果：
Age: 25 years.

提示：如果標籤中的內容是通過資料庫查詢生成的結果，那麼用這種技巧再合適不過了。
因為所有結果都是數字，使用這兩個偽元素可以在把數字呈現給使用者時，加上說明
性文字。

參考資料