《css權威指南》 第三版

第一章 CSS和文件

1.CSS(Cascading style sheet)，層疊樣式表。

2.CSS將html中的元素分為替換元素和非替換元素。
- 替換元素：用來替換元素內容的部分並非由文件內容直接表示，如img/input元素
- 非替換元素：內容由使用者代理（瀏覽器）在元素本身生成的框中顯示，如span/p等

3.CSS還將html中的元素分為塊級元素和行內元素，對應於CSS中的display屬性。
- 塊級元素:生成一個元素框，填充器父元素的內容區，旁邊不能有其他元素。如p和div。
- 行內元素：在一個文字行內生成元素框，不會打斷這行文字，如strong和em。

4.link元素用於引用外部CSS；style元素用於包含內如樣式，優先順序高；還可以在style元素中呼叫@import。

第二章 選擇器

1.CSS的規則結構:選擇器 宣告塊。宣告塊由多個宣告組成，宣告是鍵值對。

2.選擇器：
- 元素選擇器：如html {color:black;}
- 選擇器分組：支援同時設定多個元素，如h2,p {color:gray;}
- 宣告分組：設定多個屬性，如h1 {font:18px;colr:purle;}
- 通配選擇器：匹配任何元素，如* {color: red;
- 類選擇器：例如p.warning選在p元素中class為warning的元素，.warning

選擇素有class為warning的元素。
- 多類選擇器：例如<p class=" a b"></p>，選擇該元素是寫作.a.b或.b.a
- ID選擇器：例如#test {...}選擇id為test的元素，不允許結合使用，因為id屬性不能以空格分隔
- 屬性選擇器：例如h1[class][style] {...}選擇h1元素含有class和style屬性的元素，其中可以設定class="abc"選取class等於abc的元素，如果class的值有多個，則使用class~="abc"選擇部分含有屬性值abc的元素，類似的還有foo^="bar"選擇屬性值以”bar”開頭，foo$="bar"選擇屬性以”bar”結尾，foo*="bar"選擇屬性包含”bar”的所有元素。此外foo|="en"選擇foo屬性以en開頭或者等於en的所有元素。
- 後代選擇器：元素之間使用空格分割，會選擇器所有後代元素。
- 選擇直接子元素：使用>，例如h1>strong{...}選擇h1後面子標籤為strong的元素
- 相鄰兄弟元素：使用+，例如h1+ul {...}選擇h1相信的ul元素。
- 偽類和偽元素（詳見https://blog.csdn.net/q1056843325/article/details/53560588）：
- 偽類選擇器：使用：。例如a:visited {...}
- 偽元素：CSS2.1定義四個偽元素，首字母樣式first-letter，第一行樣式first-line，設定之前before和之後after元素的樣式。

第三章 結構和層疊

1.選擇器的特殊性決定瀏覽器最終的元素呈現樣式。選擇器的特殊性規則如下圖，特殊性值最高的樣式呈現的優先順序高。

2.內聯樣式的特殊性最高。

3.如果特殊性相同，就需要比較重要性。重要性使用!import來標誌。

4.繼承性決定子元素會使用父元素的樣式，一般的，大多數框模型屬性，如邊距、邊框等不能繼承，繼承的值沒有特殊性，連0都不是，小於特殊性是0的選擇器。

5.特殊性和重要性都相同後，比較樣式宣告的順序，靠前的權重大。

第四章 值和單位

1.CSS支援數字，百分數（相對於另一個元素或者是父元素繼承的值），顏色支援英文簡寫，RGB。
2.長度單位：
- 絕對長度單位：
- 英寸in：1in=2.54cm
- 釐米cm：
- 毫米mm：
- 點pt：1in=72pt
- 派卡pc:印刷術語，1pc=12pt
- 相對長度單位：
- em：元素的字型高度，1em定義為給定字型的font-size值
- ex：字母x的高度
- px：畫素長度

3.關鍵字inherit的意思是屬性的值與其父元素的值相同。

第五章 字型

1.CSS定義五種通用字型：
- serif：成比例，有上下短線
- sans-serif：成比例，無上下短線
- monospace：不成比例，字元寬度完全相同
- cursive：模仿人的手寫體。
- fantasy：

2.一些樣式屬性：
- font-family指定字型
- font-weight指定字型加粗，變細等
- font-size指定字型大小，可以設定絕對、相對大小
- font-style指定字型風格，例如傾斜
- font-variant指定字型變形，例如小型大寫字母small-caps
- font-stretch拉伸字型
- font-size-adjust調整字型
- font合併上述所有屬性

第六章 文字屬性

1.一些文字樣式屬性：
- 縮排文字：text-indent
- 水平對齊：text-align
- 行高：line-height
- 垂直對齊:vertical-align
- 字間隔：word-spacing
- 字母間隔：letter-spacing
- 文字轉換：text-transform，例如大小寫
- 文字裝飾：text-decoration，例如加下劃線
- 文字陰影：text-shadow
- 處理空白符：white-space
- 文字方向：direction

第七章 基本視覺格式化 & 第八章 內邊距、邊框和外邊距

1.塊級元素框模型，如下圖。

3D示意圖如下：

第九章 顏色和背景

1.前景色：color

2.背景色：background-color，背景圖：background-image，有方向的重複：background-repeat，背景定位：backround-position，滾動關聯：background-attachment，彙總：background。

第十章 浮動和定位

1.浮動屬性：float。

2.設定一個元素兩邊無浮動元素：clear屬性。

3.定位:position
- static
- relative
- absolute
- fixed
- inherit

4.元素可見性：visibility

5.改變元素的覆蓋順序：z-index

未完待續…