CSS常用屬性之清單屬性（五）

CSS清單屬性主要有list-style-type、list-style-image、list-style-position、list-style，清單屬性不怎麼常用，了解即可

清單屬性目錄

• • 1、list-style-type
  • 2、list-style-image
  • 3、list-style-position
  • 4、list-style

1、list-style-type

list-style-type

屬性設定清單項标記的類型

部分屬性值：

• none：無标記
• disc：預設。标記是實心圓
• circle：标記是空心圓
• square：标記是實心方塊
• decimal：标記是數字
• decimal-leading-zero：0開頭的數字标記。(01,02,03,等)
• lower-alpha：小寫英文字母
• upper-alpha：大寫英文字母

注意：

• 在實際開發中幾乎不用，一般會把前面的标記類型去掉
• 隻需掌握去掉标記就好，去掉标記

  list-style-type:none;

2、list-style-image

list-style-image

用來指定清單中的清單标記圖像，幾乎不用，了解就好

屬性值：

• URL：圖像的路徑
• none：預設。無圖形被顯示
• inherit：規定應該從父元素繼承list-style-image屬性的值

ul li {
    list-style-type:none; /* 去掉點 */
    list-style-image: url(image/dot.png);
}
           

3、list-style-position

list-style-position

規定清單中清單項目标記的位置，幾乎不用，了解就好

屬性值：

• inside：清單項目标記放置在文本以内，且環繞文本根據标記對齊
• outside：預設值。保持标記位于文本的左側。清單項目标記放置在文本以外，且環繞文本不根據标記對齊
• inherit：規定應該從父元素繼承list-style-position屬性的值

ul li {
    list-style-type:none; /* 去掉點 */
    list-style-image: url(image/dot.png);
}
           

4、list-style

• list-style是list-style-type，list-style-position，list-style-image這三個的綜合寫法
• 實際開發中，用的最多的是

  list-style-type:none;

  和

  list-style:none;

  用來去掉标記