CSS基礎(chǔ)知識點(diǎn)--背景和列表

背景樣式

  • 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è)置

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容