CSS控制列表樣式的4個(gè)屬性

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

1. list-style-type屬性

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

注意：各個(gè)瀏覽器對(duì)list-style-type屬性的解析不同。因此，在實(shí)際網(wǎng)頁(yè)制作過(guò)程中不推薦使用list-style-type屬性。

2. list-style-image屬性

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

3. list-style-position屬性

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

•inside：列表項(xiàng)目符號(hào)位于列表文本以內(nèi)。

•outside：列表項(xiàng)目符號(hào)位于列表文本以外(默認(rèn)值)。

4. list-style屬性

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

list-style：列表項(xiàng)目符號(hào)列表項(xiàng)目符號(hào)的位置列表項(xiàng)目圖像;使用復(fù)合屬性list-style時(shí)，通常按上面語(yǔ)法格式中的順序書(shū)寫(xiě)，各個(gè)樣式之間以空格隔開(kāi)，不需要的樣式可以省略。