背景樣式
background-color:設(shè)置元素的背景顏色
background-image:把圖像設(shè)置為背景
background-position:設(shè)置背景圖像的起始位置
background-attachment:背景圖像是否固定或者隨著頁面的其余部分滾動
background-repeat:設(shè)置背景圖像是否重復(fù)及如何重復(fù)
background:簡寫屬性。作用是將背景屬性設(shè)置于一個聲明
背景顏色
設(shè)置元素的背景顏色
background-color:顏色 | transparent
說明:
transparent是全透明黑色(black)的速記法,類似rgba(0, 0, 0, 0)這樣的值。
顏色值(顏色名 | RGB | 十六進(jìn)制)
背景區(qū)包括內(nèi)容、內(nèi)邊距(padding)和邊框、不包括外邊距(margin)
背景圖片
設(shè)置元素的背景圖片
background-image:URL | none
說明:
url地址可以是相對地址也可以是絕對地址
元素的背景占據(jù)了元素的全部尺寸,包括內(nèi)邊距和邊框,但不包括外邊距
默認(rèn)地,背景圖像位于元素的左上角,并在水平和垂直方向上重復(fù)
背景圖片重復(fù)
設(shè)置元素的背景圖片的重復(fù)方式
background-repeat:repeat | no-repeat | repeat-x | repeat-y
背景圖片顯示方式
設(shè)置元素的背景圖片的顯示方式
background-attachment:scroll | fixed
說明:
scroll:默認(rèn)值,背景圖片隨滾動條滾動
fixed:當(dāng)頁面的其余部分滾動時,背景圖片不會移動
背景圖片定位
設(shè)置元素的背景圖片的初始位置
background-position:百分比 | 值 | top | right | bottom | left | center
| 值 | 說明 | 注意 |
|---|---|---|
| 長度值(x y) | 第一個值水平位置,第二個值垂直位置 | 只寫一個參數(shù)的話,第二個默認(rèn)為居中 |
| 百分比(x% y%) | 第一個時水平位置的百分比,第二個值垂直位置的百分比 | 只寫一個參數(shù)的話,第二個默認(rèn)為居中 |
| top | 頂部顯示,相當(dāng)于垂直方向0 | 只寫一個參數(shù)的話,第二個默認(rèn)為居中 |
| right | 右邊顯示,相當(dāng)于水平方向100% | 只寫一個參數(shù)的話,第二個默認(rèn)為居中 |
| left | 左邊顯示,相當(dāng)于水平方向0 | 只寫一個參數(shù)的話,第二個默認(rèn)為居中 |
| bottom | 底邊顯示,相當(dāng)于垂直方向100% | 只寫一個參數(shù)的話,第二個默認(rèn)為居中 |
| center | 居中顯示,相當(dāng)于水平方向50%或者垂直方向50% | 水平、垂直方向都居中 |
背景縮寫
background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
說明:
- 各值之間用空格分割,不分先后順序
列表樣式
list-style-type:設(shè)置列表項(xiàng)標(biāo)志的類型
list-style-image:將圖像設(shè)置為列表項(xiàng)標(biāo)志
list-style-position:設(shè)置列表中列表項(xiàng)標(biāo)志的位置
list-style:簡寫屬性。用于把所有列表的屬性設(shè)置于一個聲明
列表項(xiàng)標(biāo)記
設(shè)置列表項(xiàng)的標(biāo)記樣式類型
list-style-type:關(guān)鍵字 | none
無序列表
| 值 | 說明 |
|---|---|
| none | 無標(biāo)記 |
| disc | 實(shí)心的圓點(diǎn) |
| circle | 空心的圓點(diǎn) |
| square | 實(shí)心的方塊 |
有序列表
| 值 | 說明 |
|---|---|
| none | 無標(biāo)記 |
| decimal | 從1開始的整數(shù) |
| lower-roman | 小寫羅馬數(shù)字 |
| upper-roman | 大寫羅馬數(shù)字 |
| lower-alpha | 小寫英文字母 |
| upper-alpha | 大寫英文字母 |
使用圖片設(shè)置列表項(xiàng)的標(biāo)記
list-style-image:URL | none
列表項(xiàng)標(biāo)記位置
設(shè)置列表項(xiàng)標(biāo)記的位置
list-style-position:inside | outside
說明:
inside:列表項(xiàng)目標(biāo)記放置在文本以內(nèi),且環(huán)繞文本根據(jù)標(biāo)記對齊
outside:默認(rèn)值,列表項(xiàng)目標(biāo)記放置在文本以外,且環(huán)繞文本不根據(jù)標(biāo)記對齊
列表樣式縮寫
list-style:list-style-type list-style-position list-style-image
說明:
值之間用空格分隔
順序不固定
list-style-image會覆蓋list-style-type的設(shè)置