CSS学习--列表

列表

预设值

1. <ul> 和 <ol>元素设置margin的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); （在这里注意的是浏览器默认字体大小为16px）。
2. <li> 默认是没有设置间距的。
3. <dl> 元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定。
4. <dd> 元素设置为： margin-left 40px (2.5em)。

list-style: list-style-type list-style-position | list-style-image;
list-style: square url(example.png) inside;

列表计数标记样式

/* 常用 */
list-style-type: none | disc | circle | square | decimal;
list-style-type: <custom-ident>( @counter-style) | <string>;
list-style-type: decimal-leading-zero(01) | lower-roman(i) | upper-roman(I);
list-style-type: lower-greek(α) | lower-alpha(a) | upper-alpha(A) ;
list-style-type: armenian | georgian;

@counter-style

自定义counter的样式

@counter-style <counter-style-name> {
    /* 指定一个算法，用于将计数器的整数值转化为字符串表示 */
    system: <counter system>
    /* 标记的表示 */
    symbols: <counter symbols>
    /* 包含一个可数的符号和一个非负证书的权重 */
    additive-symbols: <additive-symbols>
    /* 指定一个符号，替代负号 */
    negative: <negative symbol>
    /* 指定一个符号，加在标记表示符的前面 */
    prefix: <prefix>
    /* 指定一个符号，加在标记表示符的后面 */
    suffix: <suffix>
    /* counter-style生效的范围 */
    range: <range>
    /* 给标记表示符最小值时使用 */
    pad: <padding>
    /* 如何在语音识别器中读出计数器样式 */
    speak-as: <speak-as>
    /* 备用的系统 */
    fallback: <counter-style-name>
}
@counter-style circled-alpha {
	system: fixed;
	symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
	suffix: " ";
}

列表计数标记位置

<ul> 和 <ol> 列表盒子内 | 外

list-style-position: inside | outside;

列表计数标记图片

list-style-image: url('./../1.jpg');

ol 属性

start

start 属性允许你从1 以外的数字开始计数。

<ol start="4">
	<li>Toast pitta, leave to cool, then slice down the edge.</li>
	<li>Wash and chop the salad.</li>
</ol>

reversed

reversed 属性将启动列表倒计数。

<ol start="4" reversed>
	<li>Toast pitta, leave to cool, then slice down the edge.</li>
	<li>Wash and chop the salad.</li>
</ol>

value

value 属性允许设置列表项指定数值。

<ol>
	<li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
	<li value="6">Wash and chop the salad.</li>
</ol>