教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

CSS控制列表樣式的4個屬性

更新時間:2022年08月09日17時14分 來源:傳智教育 瀏覽次數(shù):

定義無序或有序列表時,可以通過標(biāo)記的屬性控制列表的項目符號,但是這種方式實現(xiàn)的效果只是經(jīng)典效果,難以適應(yīng)風(fēng)格各異的頁面效果。為此,CSS提供了4個列表樣式的屬性,本節(jié)將對這些屬性進(jìn)行詳細(xì)講解。

1. list-style-type屬性

在CSS中,list-style-type屬性用于控制列表項顯示符號的類型,其取值有多種,它們的顯示效果不同,具體如表所示。

屬性值

注意:各個瀏覽器對list-style-type屬性的解析不同。因此,在實際網(wǎng)頁制作過程中不推薦使用list-style-type屬性。

2. list-style-image屬性

一些常規(guī)的列表項顯示符號并不能滿足網(wǎng)頁制作的需求,為此CSS提供了list-style-image屬性,其取值為圖像的url(地址)。使用list-style-image屬性可以為各個列表項設(shè)置項目圖像,使列表的樣式更加美觀。

3. list-style-position屬性

設(shè)置列表項目符號時,有時需要控制列表項目符號的位置,即列表項目符號相對于列表項內(nèi)容的位置。在CSS中,list-style-position屬性用于控制列表項目符號的位置,其取值有inside和outside兩種,對它們的解釋如下。

•inside:列表項目符號位于列表文本以內(nèi)。

•outside:列表項目符號位于列表文本以外(默認(rèn)值)。

4. list-style屬性

在CSS中列表樣式也是一個復(fù)合屬性,可以將列表相關(guān)的樣式都綜合定義在一個復(fù)合屬性list-style中。使用list-style屬性綜合設(shè)置列表樣式的語法格式如下:

list-style:列表項目符號列表項目符號的位置列表項目圖像;使用復(fù)合屬性list-style時,通常按上面語法格式中的順序書寫,各個樣式之間以空格隔開,不需要的樣式可以省略。

0 分享到:
和我們在線交談!