CSS - 列表

CSS列表 - 面向初学者和高级开发人员的CSS教程使用示例，通过简单易用的步骤学习层叠样式表。 CSS2和CSS3属性的完整参考手册。

列表非常有助于传达一组编号或子弹点.本章教你如何使用CSS控制列表类型，位置，样式等.

我们有以下五个CSS属性，可用于控制列表和减号;

list-style-type 允许您控制标记的形状或外观.
list-style-position 指定包裹到第二行的长点是否应与第一行对齐或从下面开始标记的开头.
list-style-image 指定标记的图像而不是项目符号或数字.
list-style 用作前面属性的简写.
marker-offset 指定标记与列表中文本之间的距离.

现在，我们将看到如何将这些属性与示例一起使用.

list-style-type属性

列表-style-type prope rty允许您在无序列表的情况下控制项目符号的形状或样式(也称为标记)以及有序列表中编号字符的样式.

以下是值可以用于无序列表 :

Sr.No.	价值&说明
1	无 NA
2	光盘(默认) 填空圈
3	圈空心圆圈
4	square 填充方格

以下是值，可用于有序列表 :

值	描述	示例
十进制	数字	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
希伯来语	标记是传统的希伯来语编号
armenian	标记是传统的亚美尼亚编号
georgian	标记是传统的格鲁吉亚编号
cjk-ideographic	标记是普通的表意数字
hiragana	标记是平假名	a，i ，你，e，o，ka，ki
katakana	标记是片假名	A，I，U，E，O，KA，KI
hiragana-iroha	标记是hiragana-iroha	i ，ro，ha，ni，ho，he，to
katakana-iroha	标记是katakana-iroha	I，RO，HA，NI，HO，HE，TO

这是一个例子 :

                           Maths
         Social Science
         Physics
                           Maths
         Social Science
         Physics
                           Maths
         Social Science
         Physics
                           Maths
         Social Science
         Physics
                           Maths
         Social Science
         Physics

The list-style-position Property

ist-style-position属性指示标记是否应出现在包含项目符号点的框的内部或外部。它可以有一个两个值:

Sr.No.	Value & Description
1	none NA
2	inside If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.
3	outside If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

Sr.No.

Value & Description

none

inside

If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.

outside

If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

这是一个例子:

                           Maths
         Social Science
         Physics
                           Maths
         Social Science
         Physics
                           Maths
         Social Science
         Physics
                           Maths
         Social Science
         Physics

The list-style-image Property

list-style-image允许您指定图像，以便您可以使用自己的项目符号样式。语法类似于background-image属性，其中字母url以属性值开头，后跟括号中的URL。如果找不到给定的图像，则使用默认的项目符号。

这是一个例子:

                           Maths         Social Science
         Physics
      
                     Maths         Social Science
         Physics

The list-style Property

list-style允许您将所有列表属性指定为单个表达式。这些属性可以按任何顺序出现。

这是一个例子:

                           Maths
         Social Science
         Physics
                           Maths
         Social Science
         Physics

The marker-offset Property

marker-offset属性允许您指定标记与该标记相关的文本之间的距离。它的值应该是一个长度，如下例所示:

不幸的是，IE 6或Netscape 7不支持此属性。

这是一个例子:

                        Maths
         Social Science
         Physics
                           Maths
         Social Science
         Physics