1 CSS屬性
1.1 背景屬性
| 屬性名 | 作用 | 屬性值 |
|---|---|---|
| background-color | 背景顏色 | 顏色值，默認(rèn)：transparent透明 |
| background-image | 背景圖像 | url(圖片地址) |
| background-repeat | 背景圖像重復(fù) |
repeat：水平、垂直方向都重復(fù) repeat-x：水平方向重復(fù) repeat-y：垂直方向重復(fù) no-repeat :不重復(fù) |
| background-position | 背景圖像位置 | ① 關(guān)鍵字表示 水平：left / center / right 垂直：top / center / bottom ② 長度表示 用長度表示x軸和y軸坐標(biāo) |
| background-attachment | 設(shè)置背景圖像固定 本質(zhì)上設(shè)置的是圖像在元素上坐標(biāo)體系。 |
scroll：背景圖像隨元素滾動，默認(rèn)值 fixed：背景圖像固定（改變坐標(biāo)系位置，將坐標(biāo)系的建立在視口上，而非元素上） |
| background | 復(fù)合屬性 | 子屬性的值，多個值用空格隔開；無數(shù)量、順序要求，實(shí)踐中推薦使用。 |
① background-position
使用關(guān)鍵字設(shè)置圖像位置：
設(shè)置兩個值作為屬性的值，使用空格隔開，先寫水平方向位置，再寫垂直方向位置。
background-position:right bottom;
使用長度表示的坐標(biāo)設(shè)置圖像位置：
元素左上角作為坐標(biāo)原點(diǎn)，x軸方向從左到右，y軸方向從上到下； 設(shè)置兩個長度作為x坐標(biāo)和y坐標(biāo)，設(shè)置的是圖像左上角在元素上的位置。
background-position: 10px 20px;
省略寫法: 只設(shè)置一個值：
使用的是關(guān)鍵字：瀏覽器根據(jù)關(guān)鍵字自動判斷設(shè)置的是水平位置還是垂直位置，另外一個取默認(rèn)值 center；
使用長度： 該長度被作為x坐標(biāo)，垂直位置默認(rèn)為 center；
background-position:bottom;/* center bottom */
background-position:right;/* right center */
background-position:100px;/* 100px center */
② background-attachment
如果設(shè)置了 background-attachment 的值為 fixed ，則設(shè)置圖像位置時，則不再參考圖像所在元素的左上角而是參考視口的左上角。頁面比視口長時，就會出現(xiàn)滾動條，當(dāng)圖像所在元素經(jīng)過視口（即與視口有重合部分）時可以看到該圖像。
③ background 復(fù)合屬性
background:#f90;
background:#f90 url(圖像地址);
background:#f90 url(圖像地址) no-repeat;
background:#f90 url(圖像地址) no-repeat 100px 100px;
1.2 鼠標(biāo)光標(biāo)屬性
| 屬性名 | 作用 | 屬性值 |
|---|---|---|
| cursor | 設(shè)置鼠標(biāo)光標(biāo)在元素上的樣式 |
default：默認(rèn)樣式 pointer：點(diǎn)擊 move：移動 text：文字 wait：等待 help：幫助 |
/* 自定義鼠標(biāo)光標(biāo)樣式 */
cursor:url(images/arrow.ico),pointer;/* 圖標(biāo)等常用ico圖片格式 */
1.3 列表屬性
| 屬性名 | 作用 | 屬性值 |
|---|---|---|
| list-style-type | 列表項(xiàng)圖標(biāo)樣式 |
none：無圖標(biāo)，最常用 disc：實(shí)心圓 decimal：數(shù)字 circle：圓圈 |
| list-style-image | 自定義列表項(xiàng)圖標(biāo) | url(圖片路徑) |
| list-style-position | 列表項(xiàng)圖標(biāo)位置 |
outside：圖標(biāo)在 li 外面 inside：圖標(biāo)在 li 里面 |
| list-style | 復(fù)合屬性 | 子屬性的值，多個值用空格隔開；無數(shù)量、順序要求。 |
注意： 列表相關(guān) CSS屬性只有設(shè)置給 ul、ol、li 元素才會生效。
1.4 表格屬性
| 屬性名 | 作用 | 屬性值 |
|---|---|---|
| table-layout | 設(shè)置列寬固定 |
auto：布局基于單元格內(nèi)容，默認(rèn)值。若設(shè)置的單元格寬度大于內(nèi)容寬度，則按設(shè)置顯示；若設(shè)置的單元格寬度小于內(nèi)容寬度，則按內(nèi)容寬度顯示單元格 fixed：布局與單元格內(nèi)容無關(guān)。若設(shè)置了單元格寬度，則按設(shè)置顯示；若沒有設(shè)置，則列寬等分。 |
| border-collapse | 合并單元格邊框 |
separate：不合并單元格邊框，默認(rèn)值 collapse：合并單元格邊框 |
| border-spacing | 設(shè)置單元格之間的間距 生效前提：不能設(shè)置 border-collapse |
長度 |
| empty-cells | 設(shè)置空單元格是否顯示 生效前提：不能設(shè)置 border-collapse |
show：顯示空單元格，默認(rèn)值 hide：空單元格不顯示 |
| caption-side | 設(shè)置表格標(biāo)題在表格上面還是下面 |
top：標(biāo)題在表格上面。 bottom：標(biāo)題在表格下面。 |
注意： 表格相關(guān) CSS 屬性只有設(shè)置給 table 元素才會生效。
2 CSS選擇器
2.1 組合選擇器
① 后代元素選擇器
選擇器1 選擇器2 {
}/* 選擇器2 是 選擇器1 的后代（兒子、孫子）。*/
② 子元素選擇器
選擇器1>選擇器2 {
}/* 選擇器2 是 選擇器1 的兒子*/
③ 并集選擇器
選擇器1，選擇器2 {
}
④ 交集選擇器
選擇器1選擇器2 {
}/* 可以是 標(biāo)簽名類名、類名類名、標(biāo)簽名ID名、類名ID名、ID名類名，但I(xiàn)D名一般沒有必要用交集選擇 */
注意：
- 作為交集選擇器，中間沒有任何額外的符號。
- 標(biāo)簽名和類名可以組合，類名和類名也可以組合，ID也可以與標(biāo)簽名、類名組合， 但是標(biāo)簽名和標(biāo)簽名不可以組合。
- 標(biāo)簽名和類名進(jìn)行交集選擇器組合的時候，標(biāo)簽名一定寫在前面。
可以將以上四種選擇器進(jìn)行大組合，但需注意最后再計(jì)算并集。
2.2 偽類選擇器
是獨(dú)立的選擇器，權(quán)重與類相同，可以單獨(dú)使用，但通常與其他選擇器一起使用。
:link 表示地址沒有被訪問過的狀態(tài) /* 只能用于超鏈接元素 */
:visited 表示地址被訪問過的狀態(tài) /* 只能用于超鏈接元素 */
:hover 鼠標(biāo)懸停在元素上 /* 可用于所有元素 */
:active 鼠標(biāo)按住元素尚未松開 /* 可用于所有元素 */
注意：四種偽類選擇器一起使用時，順序?yàn)椋簂ink、visited、hover、active。
2.3 選擇器權(quán)重（優(yōu)先級）
1. 權(quán)重比較（注：!important和行內(nèi)式不是選擇器，此處僅用于權(quán)重比較）
!important > 行內(nèi)式 > ID 選擇器 > 類名選擇器、偽類選擇器 > 標(biāo)簽名選擇器 > 全局選擇器
2. 組合選擇器（不包括并集選擇器）權(quán)重計(jì)算規(guī)則：
① 先比較兩個選擇器中ID選擇器的數(shù)量，數(shù)量多的權(quán)重大。
② 如果兩個選擇器沒有ID選擇器或者ID選擇器數(shù)量一致，再比較類名選擇器和偽類選擇前的數(shù)量，數(shù)量多的權(quán)重大。
③ 如果類名選擇器、偽類選擇器數(shù)量也數(shù)量一致，再比較標(biāo)簽名的數(shù)量，數(shù)量多的權(quán)重大。
④ 如果選擇器權(quán)重一樣大，后面的覆蓋前面的。
注意： !important用法為：選擇器 {樣式：值 !important}，用于提高某一屬性值的優(yōu)先級，而非提高某一選擇器的優(yōu)先級。
