摘要：元素顯示元素塊級元素相互堆疊在一起沿頁面向下排列，每個元素分別占一行。行內元素盒子會收縮包裹其內容，并且會盡可能包緊。命名慣例規則由選擇符和聲明兩部分組成，其中選擇符用于指出規則所要選擇的元素，聲明則又由兩部分組成屬性和值。

文檔流，就是HTML元素會按照它們各自在標記中出現的先后順序，依次從頁面上方“流向”下方。

塊級元素
相互堆疊在一起沿頁面向下排列，每個元素分別占一行。塊級元素盒子會擴展到與父元素同寬，所有塊級元素的父元素都是body，而它的寬度默認與瀏覽器的窗口一樣寬（當然有少量邊距）。

行內元素
相互并列，只有在空間不足以并列的情況下才會折到下一行顯示。行內元素盒子會“收縮包裹”其內容，并且會盡可能包緊。

可替換元素
可替換元素就是瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。替換元素一般有內在尺寸，所以具有widht和height，可以設定。

比如：，沒有指定img的width和height，就按照內在尺寸顯示，也可以通過設置width和height來顯示圖片。

不可替換元素
大多數元素是不可替換元素，即其內容直接表現給瀏覽器。

行內樣式
行內樣式是寫在html標簽上的style，比如：

inline css styling

嵌入樣式
嵌入的css樣式是防在html文檔的head元素中，比如：

鏈接樣式
將樣式表文件引到當前文檔中，比如：

樣式表中鏈接其他樣式
@import url(css/style2.css)
@import指令必須出現在樣式表中其他樣式之前，否則@import引用的樣式表不會被加載。

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

p {color: red;}
p：選擇符
{color: red;}：聲明
color：屬性
red：值

對這個基本結構，有三種方法進行擴展：

多個聲明包含在一條規則里

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

多個選擇符組合在一起

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

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

h1, h2, h3 {color: red; font-weight: bold;}
h3 {font-style: italic;}

上下文選擇符：就是一組以空格分隔的標簽名，用于選擇作為指定祖先元素后代的標簽。

article p {font-size: 14px;}
只有article后代的p元素才會應用后面的樣式。

* *特殊的上下文選擇符*
    * 子選擇符 >  
    標簽1 > 標簽2，標簽2必須是標簽1的子元素。 section > h2 {font-weight: bold;}
    * 緊鄰同胞選擇符 +  
    標簽1 + 標簽2，標簽2必須緊跟在其同胞標簽1的后面。 h2 + p {font-size: 14px;}
    * 一般同胞選擇符 ~  
    標簽1 ~ 標簽2，標簽2必須跟（不一定緊跟）在其同胞標簽1后面。 h2 ~ a {color: red;}
    * 通用選擇符 *  
    匹配任何一個元素。 * {margin: 0; padding: 0;}

ID和類選擇符
同一個頁面中的每一個id屬性都必須只能用一次。

同一個頁面中相同的類可以有多個，類的目的是為了標識一組具有相同特征的元素。

#nav {
    width: 100%;
}
.logo {
    width: 80px;
    height: 80px;
}

屬性選擇符

屬性名選擇符
標簽名[屬性名]

選擇任何帶有屬性名的標簽名。img[title] {border: 1px solid green;}

屬性值選擇符
標簽名[屬性名="屬性值"]

選擇任何帶有值為屬性值的屬性名的標簽名。img[title="flower"] {border: 1px solid red;}
在html5中屬性值的引號可加可不加

偽類這個叫法源自它們與類相似，但實際上并沒有類會附加到標記中的標簽上。偽類分兩種：UI偽類和結構化偽類。

UI偽類
UI（User Interface，用戶界面）偽類會在HTML元素處于某個狀態時，為該元素應用CSS樣式。

鏈接偽類

鏈接還未點擊

visited 鏈接已經點擊過
hover 鼠標懸停在鏈接上
active 鏈接正在被點擊

a:link {color: red;}
a:visited {color: blue;}
a:hover {color: green;}
a:active {color: yellow;}

:focus偽類
表單中的文本字段獲取焦點時

input:focus {border: 1px solid red;}

:target偽類
如果用戶點擊一個指向頁面中其他元素的鏈接，則那個元素就是目標（target），可以用:target偽類選中它。

例如：用戶點擊鏈接轉向ID為more的元素時，為該元素添加紅色背景。

more information
This is the information

#more:target {background: red;}

結構化偽類
結構化偽類會在標記中存在某種結構上的關系時，為相應元素應用CSS樣式。

:first-child 和 :last-child
:first-child代表一組同胞元素中的第一個元素，而:last-child則代表最后一個。

:nth-child
:nth-child(n)， n代表一個數值，一組同胞元素中第n個元素。

偽元素就是你的文檔中若有實無的元素。

::first-letter
選中首字母

p::first-letter {font-size: 300%;}

::first-line
可以選中文本段落（一般情況下是段落）的第一行

p::first-line {font-variant: small-caps;}

::before 和 ::after偽元素
可用于在特定元素前面和后面添加特殊內容。

18

.age::before {content: "Age: ";}
.age::after {content: " years.";}

搜索引擎不會取得偽元素的信息（因為它在標記中并不存在）。因此，不要通過偽元素添加你想讓搜索引擎索引的重要內容。

CSS中的元素會繼承其祖先元素中一部分CSS屬性的值。
字體和文本樣式是可以繼承的。

層疊，就是層疊樣式表中的層疊，是一種樣式在文檔層次中逐層疊加的過程，目的是讓瀏覽器面對某個標簽特定屬性值的多個來源，確定最終使用哪個值。

瀏覽器層疊各個來源樣式的順序：

瀏覽器默認樣式表

用戶樣式表

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

作者嵌入樣式

作者行內樣式

層疊規則：

層疊規則一：找到應用給每個元素和屬性的所有聲明。
層疊規則二：按照順序和權重排序。
層疊規則三：按特指度排序。

標記規則：
優先級順序：ID、類、元素（標簽）名
比如：
div .nav             特指度：0 1 1
div ul.nav .item    特指度：0 2 2
#nav li.item         特指度：1 1 1
div#nav li.item     特指度：1 1 2
比較時從特指度高向特指度低方向比較

層疊規則四：順序決定權重。
如果兩條規則都影響某元素的同一屬性，而且它們的特指度也相同，則位置最靠下（或后聲明）的規則勝出。
注：!import的優先級最高

文本值
所有CSS的屬性都有文本值。如：visibility屬性有visible和hidden值。

數字值
數字值用于描述元素的各種長度。數字值主要分兩類：絕對值和相對值。

顏色值

1. 顏色名，如red
2. 十六進制顏色（#RRGGBB或#RGB），如#ff803a
3. RGB顏色值（R， G， B），如rgb(255, 255, 255)
4. RGB百分比值（R%，G％，B％），如100%, 0%, 0%
5. HSL（色相，飽和度%，亮度%），如HSL(0, 0%, 0%)
6. Alpha通道，1表示完全不透明，0表示完全透明