CSS2.1 清單樣式(List)

list-style

屬性樣式 設定值
list-style
清單樣式
list-style-image 之值
list-style-position 之值
list-style-type 之值
預設值:依個別特性而定
適用於:只能用在清單元素上
繼承性:有

這個樣式是用來同時(或視您所需)設定清單相關的樣式。

例如,在下面的樣式中,同時設定了清單標號圖片、清單項目位置、清單標號形式。

div.MyStyle {
	list-style: url('/img/show.png') inside circle;
	}

list-style-image

屬性樣式 設定值
list-style-image
清單標號圖片
none
url('圖片路徑與檔名')
預設值:none
適用於:只能用在清單元素上
繼承性:有

這個樣式是用來將預設的清單項目符號改為使用我們所自訂的圖片。

div.MyStyle {
	list-style-image: url('show.png');
	}

list-style-position

屬性樣式 設定值
list-style-position
清單項目位置
outside (項目符號在外側)
inside (項目符號在內側)
預設值:outside
適用於:只能用在清單元素上
繼承性:有

這個樣式是用來將清單的項目符號設在內容的外側或內側。

div.MyStyle {
	list-style-position: inside;
	}

list-style-type

屬性樣式 設定值
list-style-type
清單標號形式
disc (實心圓)、circle (空心圓)、square (實心方形)
decimal (阿拉伯數字)
decimal-leading-zero (以 0 開頭的 10 進位數字)
lower-alpha (小寫英文字母)、upper-alpha (大寫英文字母)
lower-greek (小寫希臘字母)
lower-latin (小寫拉丁字母)、upper-latin (大寫拉丁字母)
lower-roman (小寫羅馬字母)、upper-roman (大寫羅馬字母)
hiragana (日文 50 音–平假名)
hiragana-iroha (古日文 47 音–平假名)
katakana (日文 50 音–片假名)
katakana-iroha (古日文 47 音–片假名)
hebrew (希伯來數字)
armenian (阿爾曼數字)
georgian (喬治亞數字)
cjk-ideographic (中文數字)
none (無)
預設值:disc
適用於:只能用在清單元素上
繼承性:有

這個樣式是用來改變清單的項目符號。

div.MyStyle {
	list-style-type: cjk-ideographic;
	}

文章分類

文章標籤