### **1.為文檔添加樣式的三種方法**
<!--more-->
1. 行內樣式
2. 嵌入樣式
3. 外聯樣式
> @import url('')
@import指令必須出現在樣式表中其他樣式之前,否則不會加載
### **2.結構**
### **3.選擇符**
##### **上下文選擇符**
一般(祖先/后代選擇符):
`p em{font-weight: bold;}`
特殊:
* 子選擇符: `p>em{font-weight: bold;}`
* 緊鄰同胞選擇符**+** `h2+p{font-voriant: small-caps;}`
* 一般同胞選擇符**~** `h2~a{color: red;}`
* 通用選擇符***** `*{color: green;}`
##### **ID和類選擇符**
* 類選擇符
格式: `.container{font-face: 'arival';}`
* 標簽帶類選擇符
格式: `p.specialtext{color: red;}`(中間沒有空格)
* 多類選擇符
格式: `.specialtext.featured{font-size: 120%;}`(同上)
* ID同class
##### **屬性選擇符**
* 屬性名選擇符
`input[type]{border: 2px solid blue;}`
* 屬性值選擇符
`img[title="red"]{border: 4px solid green;}`
### **4.偽類**
##### **UI偽類**
* 鏈接偽類(LoVe,HA)
`a:link{color: black;}`
`a:visited{color: gray;}`
`a:hover{background: green;}`
`a:active{color: red;}`
* :focus偽類
`input:focus{border: 1px solid blue;}`
* :target偽類
`#more_info:target{background: #eee;}`
會在用戶單擊鏈接轉向ID為more_info的元素時,為該元素添加淺灰色背景.
##### **結構化偽類**
* :first-child和:last-child
* :nth-child(n)
n可為數值,表達式,odd和even
### **5.偽元素**
1. ::first-letter偽元素 (選擇首字符)
2. ::first-line偽元素 (選擇首行)
3. ::before和::after偽元素
可用于在特定元素前后添加特殊內容.
