如何使用 CSS 在一个声明中定义所有列表属性？

有时一个网页有很好的阅读内容，但文字的样式看起来不合适，让读者觉得无聊，最后他们离开了网页。但是当他们阅读具有适当样式和列表的文章时，他们会完全阅读它们，因为那里陈述的良好视觉效果使他们被文章和阅读所吸引。

那么如何增强网页上文本和列表的视觉效果和样式。 CSS 列表属性可以应用于 HTML 列表元素，如 CSS list-style-type 、CSS list-style-image和 CSS list-style-position属性，使它们具有吸引力和吸引力。

在本文中，我们将学习声明和设置列表属性的样式。

HTML 列表的类型：

1. 有序列表：项目列表，其中每个项目列表都标有数字。
2. 无序列表：项目列表，其中每个项目列表都标有项目符号。

样式列表属性：

CSS 提供了多种属性，用于对最常用的无序列表和有序列表进行样式设置和格式化。这些 CSS 列表属性通常允许您

• 控制元素的形状或外观。
• 为元素指定图像而不是项目符号或编号。
• 设置元素与列表中文本之间的距离。
• 指定元素是出现在包含列表项的框的内部还是外部。

列表属性包含以下属性：

1. list-style-type：指定列表项标记的类型。这些值可以设置为圆、方、罗马字符等，其中默认值设置为圆盘。
2. list-style-position：它指定列表项标记的位置或位置。这些值可以设置为inside、outside（默认值）、inherit和initial 。
3. list-style-image：指定列表项标记的图像。

注意： list-style属性是其他三个属性list-style-type、list-style-position和list-style-image 的组合，可以用作这三个属性的简写符号。

句法：

list-style: list-style-type list-style-position list-style-image|
initial|inherit;

示例 1：以下代码使用图像文件“gfg3.png”作为项目符号样式。

HTML

  

    
    
    
    
    

  

    
GeeksforGeeks
    CSS list-style property for grocery list
  
    

        
Bread
        
Eggs
        
Milk
        
Coffee
        
Cereals
    

  

输出：

列表样式属性

示例 2：

HTML

  

    
    
    
    
    

  

    
GeeksforGeeks
    The list-style property for fruits
  
      
This is a another example of list-style properties
  
  
    

        
Apple
        
Banana
        
Orange
    

  

输出：