1.css背景樣式
background-color 背景色
background-image 背景圖
url（背景地址）
默認水平垂直都鋪滿
background-repeat 平鋪方式
repeat-x
repeat-y
repeat（x，y都平鋪）
no-repeat 都不平鋪
background-position ：背景位置
x y：number|單詞
x : left,center,right
y：number : top,center,bottom
background-attachment : 背景圖隨滾動條移動的方式
scroll ：默認值（背景位置是按照當前元素進行偏移的）
fixed ：（背景位置是按照瀏覽器進行偏移的）
2.css邊框樣式
border-style ：邊框樣式
solid : 實線
dashed ：虛線
dotted : 點線
border-width ：邊框大小
px ...
border-color : 邊框顏色
red #f00000 ...
邊框也可以針對某一邊進行單獨設置 ：border-left-style：中間是方向 left、right、top、bottom
顏色：透明色 transparent
3.css文字樣式
font-family ：字體類型
英文、中文
襯線體、非襯線體
注意點：
1.多個字體類型設置的目的
2.引號添加的目的
font-size ：字體大小
默認大小 ：16px
寫法 ：number（px） small
注：字體大小一般爲偶數
font-weight ：字體粗細
模式 ： 正常（normal） 加粗（hold）
寫法 ：單詞（normal、hold） | number（100 200.。。900，100-500爲正常，500-900爲加粗）
font-style : 字體樣式
模式： 正常（normal）斜體（italic）
寫法：單詞（normal、italic）
注：oblique也是表示斜體、一般瞭解即可
color ：字體顏色
4.css段落樣式
text-decoration : 文本修飾
下劃線 ：underline
刪除線 ：lne-through
上劃線 ：overline
不添加任何裝飾 : none
注： 添加多個文本修飾：line-through underline overline
text-transform : 文本大小寫 （針對英文段落）
小寫： lowercase
大寫： uppercase
text-indent : 文本縮進
首行縮進
em單位：相對單位，1em永遠都跟字體大小相同
text-algin ：文本對齊方式
對齊方式：left、right、center、justify（兩端對齊）
line-height : 定義行高
什麼是行高，一行文字的高度，上邊距和下邊距的等價關係。
默認行高：不是固定值，而是變化的，根據當前字體的大小在不斷的變化。
取值：1、number（px） | scale（比例值，跟文字大小成比例的）
letter-spacing : 字之間的間距
word-spacing : 詞之間的間距（針對英文段落）
英文和數字不自動折行的問題：
1.word-break : break-all;(非常強烈的折行)
2.word-wrap ：break-word;(不是那麼強烈的折行，會產生一些空白區域)
5.css複合樣式
複合樣式的寫法，是通過空格的方式實現的，複合寫法有的是不需要關心順序，例如background、border；有的是需要關心順序，例如font。
1. background ：red url() repeat 0 0;
2. birder : 1px red solid;
3. font :
注：最少要有兩個值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注：如果非要混合去寫的話，那麼要先寫複合樣式，再寫單一樣式，這樣樣式纔不會被覆蓋掉。
6.css選擇器
1. ID選擇器
#elem{} id="elem"
注：
1.ID是唯一值，在一個頁面中只能出現一次，出現多次是不符合規範的
2.命名的規範，由字母、下劃線、中劃線、字母（並且第一個不能是數字）
3.駝峯寫法：searchButton（小駝峯） SearchButton（大駝峯
短線寫法：serch-button
下劃線寫法：search_button
2. CLASS選擇器
.elem{} class="elem"
注：
1.CLASS選擇器是可以重複使用的
2.可以添加多個class樣式
3.多個樣式的時候，樣式的優先級根據css決定，而不是class屬性中的樣式
4.標籤+類的寫法
3.標籤選擇器
div{} <div></div>
使用場景：
1.去掉某些標籤的默認樣式時
2.複雜的選擇器中，如 層次選擇器
4.羣組選擇器（分組選擇器）
可以通過逗號的方式，給多個不同的選擇器添加統一的CSS樣式，來達到代碼的複用
5.通配選擇器
*{ } -> div，ul，li，p，h1，h2.....{}
注：儘量避免使用通配選擇器，因爲會給所有的標籤添加樣式，慎用。
使用場景：
1.去掉所有標籤的默認樣式時
6.相鄰選擇器
後代 M N{ }
父子 M>N{ }
兄弟 M~N{ } 當前M下面的所有兄弟N標籤
相鄰 M+N{ } 當前M下面相鄰的N標籤
7.屬性選擇器
M[attr] {}
= : 完全匹配
*= ：部分匹配
^= ：起始匹配
$= ：結束匹配
[][][] : 組合匹配
8.僞類選擇器
M:僞類{}
：link 訪問前的樣式 (只能添加給a標籤)
：visited 訪問後的樣式 (只能添加給a標籤)
：hover 鼠標移入時的樣式 (可以添加給所有的標籤)
：active 鼠標按下時的樣式 (可以添加給所有的標籤)
注：
一般的網站都只設置
a{} {link visited active} a:hover{}
：after、：before 通過僞類的方式給元素添加一段內容，使用content屬性
：checked、：disabled、：focus 都是針對表單元素的
結構性僞類選擇器
nth-of-type() nth-child()
角標是從1開始的，1表示第一項，2表示第二項 | n值 表示從0到無窮大
first-of-type
last-of-type
only-of-type
nth-of-type() nth-child()之間的區別
type ：類型
child ：孩子
7.css繼承
文字相關的樣式可以被繼承
佈局相關的樣式不能被繼承（默認是不能繼承的，但是可以設置繼承屬性inherit值）
8.css優先級
1.相同樣式優先級
當設置相同樣式時，後面的優先級較高，但不建議出現重複設置樣式的情況
2.內部樣式與外部樣式
內部樣式與外部樣式優先級相同，如果設置了相同樣式，那麼後寫的引入方式優先級高。
3.單一樣式優先級
style行間 > id > class > tag > * > 繼承
注：style行間 權重1000
id 權重100
class 權重10
tag 權重1
4.!important
提升樣式優先級，非規範方式，不建議使用。(不能針對繼承的屬性進行優先級的提升)
5.標籤+類與單類
標籤+類 > 單類
6.羣組優先級
羣組選擇器與單一選擇器的優先級相同，靠後寫的優先級高
7.層次優先級
1.權重比較
ul li .box p input{ } 1+1+10+1+1
.hello span #elem{ } 10+1 +100
2.約分比較
ul li .box p input{} li p input{}
.hello span #elem{ } #elem{}