建站
咨詢
售后
建站咨詢
新聞中心
- list-style-type：設(shè)置列表項前面標記的形狀（外觀）；
- list-style-position：設(shè)置標記和列表中文本之間的距離；
- list-style-image：使用圖像代替默認的標記；
- list-style：統(tǒng)一設(shè)置上面的三個屬性。
1. list-style-type
使用 list-style-type 屬性可以設(shè)置列表中每個列表項前標記的樣式，屬性的可選值如下：
| 值 | 描述 |
|---|---|
| none | 無標記 |
| disc | 默認值，標記為實心圓 |
| circle | 將標記設(shè)置為空心圓 |
| square | 將標記設(shè)置為實心方塊 |
| decimal | 將標記設(shè)置為數(shù)字 |
| decimal-leading-zero | 將標記設(shè)置為以 0 開頭的數(shù)字標記，例如 01、02、03 |
| lower-roman | 將標記設(shè)置為小寫羅馬數(shù)字，例如 i、ii、iii、iv、v |
| upper-roman | 將標記設(shè)置為大寫羅馬數(shù)字，例如 I、II、III、IV、V |
| lower-alpha | 將標記設(shè)置為小寫英文字母，例如 a、b、c、d、e |
| upper-alpha | 將標記設(shè)置為大寫英文字母，例如 A、B、C、D、E |
| lower-greek | 將標記設(shè)置為小寫希臘字母，例如 α、β、γ、δ、ε |
| lower-latin | 將標記設(shè)置為小寫拉丁字母，例如 a、b、c、d、e |
| upper-latin | 將標記設(shè)置為大寫拉丁字母，例如 A、B、C、D、E |
| hebrew | 將標記設(shè)置為傳統(tǒng)的希伯來編號 |
| armenian | 將標記設(shè)置為傳統(tǒng)的亞美尼亞編號 |
| georgian | 將標記設(shè)置為傳統(tǒng)的喬治亞編號 |
| cjk-ideographic | 將標記設(shè)置為中文數(shù)字，例如 一、二、三、四、五 |
| hiragana | 將標記設(shè)置為日文平假名字符，例如 あ、い、う、え、お |
| katakana | 將標記設(shè)置為日文片假名字符，例如 ア、イ、ウ、エ、オ |
| hiragana-iroha | 將標記設(shè)置為日文平假名序號 |
| katakana-iroha | 將標記設(shè)置為日文片假名序號 |
【示例】使用 list-style-type 屬性改變無序列表、有序列表中列表項前標記的樣式：
- CSS鏈接
- CSS邊框
- CSS表格
- CSS鏈接
- CSS邊框
- CSS表格
- CSS鏈接
- CSS邊框
- CSS表格
- CSS鏈接
- CSS邊框
- CSS表格
運行結(jié)果如下圖所示：
圖：list-style-type 屬性演示
2. list-style-position
使用 list-style-position 屬性可以設(shè)置在何處放置列表項前的標記，屬性的可選值如下：
| 值 | 描述 |
|---|---|
| inside | 列表項前的標記放置在之后的文本以內(nèi)，列表項中的文本會根據(jù)標記對齊 |
| outside | 默認值，保持標記位于文本的左側(cè)，列表項前的標記放置在文本以外，并且列表項中的文本不會根據(jù)標記對齊 |
| inherit | 從父元素繼承 list-style-position 屬性的值 |
【示例】使用 list-style-position 屬性設(shè)置列表項前標記的位置：
- CSS鏈接
- CSS邊框
- CSS表格
- CSS鏈接
- CSS邊框
- CSS表格
運行結(jié)果如下圖所示：
圖：list-style-position 屬性演示
3. list-style-image
通過 list-style-image 屬性可以將列表項前的標記替換為一個圖像，屬性的可選值如下：
| 值 | 描述 |
|---|---|
| URL | 圖像的路徑 |
| none | 默認值，不顯示任何圖像 |
| inherit | 從父元素繼承 list-style-image 屬性的值 |
【示例】使用 list-style-image 屬性將列表項前的標記替換為一個圖像：
- CSS鏈接
- CSS邊框
- CSS表格
運行結(jié)果如下圖所示：
圖：list-style-image 屬性演示
4. list-style
list-style 屬性是上述三個屬性（list-style-type、list-style-position、list-style-image）的簡寫，使用 list-style 可以同時設(shè)置上面的三個屬性，其語法格式如下：
list-style: list-style-type || list-style-position || list-style-image;
提示：在使用 list-style 屬性時，需要按照上面的順序來為參數(shù)賦值，只要遵守參數(shù)的順序，即使忽略其中的一項或多項也是可以的，例如 list-style: none;、list-style:circle inside;，被忽略的參數(shù)會設(shè)置為參數(shù)對應的默認值。
【示例】使用 list-style 屬性來統(tǒng)一設(shè)置列表項的標記樣式、位置和圖像：
- CSS鏈接
- CSS邊框
- CSS表格
- CSS鏈接
- CSS邊框
- CSS表格
運行結(jié)果如下圖所示：
圖：list-style 屬性演示
網(wǎng)頁標題：CSSlist-style（列表樣式）
文章URL：http://fisionsoft.com.cn/article/djcphjj.html
