CSS - Lists
列表非常有助于传达一组编号或子弹点。 本章将教您如何使用CSS控制列表类型，位置，样式等。
我们有以下五个CSS属性，可用于控制列表 -
list-style-type允许您控制标记的形状或外观。
list-style-position指定包裹到第二行的长点是否应与第一行对齐或从标记的开头下面开始。
list-style-image指定标记的图像而不是项目符号或数字。
list-style用作前面属性的简写。
marker-offset指定标记与列表中文本之间的距离。
现在，我们将看到如何将这些属性与示例一起使用。
list-style-type属性
list-style-type属性允许您在无序列表的情况下控制项目符号的形状或样式（也称为标记）以及有序列表中编号字符的样式。
以下是可用于无序列表的值 -
| Sr.No. | 价值和描述 |
|---|---|
| 1 | none NA |
| 2 | disc (default) 一个填充的圆圈 |
| 3 | circle 一个空的圆圈 |
| 4 | square 一个填充的广场 |
以下是可用于有序列表的值 -
| 值 | 描述 | 例 |
|---|---|---|
| decimal | Number | 1,2,3,4,5 |
| decimal-leading-zero | 数字前面的0 | 01, 02, 03, 04, 05 |
| lower-alpha | 小写字母数字字符 | a, b, c, d, e |
| upper-alpha | 大写字母数字字符 | A, B, C, D, E |
| lower-roman | 小写罗马数字 | i, ii, iii, iv, v |
| upper-roman | 大写罗马数字 | I, II, III, IV, V |
| lower-greek | 标记是低希腊语 | alpha, beta, gamma |
| lower-latin | 标记是低拉丁语 | a, b, c, d, e |
| upper-latin | 标记是上拉丁语 | A, B, C, D, E |
| hebrew | 标记是传统的希伯来语编号 | |
| armenian | 标记是传统的亚美尼亚编号 | |
| georgian | 标记是传统的格鲁吉亚编号 | |
| cjk-ideographic | 标记是简单的表意数字 | |
| hiragana | 标记是平假名 | a, i, u, e, o, ka, ki |
| katakana | 标记是片假名 | A, I, U, E, O, KA, KI |
| hiragana-iroha | 标记是平假名 - iroha | i, ro, ha, ni, ho, he, to |
| katakana-iroha | 标记是片假名 - iroha | I, RO, HA, NI, HO, HE, TO |
这是一个例子 -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它会产生以下结果 -
新页面打开list-style-position属性
list-style-position属性指示标记是否应出现在包含项目符号点的框的内部或外部。 它可以有两个值 -
| Sr.No. | 价值和描述 |
|---|---|
| 1 | none NA |
| 2 | inside 如果文本进入第二行，则文本将包裹在标记下方。 如果列表的值为outside，它也会缩进到文本开始的位置。 |
| 3 | outside 如果文本转到第二行，则文本将与第一行的开头（子弹的右侧）对齐。 |
这是一个例子 -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它会产生以下结果 -
新页面打开list-style-image属性
list-style-image允许您指定图像，以便您可以使用自己的项目符号样式。 语法类似于background-image属性，其中字母url以属性值开头，后跟括号中的URL。 如果找不到给定的图像，则使用默认的项目符号。
这是一个例子 -
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它会产生以下结果 -
新页面打开列表样式的属性
list-style允许您将所有列表属性指定为单个表达式。 这些属性可以按任何顺序出现。
这是一个例子 -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它会产生以下结果 -
新页面打开marker-offset属性
marker-offset属性允许您指定标记与该标记相关的文本之间的距离。 它的值应该是一个长度，如下例所示 -
不幸的是，IE 6或Netscape 7不支持此属性。
这是一个例子 -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它会产生以下结果 -
新页面打开