CSS列表设置
css列表属性允许放置、改变列表标志,或见将图像作为列表项标志。
列表类型
- 要影响列表的样式,最简单的方式就是改变其标志类型。例如:
- 无序列表中,列表项的标志(marker)是出现在各列表旁的圆点。
- 有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。
- 要修改用于列表的标志类型,可以使用属性
list-style-type
属性
list-style-type
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"