📌  相关文章
📜  CSS Lists列表

📅  最后修改于: 2020-11-04 06:56:22             🧑  作者: Mango

CSS列表

有多种CSS属性可用于控制列表。列表可以分为有序列表和无序列表。在有序列表中，列表项用字母和数字标记，而在无序列表中，列表项用项目符号标记。

我们可以使用CSS为列表设置样式。 CSS列表属性使我们能够：

  • 设置文本和列表中标记之间的距离。
  • 为标记指定图像，而不要使用数字或项目符号点。
  • 控制标记的外观和形状。
  • 将标记放置在包含列表项的框的外部或内部。
  • 设置背景颜色以列出项目和列表。

列出样式的CSS属性如下：

  • list-style-type：此属性负责控制标记的外观和形状。
  • list-style-image：它为标记设置图像，而不是数字或项目符号点。
  • list-style-position：指定标记的位置。
  • list-style：这是上述属性的简写属性。
  • marker-offset：用于指定文本和标记之间的距离。 IE6或Netscape 7不支持它。

让我们详细了解上述属性，以及每个属性的示例。

列表样式类型的属性

它使我们可以将标记的默认列表类型更改为任何其他类型，例如正方形，圆形，罗马数字，拉丁字母等等。默认情况下，已排序列表项用阿拉伯数字编号(1、2、3等)，而未排序列表中的项则用圆形项目符号(•)标记。

如果我们将其值设置为none，它将删除标记/项目符号。

注意：该列表还包括默认的填充和边距。要删除此内容，我们需要在其中添加padding：0和margin：0

    和
      。

      使用此属性的说明如下：

      例

        
 
    
   CSS Lists
       
    
    
      
       
         Welcome to the javaTpoint.com 
      
       
            
       
         Ordered Lists 
      
       
      
         
         
      1. one
        2.  
         
      2. two
        3.  
         
      3. three
        4.  
      
       
      
         
         
      1. one
        2.  
         
      2. two
        3.  
         
      3. three
        4.  
      
       
            
         
         
      1. one
        2.  
         
      2. two
        3.  
         
      3. three
        4.  
      
       
      
       
         Unordered lists 
      
       
      
         
         
      • one
        •  
         
      • two
        •  
         
      • three
        •  
      
       
      
         
         
      • one
        •  
         
      • two
        •  
         
      • three
        •  
      
       
      
         
         
      • one
        •  
         
      • two
        •  
         
      • three
        •

      列表样式位置属性

      它表示标记的出现是在包含项目符号点的框内还是在框外。它包含两个值。

      内部：这意味着项目符号点将在列表项中。在这种情况下，如果文本在第二行上，则文本将被包装在标记下。

      outside：表示项目符号点将不在列表项中。它是默认值。

      以下示例对其进行了更清晰的说明。

      例

        
 
    
   CSS Lists
       
    
    
      
       
         Welcome to the javaTpoint.com 
      
       
            
       
         Ordered Lists 
      
       
      
         
         
      1. INSIDE
        2.  
         
      2. two
        3.  
         
      3. three
        4.  
      
       
      
         
         
      1. OUTSIDE
        2.  
         
      2. two
        3.  
         
      3. three
        4.  
      
       
      
       
         Unordered lists 
      
       
      
         
         
      • INSIDE
        •  
         
      • two
        •  
         
      • three
        •  
      
       
      
         
         
      • INSIDE
        •  
         
      • two
        •  
         
      • three
        •  
      
       
      
         
         
      • DEFAULT
        •  
         
      • two
        •  
         
      • three
        •

      列表样式图像属性

      它指定图像作为标记。使用此属性，我们可以设置图像项目符号。它的语法类似于background-image属性。如果找不到对应的图像，将使用默认的项目符号。

      例

        
 
    
   CSS Lists
       
    
    
      
       
         Welcome to the javaTpoint.com 
      
       
            
       
         Ordered Lists 
      
       
      
         
         
      1. one
        2.  
         
      2. two
        3.  
         
      3. three
        4.  
      
       
      
       
         Unordered lists 
      
       
      
         
         
      • one
        •  
         
      • two
        •  
         
      • three
        •

      列表样式的属性

      它是速记属性，用于在一个表达式中设置所有列表属性。此属性的值的顺序是类型，位置和图像。但是，如果缺少任何属性值，则将插入默认值。

      例

        
 
    
   CSS Lists
       
    
    
      
       
         Welcome to the javaTpoint.com 
      
       
            
       
         Ordered Lists 
      
       
      
         
         
      1. one
        2.  
         
      2. two
        3.  
         
      3. three
        4.  
      
       
      
       
         Unordered lists 
      
       
      
         
         
      • one
        •  
         
      • two
        •  
         
      • three
        •

      带有颜色的样式列表

      为了使列表更具吸引力和趣味性，我们可以使用颜色设置列表样式。除了什么

        要么
          标签会影响整个列表，而对单个列表的添加
        1. 标签会影响相应列表中的项目。

          例

            
 
    
   CSS Lists
       
    
    
      
           
         Welcome to the javaTpoint.com 
      
           
            
           
         Ordered Lists 
      
           
      
             
         
          1. ONE
            2.  
         
          2. TWO
            3.  
         
          3. THREE
            4.  
      
           
      
           
         Unordered lists 
      
           
      
             
         
          • ONE
            •  
         
          • TWO
            •  
         
          • THREE
            •