CSS樣式概述
CSS是Cascading Style Sheet 的縮寫。譯作“層疊樣式表單”。是用於（增強）控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。
- 引用位置
-
- 作為元素的style特性的值
- 在<style>元素內部，位於<head>元素中
- 使用<link>引用外部樣式
選擇器
指定聲明應用於哪個或哪些元素，不同元素之間用逗號隔開，例如：td {width:36px;}
- 聲明
用於設置如何樣式化在選擇器中引用的元素
- 屬性
它是該規則希望影響的所選元素的屬性
- 值
它是屬性的說明
- 繼承
應用於某個元素的屬性經常會被它的子元素所繼承，可以針對特定的元素設置樣式來覆蓋已繼承的樣式
- 通用選擇器
*{}
- 類型選擇器
類型選擇器匹配以逗號隔開的元素列表所標識的所有元素，例如：h1,h2,h3 {}
- 類選擇器
類選擇器可用於將一條規則應用於附帶class特性的一個元素或多個元素，其中class特性的值與類選擇器中指定的值相匹配，前綴使用"."，例如：.classname {} 或者 td.classname {}
- id選擇器
id選擇器和類選擇器工作方式類似，但是使用的是id特性的值，前綴使用"#"，例如：#idname {}
- 子選擇器
子選擇器所匹配的元素是另外一個元素的直接子元素，例如：td>b {}
- 派生選擇器
派生選擇器所匹配的元素類型是另一個指定元素的派生元素或內嵌的元素，例如：table b {}
- 相鄰兄弟選擇器
相鄰兄弟選擇器匹配指定元素的相鄰兄弟元素類型。例如：h1+p {}
- 通用兄弟選擇器
通用兄弟選擇器匹配指定元素的任何兄弟元素類型，即使它們不是直接的先后關系，例如：h1~p {}
- 特性選擇器
特性選擇器可以使用元素附帶的特性以及特性的值，例如：p[特性選擇條件] {}
偽類
偽類用於向某些選擇器添加特殊的效果。偽類對元素進行分類是基於特征而不是它們的名字、屬性或者內容。
- :first-child 向元素的第一個子元素添加樣式。
- :link 向未被訪問的鏈接添加樣式。
- :vistited 向已被訪問的鏈接添加樣式。
- :hover 當鼠標懸浮在元素上方時，向元素添加樣式。
- :active 向被激活的元素添加樣式。
- :focus 向擁有鍵盤輸入焦點的元素添加樣式。
- :lang 向帶有指定 lang 屬性的元素添加樣式。
偽元素
偽元素用於向某些選擇器設置特殊效果。
- :first-letter 向文本的第一個字母添加特殊樣式。
- :first-line 向文本的首行添加特殊樣式。
- :before 在元素之前添加內容。
- :after 在元素之后添加內容。
框模型
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。
-
- element : 元素。
- padding : 內邊距，也有資料將其翻譯為填充。
- border : 邊框。
- margin : 外邊距，也有資料將其翻譯為空白或空白邊。
元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。背景應用於由內容和內邊距、邊框組成的區域。
內邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設置：
|
* {
margin: 0;
padding: 0;
}
|
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，請看下圖：
|
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
|
內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
瀏覽器兼容性
一旦為頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標准模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。
屬性說明
- 字體屬性
-
- font：可以設置多個字體屬性，屬性之間用空格隔開
- font-family：指定字型，可附帶多個值，第一個首選字型，然后第二選擇，最后通用字體系列
- font-size：設置字體大小
- font-size-adjust：設置字體的縱橫比值，也就是小寫字母x與字體高度的比值
- Cfont-stretch：設置字母的寬度
- font-style：設置字體樣式
- font-variant：用於創建與小寫字母具有相同尺寸的大寫字母
- font-weight：設置文本粗細程度
- color：字體顏色
- 文本屬性
-
- letter-spacing：設置字母之間的距離
- text-align：設置文本的對齊方式
- text-decoration：指定字體外觀，例如：underline、overline、line-through、blink
- text-indent：設置文本縮進量
- text-shadow：用於創建文本的陰影
- text-transform：指定文本的大小寫
- white-space：指示空格的處理方式
- word-spacing：指定單詞之間的距離
- 顏色屬性和背景屬性
-
- background：用於設置背景，可設置多個屬性，屬性之間用空格隔開
- background-attachment：設置背景圖為固定在網頁中的一個位置還是隨着網頁滾動
- background-color：設置背景顏色
- background-image：設置背景圖像
- background-position：設置背景圖相對於左上角的位置
- background-repeat：指定是否重復背景圖
- background-positionX：指定背景圖在水平方向上的位置
- background-positionY：指定背景圖在垂直方向上的位置
- 邊框屬性
-
- border-style（bottom、left、top、right）：指定了邊框周圍線的樣式
- border-width（bottom、left、top、right）：指定邊框線的寬度
- border-color（bottom、left、top、right）：指定邊框線的顏色
- 范圍屬性
-
- height：指定塊元素的垂直高度
- width：指定元素水平寬度
- line-height：指定文本的高度，可用於控制行間距
- max-height：指定塊級別元素的最大高度
- max-width：指定塊級別元素的最大寬度
- min-height：指定塊級別元素的最小高度
- min-width：指定塊級別元素的最小寬度
- 頁邊距屬性
-
- margin（bottom、left、top、right）：用於設置框周圍頁邊距的寬度
- 內邊距屬性
-
- padding（bottom、left、top、right）：設置元素邊框和其內容之間的距離
- 列表屬性
-
- list-style：設置項目列表、編號列表和定義列表的外觀樣式
- list-style-position：設置標記符號放置在列表每一項的內部還是這些項的左邊
- list-style-type：指定項目列表應當使用的項目符號或編號的類型
- marker-offset：指定列表項和其標記符號之間的空間
- 位置屬性
-
- position：指定某個元素的定位方案
-
- absolute 固定元素在畫布上相對於其包含元素的某個特定位置
- static 固定元素在網頁的同一個位置，即使用戶滾動網頁也保持在該位置
- relative 將元素放置在距離它正常位置具有一定偏移量的位置
- fixed 將元素固定在網頁的背景上，並且當用戶滾動網頁時元素不會移動
- top：設置元素相對於窗口或包含元素頂部的垂直位置
- left：設置元素相對於窗口或包含元素左邊的水平位置
- bottom：設置元素相對於窗口或包含元素底部的垂直位置
- right：設置元素相對於窗口或包含元素右邊的水平位置
- vertical-align：設置內聯元素的垂直定位方式
- z-index：設置多個重疊元素中哪個元素出現在頂部，允許使用正數和負數
- clip：用於控制元素的哪一部分是可見的
- overflow：當內容太大以至於包含元素無法容納時，該屬性指定容器元素顯示內容的方式
- overflow-x：與overflow屬性相同，但只能用於水平x軸
- overflow-y：與overflow屬性相同，但只能用於垂直y軸
- 外邊框屬性
-
- Outline：設置外邊框樣式，外邊框類似於邊框，但是外邊框不占用任何空間，它位於畫布之上
- outline-color：設置外邊框顏色
- outline-style：設置外邊框線的樣式
- outline-width：設置外邊框的寬度
- 表格屬性
-
- border-collapse：指定表格使用的邊框模型
- border-spacing：指定相鄰單元格的邊框之間的距離
- caption-side：指定標題應當放置在表格的哪一邊
- empty-cells：指定空單元格是否顯示邊框
- table-layout：指定瀏覽器如何計算表格的布局
- 分類屬性
-
- clear：設置強制一些元素顯示在它的下面，可指示元素的哪條邊不能接觸對齊元素
- display：用於指定如何呈現一個元素，設置為none元素將不呈現並且不占用任何空間
- float：指定隨后的元素應當換行到該元素的左邊或右邊，而不是換行到下方
- visibility：設置一個元素是否應當顯示或隱藏
- 國際化屬性
-
- direction：設置文本的方向，是從左到右還是從右到左
- unicode-bidi：用於重寫Unicode中語言的內置方向設置
- 長度
-
- 絕對長度
-
- cm
- in
- mm
- pc
- pt
- 相對長度
-
- em
- ex
- px