溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
css中如何利用屬性進行控制列表樣式，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
控制列表樣式的屬性：1、“list-style-type”，設置列表標記的類型；2、“list-style-position”，設置標記的放置位置；3、“list-style-image”，將圖像設為列表標記；4、“list-style”。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
列表(List) 屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| list-style | 在一個聲明中設置所有的列表屬性 | 1 |
| list-style-image | 將圖像設置為列表項標記 | 1 |
| list-style-position | 設置列表項標記的放置位置 | 1 |
| list-style-type | 設置列表項標記的類型 | 1 |
（1）list-style-type：用于控制標記符的外觀形狀。
對于無序列表，該屬性取值如下：1. none，沒有標記符；2. disc（默認值），填充的圓；3. circle，空心圓；4. square，填充的正方形。
對于有序列表，該屬性取值如下：1. decimal，數字；2. decimal-leading-zero，前面加0的數字；3. lower-alpha，小寫字母；4. upper-alpha，大寫字母；5. lower-roman，小寫羅馬字母；6. upper-roman，大寫羅馬字母。
（2）list-style-position： 該屬性用于聲明列表標志相對于列表項內容的位置。
外部 (outside) 標志會放在離列表項邊框邊界一定距離處，不過這距離在 CSS 中未定義。內部 (inside) 標志處理為好像它們是插入在列表項內容最前面的行內元素一樣。對于嵌套列表，可以使用值inherit，規定應該從父元素繼承 list-style-position 屬性的值。
（3）list-style-image：指定圖像作為標記。
使用方式如下：
li { list-style-image: url("haha.gif") }需要注意的是，如果正在使用嵌套列表，該屬性會繼承父元素，為了防止繼承，須將list-style-image設置為none。
（4）list-style：簡寫形式
可以一次性表達以上三個屬性中的多個屬性，可以以任意順序出現。
測試效果圖如下：
CSS代碼如下：
li { border: red solid thin; }
ul { list-style: square outside }
ol { list-style: upper-alpha inside; }
ul.one { list-style: url("test1.jpg") inside; }HTML代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta charset="utf-8" /> <base href="/testsmarty/templates/"></base> <title>CSS控制列表樣式</title> <link rel="stylesheet" type="text/css" href="test1.css"> </head> <body> <table width="700" border="1"> <tr> <td>無序列表樣式</td> <td>有序列表樣式</td> <td>使用圖片做標記符</td> </tr> <tr> <td> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </td> <td> <ol> <li>one</li> <li>two</li> <li>three</li> </ol> </td> <td> <ul class="one"> <li>one</li> <li>two</li> <li>three</li> </ul> </td> </tr> <tr> <td colspan="3">注意outside與inside其標記符與li元素框的位置</td> </tr> </table> </body> </html>
關于css中如何利用屬性進行控制列表樣式問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
