📌  相关文章
📜  CSS-列表

📅  最后修改于: 2020-10-26 04:47:12             🧑  作者: Mango

列表在传达一组编号或项目符号点时非常有用。本章教您如何使用CSS控制列表类型，位置，样式等。

我们有以下五个CSS属性，可用于控制列表-

  • 列表样式类型使您可以控制标记的形状或外观。

  • list-style-position指定环绕第二条线的长点应与第一条线对齐还是从标记的起点下方开始。

  • 列表样式图像指定标记的图像，而不是项目符号点或数字。

  • 列表样式是上述属性的简写形式。

  • 标记偏移量指定标记与列表中文本之间的距离。

现在，我们将通过示例了解如何使用这些属性。

列表样式类型的属性

使用list-style-type属性，您可以控制无序列表的项目符号点的形状或样式（也称为标记）以及有序列表中的字符编号样式。

这是可以用于无序列表的值-

Sr.No. Value & Description
1

none

NA
2

disc (default)

A filled-in circle
3

circle

An empty circle
4

square

A filled-in square

这是可以用于有序列表的值-

Value Description Example
decimal Number 1,2,3,4,5
decimal-leading-zero 0 before the number 01, 02, 03, 04, 05
lower-alpha Lowercase alphanumeric characters a, b, c, d, e
upper-alpha Uppercase alphanumeric characters A, B, C, D, E
lower-roman Lowercase Roman numerals i, ii, iii, iv, v
upper-roman Uppercase Roman numerals I, II, III, IV, V
lower-greek The marker is lower-greek alpha, beta, gamma
lower-latin The marker is lower-latin a, b, c, d, e
upper-latin The marker is upper-latin A, B, C, D, E
hebrew The marker is traditional Hebrew numbering  
armenian The marker is traditional Armenian numbering  
georgian The marker is traditional Georgian numbering  
cjk-ideographic The marker is plain ideographic numbers  
hiragana The marker is hiragana a, i, u, e, o, ka, ki
katakana The marker is katakana A, I, U, E, O, KA, KI
hiragana-iroha The marker is hiragana-iroha i, ro, ha, ni, ho, he, to
katakana-iroha The marker is katakana-iroha I, RO, HA, NI, HO, HE, TO

这是一个例子-

现场演示
    
         
  • Maths
    • 
         
  • Social Science
    • 
         
  • Physics
    • 
      

      
      
    
         
  • Maths
    • 
         
  • Social Science
    • 
         
  • Physics
    • 
      

      
      
    
         
  1. Maths
    2. 
         
  2. Social Science
    3. 
         
  3. Physics
    4. 
      

      
      
    
         
  1. Maths
    2. 
         
  2. Social Science
    3. 
         
  3. Physics
    4. 
      

      
      
    
         
  1. Maths
    2. 
         
  2. Social Science
    3. 
         
  3. Physics
    4.

它将产生以下结果-

列表样式位置属性

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

这是一个例子-

现场演示
    
         
  • Maths
    • 
         
  • Social Science
    • 
         
  • Physics
    • 
      

      
      
    
         
  • Maths
    • 
         
  • Social Science
    • 
         
  • Physics
    • 
      

      
      
    
         
  1. Maths
    2. 
         
  2. Social Science
    3. 
         
  3. Physics
    4. 
      

      
      
    
         
  1. Maths
    2. 
         
  2. Social Science
    3. 
         
  3. Physics
    4.

它将产生以下结果-

列表样式图像属性

使用列表样式图像可以指定图像，以便可以使用自己的项目符号样式。语法与background-image属性相似，字母url以属性的值开头，后跟方括号中的URL。如果找不到给定的图像，则使用默认项目符号。

这是一个例子-

现场演示
    
         
  • Maths
    • 
         
  • Social Science
    • 
         
  • Physics
    • 
      

      
      
    
         
  1. Maths
    2. 
         
  2. Social Science
    3. 
         
  3. Physics
    4.

它将产生以下结果-

列表样式的属性

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

这是一个例子-

现场演示
    
         
  • Maths
    • 
         
  • Social Science
    • 
         
  • Physics
    • 
      

      
      
    
         
  1. Maths
    2. 
         
  2. Social Science
    3. 
         
  3. Physics
    4.

它将产生以下结果-

标记偏移属性

marker-offset属性允许您指定标记和与该标记有关的文本之间的距离。其值应为以下示例中所示的长度-

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

这是一个例子-

现场演示
    
         
  • Maths
    • 
         
  • Social Science
    • 
         
  • Physics
    • 
      

      
      
    
         
  1. Maths
    2. 
         
  2. Social Science
    3. 
         
  3. Physics
    4.

它将产生以下结果-