CSS 列表样式类型

层叠样式表包含一段代码，负责为由HTML开发的内容添加效果和属性。HTML和CSS都被用来创建静态网页或动态网站。CSS包含几种效果，其中之一是应用于HTML列表的样式属性。这个属性是为了增强列表项，也就是最可能的文本，通过添加子弹的效果。今天，我们讨论的是列表的样式类型。在文章中，我们提到了几个例子，以使列表的子弹有独特的风格。

一个HTML代码包含两个基本部分：标题部分包含标题标签和标签（如果我们使用内部CSS）。标签包含我们想在网页上创建的所有内容的标签。列表标签也写在body标签里面。

同样，CSS代码也被分为内联、内部和外部CSS。用标签写在内容标签内的效果是内联CSS。写在HTML头部部分的是内部CSS。第三种是外部CSS，在另一个文本编辑器的文件中以".css "为扩展名声明。

什么是HTML列表？

超文本标记语言（Hypertext Markup Language）创建内容以形成一个网站，包括文本、图像、表格、形状、段落等。文本是任何网站的构建块。这可以用几种方式来写，一种方法是HTML "列表"。列表是一个文本的垂直展示，有或没有子弹。HTML列表只是以与我们创建手动列表相同的方式出现。列表被分成更多的类别。当文本用数字表示时，它是由一个有序的列表

完成的。如果是通过任何符号或形状来表示，则是一个无序列表
。用来创建列表的语法提到如下:

<ul>

<li> item1 </li>

<li> item2 </li>

</ul>

无序列表的语法在前面的例子中已经给出。列表的第一个开放标签和关闭标签被声明。这些外层标签决定了列表是有序的还是无序的。在这两个标签里面，

• 标签被用来添加我们希望成为列表一部分的项目名称。

  列表样式属性

  CSS 列表样式属性是应用于列表中的子弹的效果。列表的样式属性有几种类型。这里解释一下其中的一些。基本的语法是这样写的。

  <style>
  
  List-style-type : disc;
  
  </style>
  

  让我们来实现和解释这个属性的工作。

  无序列表的列表样式类型

  首先，我们对无序列表的子弹头应用一些效果。这些子弹是符号和形状。例如，圆形、正方形、圆盘等。

  属性值圆盘

  我们创建一个简单的网页，在正文部分中给出一个标题。我们使用一个段落标签来写一些文本。然后，按照我们之前的描述，创建一个无序列表。同样的语法如下。在

  标签内，我们声明属于内部CSS的类名。所有在类里面提到的效果都在这里应用于这个列表。

  <ul class = "sub">
  

  

  在这个标签里面，声明了列表的三个项目。关闭列表和外部标签。这就是HTML代码的主体部分的全部内容。

  现在，我们开始进入标题部分。在头部，我们给页面一个标题。然后，声明内部CSS样式标签。在它里面，声明了一个 "子 "类，也就是无序列表标签里面使用的名称。所有的效果都在这个类里面应用。

  创建ID和类是为了集体使用你想应用的效果。然后，在我们想要应用这些效果的标签里面使用这些名字。

  .sub {
  
  List-style-type: disc;
  
  }
  

  这里使用的列表样式是一个圆盘。如果我们在创建列表时不使用这个属性，形成的默认子弹是圆盘状的。

  

  进一步的效果是在标题中。字体的颜色被添加到标题中。除了正文之外，背景色和字体颜色也被应用。

  在带有html扩展的文本编辑器中保存代码，创建一个在浏览器中执行的网页。通过使用这个扩展，你会看到你保存的文本编辑器文件的符号变成了浏览器的图标。这表明这是一个网页。

  

  在执行过程中，你会看到所创建的网页包含了主题名称的列表，这些项目是通过圆盘上的子弹声明的。

  属性值圆圈

  在使用了默认的圆盘子弹值后，我们使用另一个形状来样式一个无序的列表。这一次，样式属性包含列表样式类型为圆形的类。而代码的其他部分，无论是头部部分还是主体部分，都是一样的。只有在样式类型上做了改变，才能看到效果的作用。

  列表样式类型： 圆形:

  CSS代码:	输出:

  关闭样式标签，在浏览器中执行该代码。你会看到，填充的圆盘子弹通过圆圈状的子弹被取代。

  有序列表的列表样式类型

  现在，我们用数字和字母值来对有序列表的子弹头进行效果处理。

  属性值十进制

  至于要创建的有序列表，我们使用任何数字值。通常在人工计数或编号中使用的是十进制符号。我们将首先采用十进制的编号方式。整个HTML代码是一样的，CSS代码只是通过被称为 "十进制 "的子弹头名称来招待。在CSS类中提到的列表样式类型效果是十进制的。

  列表样式类型： 十进制:

  CSS代码	输出:

  执行后，你会看到子弹从圆形变成了十进制数字。

  属性值Lower-Greek
  列表样式属性以 lower-greek 命名，以应用这种效果，并修改列表的列表样式属性。

  CSS代码	输出:

  属性值:无

  我们还可以通过在列表样式类型属性中使用 "none "关键字来隐藏列表中的子弹:

  CSS代码	输出

  属性值:乔治亚语

  最后，也是最重要的，使用的是 "格鲁吉亚 "的值，它被添加到列表的子弹中:

  CSS代码	输出

  结论

  CSS 列表样式属性是应用在列表中的子弹上的效果，无论列表是有序还是无序的。我们首先简单介绍了HTML和CSS语言，包括它们的标签声明。然后，我们阐述了HTML列表的结构以及它们的类型。阐述了列表样式的类型属性，我们实现了一些样式以了解这个属性是如何工作的。我们分别使用了一些有序和无序列表的例子。