列表样式

list-style

list-style 是 list-style-type, list-style-image, 和 list-style-position，属性的简写，每个属性的取值请看下面。

ul {
  list-style: inside url('sqpurple.gif');
}

list-style-image

list-style-image 属性用来指定一个能用来作为列表元素标记的图片。

.list {
  list-style-image: none; /* 默认值 */
  list-style-image: url('starsolid.gif');
}

list-style-position

list-style-position 属性指定标记框在主体块框中的位置。

.list {
  /* 标记盒在主块盒的外面（默认值） */
  list-style-position: outside;
  /* 标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后 */
  list-style-position: inside;
}

• Item 1（outside）
• Item 2（inside）

list-style-type

list-style-type 属性用于设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。

• ul 元素下 li 元素的 list-style-type 默认值 disc。
• ol 元素下 li 元素的 list-style-type 默认值 decimal。

.list {
  list-style-type: disc; /* 实心圆 */
  list-style-type: circle; /* 空心圆 */
  list-style-type: square; /* 方块 */
  list-style-type: decimal; /* 数字 */
  list-style-type: georgian; /* 格鲁吉亚数字 */
  list-style-type: trad-chinese-informal; /* 中文数字 */
  list-style-type: kannada; /* 埃纳德语数字 */
}

更多取值请看下面的 demo

CSS Demo: list-style-type

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10
• Item 11
• Item 12
• Item 13
• Item 14
• Item 15
• Item 16
• Item 17
• Item 18
• Item 19
• Item 20
• Item 21
• Item 22
• Item 23
• Item 24
• Item 25
• Item 26
• Item 27
• Item 28
• Item 29
• Item 30
• Item 31
• Item 32
• Item 33
• Item 34
• Item 35
• Item 36
• Item 37
• Item 38
• Item 39
• Item 40
• Item 41
• Item 42
• Item 43
• Item 44
• Item 45
• Item 46
• Item 47
• Item 48
• Item 49
• Item 50
• Item 51
• Item 52

list-style-type: disc;

list-style-type: circle;

list-style-type: square;

list-style-type: decimal;

list-style-type: cjk-decimal;

list-style-type: decimal-leading-zero;

list-style-type: lower-roman;

list-style-type: upper-roman;

list-style-type: lower-greek;

list-style-type: lower-alpha;

list-style-type: lower-latin;

list-style-type: upper-alpha;

list-style-type: upper-latin;

list-style-type: arabic-indic;

list-style-type: armenian;

list-style-type: bengali;

list-style-type: cambodian;

list-style-type: cjk-earthly-branch;

list-style-type: cjk-heavenly-stem;

list-style-type: cjk-ideographic;

list-style-type: devanagari;

list-style-type: ethiopic-numeric;

list-style-type: georgian;

list-style-type: gujarati;

list-style-type: gurmukhi;

list-style-type: hebrew;

list-style-type: hiragana;

list-style-type: hiragana-iroha;

list-style-type: japanese-formal;

list-style-type: japanese-informal;

list-style-type: kannada;

list-style-type: katakana;

list-style-type: katakana-iroha;

list-style-type: khmer;

list-style-type: korean-hangul-formal;

list-style-type: korean-hanja-formal;

list-style-type: korean-hanja-informal;

list-style-type: lao;

list-style-type: lower-armenian;

list-style-type: malayalam;

list-style-type: mongolian;

list-style-type: myanmar;

list-style-type: oriya;

list-style-type: persian;

list-style-type: simp-chinese-formal;

list-style-type: simp-chinese-informal;

list-style-type: tamil;

list-style-type: telugu;

list-style-type: thai;

list-style-type: tibetan;

list-style-type: trad-chinese-formal;

list-style-type: trad-chinese-informal;

list-style-type: upper-armenian;

list-style-type: disclosure-open;

list-style-type: disclosure-close;

list-style-type: none;

list-style-type: "-";

list-style-type: "\1F44D";