CSS - 列表

列表非常有助于传达一组编号或子弹点.本章教你如何使用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-zero0之前的数字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-irohai ,ro,ha,ni,ho,he,to
katakana-iroha标记是katakana-irohaI,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>

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).

这是一个例子:

<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>

The list-style-image Property

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>

The list-style Property

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>

The marker-offset Property

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>