《CSS設計指南》筆記--CSS工作原理

通過閱讀和學習書籍《CSS設計指南》總結
《CSS設計指南》/Charles lvyke-Smith著.李松峯譯—人民郵電出版社
本書網站：http://www.stylinwithcss.com
強烈推薦！！深入淺出，精簡，適合入門！！

CSS工作原理

2.1 剖析CSS規則

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

2.1.1 爲文檔添加樣式的三種方法

  有三種方法可以把CSS添加到網頁中，分別是寫在元素標籤裏（行內樣式），寫在<style>標籤裏（嵌入樣式）和寫在單獨的CSS樣式表中（鏈接樣式）。

• 行內樣式：行內樣式是寫在特定HTML標籤的style屬性裏，其作用非常有限。行內樣式只能影響它所在的標籤，而且總會覆蓋嵌入樣式和鏈接樣式。

• 嵌入樣式：嵌入的CSS樣式是放在HTML文檔的head元素中，嵌入樣式的應用範圍僅限於當前頁面。頁面樣式會覆蓋外部樣式表的樣式，但會被行內樣式覆蓋。

• 鏈接樣式：在創建包含多個頁面的網站時，需要把樣式集中在一個單獨的文件裏，這個文件就叫樣式表。樣式表其實就是一個擴展名爲.css的文本文件。可以在任意多個HTML頁面中鏈接同一個樣式表文件，每個頁面中只需加入類似下面的這一行代碼即可：

<link href="style.css" rel="stylesheet" type="text/css" />

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

  除了以上三種爲頁面添加樣式的方法，還有一種在樣式錶鏈接其他樣式表的方法，那就應用@import指令（是一種at規則）：

@import url（css/style2.css）

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

2.1.2 CSS規則命名慣例

  CSS規則分兩部分，即選擇符和聲明。聲明又由兩部分組成，即屬性和值。聲明包含在一對花括號內。

p {color:red;}
p {color:red; font-size:12px; font-weight:bold;}
h1,h2,h3 {color:blue; font-weight:bold;}

2.2 上下文選擇符

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

標籤1 標籤2{聲明}

  其中，標籤2就是我們選擇的目標，而且只有在標籤1 是其祖先元素（不一定是父元素）的情況下才會被選中。

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

article p {font-weight:bold;}
article h1 em {color:green;}//雙上下文選擇符可以選中更具體的標籤

2.3 特殊的上下文選擇符

2.3.1 子選擇符>

標籤1 >標籤2 

  標籤2 必須是標籤1 的子元素，或者反過來說，標籤1 必須是標籤2 的父元素。這個選擇符中的標籤1不能是標籤2之外的其他祖先元素。如：

section > h2 {font-style:italic；}

2.3.2 緊鄰同胞選擇符+

標籤1 + 標籤2 

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

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

2.3.3 一般同胞選擇符~

標籤1~標籤2

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

h2 ~ a {color:red;}

2.3.4 通用選擇符*

  通用選擇符*（常被稱爲星號選擇符）是一個通配符，它匹配任何元素。如：

p * {color:green;}
section * a {font-size:1.3em;}//任何是section孫子元素，而非子元素的a標籤都會被選中

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

2.4 ID和類選擇符

2.4.1 類屬性

  類屬性就是HTML元素的class屬性，body標籤中包含的任何HTML元素都可以添加這個屬性。

• 類選擇符：就是在HTML類名前面加一個點。如：

.specialtext {font-style：italic}

• 標籤帶類選擇符：把標籤名和類選擇符號寫在一塊，比如：

p.specialtext {color:red;}//更精確的選擇特定的標籤
p.specialtext span{font-weight:bold;}

• 多類選擇符。如：

<p class="specialtext featured">Here the span tag <span>may or may not </span> be styled.</p>
.specialtext.featured {font-size:120%;}//兩個類名之間沒有空格，這裏選擇同時具有這兩個類名的那個元素

2.4.2 ID屬性

  ID與類寫法類似，如：

#specialtext {CSS樣式聲明}

2.4.3 什麼時候用ID，什麼時候用類

  ID的用途是在頁面標記中唯一地標識一個特定的元素。它能夠爲我們編寫CSS規則提供必要的上下文，排除無關的標記，而只選擇該上下文中的標籤。

  相對來說，類的目的是爲了標識一組具有相同特徵的元素，可以應用給任意多個頁面中的任意多個HTML元素的公共標識符，以便我們爲這些元素應用相同的CSS樣式。而且，使用類也讓爲不同標籤名的元素應用相同的樣式成爲可能。

  注：不要亂用類。要充分了解繼承和上下文的選擇符的作用。利用其讓不同的標籤共享樣式，從而降低你需要編寫和維護的CSS量。

2.5 屬性選擇符

2.5.1 屬性名選擇符

標籤名[屬性名] //選擇任何帶有屬性名的標籤名
img[title] {border:2px solid blue;}

2.5.2 屬性值選擇符

標籤名[屬性名="屬性值"]//選擇任何帶有值爲屬性值的屬性名的標籤名
img[title="red flower"] {border:4px solid green;}

2.6 僞類

僞類分兩種。

• UI（User Interface，用戶界面）僞類會在HTML元素處於某個狀態時（比如鼠標指針位於鏈接上），爲該元素應用CSS樣式。

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

2.6.1 UI僞類

  UI僞類會基於HTML元素的狀態應用樣式。

  1. 結構僞類

• Link：此時，鏈接就在那兒等着用戶點擊。

• Visited：用戶此前點擊過這個鏈接。

• Hover：鼠標指針正懸停在鏈接上。

• Aactive：鏈接正在被點擊（鼠標在元素上按下，還沒有釋放）。

一個冒號（：）表示僞類，兩個冒號（：：）表示CSS3新增的僞元素。如：

a:hover {text-decoration:none;}
p:hover {background-color:gray;}

  2. focus僞類

e:focus //e表示任何元素

  表單中的文本字段在用戶單擊它時會獲得焦點，然後用戶才能在其中輸入字符。如：

intput:focus {border:1px solid blue;}

  會在光標位於input字段中時，爲該字段添加一個藍色框。這樣可以讓用戶明確知道輸入的字符會出現在哪裏。

  3. ：target僞類

e: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的元素時，爲該元素添加淺灰色背景。

2.6.2 結構化僞類

  1. ：first-child和：last-child

e:first-child //代表一組同胞元素中的第一個元素
e:last-child  //代表最後一個

  2. ：nth-child

e:nth-child(n) // n表示一個數值，也可以是odd或者even，2n+1等

2-7 僞元素

  僞元素，就是你的文檔中若有實無的元素。
  1. ：：first-letter僞元素

p::first-letter {font-size:300%;}//段落首字母放大效果

  2. ：：first-line僞元素

p::first-line {font-variant:small-caps;}//把第一行以小型字母顯示

  3. ：：before和：：after僞元素

e::before
e::after //用於在特殊元素前面或後面添加特殊元素

2.8 繼承

2.9 層疊

  詳見《HTML+CSS基礎課程》學習筆記六
  以下就是瀏覽器層疊各個來源樣式的順序：

• 瀏覽器默認樣式

• 用戶樣式表

• 作者連接樣式表（按照它們鏈接到頁面的先後順序）

• 作者嵌入樣式

• 作者行內樣式

  瀏覽器會按照上述順序依次檢查每個來源的樣式，並在有定義的情況下，更新對每個標籤屬性值的設定。整個檢查更新過程結束後，再將每個標籤以最終設定的樣式顯示出來。

2.9.1 層疊規則：

規則一：找到應用給每個元素和屬性的你所有聲明；
規則二：按照順序和權重排序；
規則三：按特指度排序；
規則四：順序決定權重（當特指度相同時）。

2.9.2 計算特指度

  首先，有一個簡單的記分規則，即對每個選擇符都要按下面的“ICE”公式計算三個值：

I-C-E

• 選擇符中有一個ID，就在I的位置加1；

• 選擇符中有一個類，就在C的位置上加1；

• 選擇符中有一個元素（標籤）名，就在E位置上加1；

• 得到一個三位數。

p                                  0-0-1 特指度 =1
p.largetext                        0-1-1 特指度 =11
p#largetext                        1-0-1 特指度 =101
body p#largetext                   1-0-2 特指度 =102
body p#largetext ul.mylist         1-1-3 特指度 =113
body p#largetext ul.mylist li      1-1-4 特指度 =114

簡單層疊要點：

• 規則一：包含ID的選擇符勝過包含類的選擇符，包含類的選擇符勝過包含標籤的選擇符

• 規則二：如果幾個不同來源都爲同一個標籤的同一個屬性定義了樣式，行內樣式勝過嵌入樣式，嵌入樣式勝過鏈接樣式。在鏈接的樣式表中，具有相同特指度的樣式，後聲明的勝過先聲明的。

• 規則三：設定的樣式勝過繼承的樣式，此時不考慮特指度（即顯式設定優先）。

2.10 規則聲明

CSS屬性值主要分以下三類。

• 文本值。

• 數字值。

• 顏色值

《HTML+CSS基礎課程》學習筆記七 》（格式化排版）

《HTML+CSS基礎課程》學習筆記十 》（顏色值，文本值，代碼簡寫，文本居中設置）

《CSS3實戰》筆記–色彩模式和不透明度

Colrd:一個Pinterest風格的站點有很多啓發人創造的圖片和照片，以及相應的調色板。

Adobe Kuler:Adobe Kuler的官方網站提供了數千種色樣，調色板創建工具，以及其他人選用的時尚顏色。