CSS列表设置

CSS列表设置

---

css列表属性允许放置、改变列表标志，或见将图像作为列表项标志。

---

列表类型

• 要影响列表的样式，最简单的方式就是改变其标志类型。例如：
  • 无序列表中，列表项的标志（marker）是出现在各列表旁的圆点。
  • 有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
• 要修改用于列表的标志类型，可以使用属性list-style-type属性

list-style-type

• JavaScript语法👇

object.style.listStyleType="square"

值	描述
none	无标记
disc	默认。实心圆
circle	空心圆
square	实心方块
decimal	数字
decimal-leading-zero	0开头的数字标记（01，02，03等。）
lower-roman	小写罗马数字(i, ii, iii, iv, v等。)
upper-roman	大写罗马数字(I, II, III, IV, V等。)
lower-alpha	小写英文字母(a, b, c, d, e等。)
upper-alpha	大写英文字母 (A, B, C, D, E等。)
lower-greek	小写希腊字母(α,β,γ 等。)
lower-latin	小写拉丁字母(a, b, c, d, e等。)
upper-latin	大写拉丁字母(A, B, C, D, E等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO等。（日文片假名）

---

列表项图像

list-style-image

• list-style-image属性使用图像来替换列表项的标记
• JavaScript语法👇

object.style.listStyleImage="url('/images/blueball.gif')"

值	描述
URL	图像的路径
none	默认。无图行被显示
inherit	规定应该从父元素继承list-style-image属性的值

---

列表标志位置

list-style-position

• 该属性用于声明列表标志相对于列表项内容的位置。
• JavaScript语法👇

object.style.listStylePosition="inside"

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside	默认值。保持表姐位于文本的左侧。列表项目标记放在文本以外，且环绕文本不根据标记对齐
inherit	规定应该从父元素继承list-style-position属性的值

---

简写列表样式

• 为简单起见，可以将以上3个列表样式属性合并为一个方便的属性：list-style。

list-style

• list-style的值可以按任何顺序列出，且这些值都可以忽略。
• JavaScript语法👇

	object.style.listStyle="decimal inside"