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

📅  最后修改于: 2021-11-07 08:49:13             🧑  作者: Mango

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

那么如何增强网页上文本和列表的视觉效果和样式。 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(默认值)、inheritinitial
  3. list-style-image:指定列表项标记的图像。

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

句法:

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

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

HTML


  

    
    
    
    CSS List style Properties
    

  

    

GeeksforGeeks

    CSS list-style property for grocery list        
            
  • Bread
  •         
  • Eggs
  •         
  • Milk
  •         
  • Coffee
  •         
  • Cereals
  •     
  


HTML


  

    
    
    
    CSS Style List Properties
    

  

    

GeeksforGeeks

    The list-style property for fruits          

This is a another example of list-style properties

          
            
  • Apple
  •         
  • Banana
  •         
  • Orange
  •     
  


输出:

列表样式属性

示例 2:

HTML



  

    
    
    
    CSS Style List Properties
    

  

    

GeeksforGeeks

    The list-style property for fruits          

This is a another example of list-style properties

          
            
  • Apple
  •         
  • Banana
  •         
  • Orange
  •     
  

输出: