CSS教程：li和ul标签用法举例

简介

在HTML中，我们可以使用ul和li标签来创建列表，这些列表可以用于各种场景，如菜单，导航以及文章的内容提纲等等。使用CSS可以对这些列表进行美化和排版。

在本教程中，我们将看到如何使用CSS来控制ul和li标签，并对它们进行样式设置。

使用ul和li标签创建列表

例如，以下代码会创建一个简单列表：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

对应的效果如下：

• 苹果
• 香蕉
• 橙子

CSS样式设置

1. 改变列表项的颜色

要改变列表项的颜色，我们可以使用color属性。例如，以下代码将所有列表项的颜色设置为红色：

ul li {
  color: red;
}

此时，列表项的颜色会变成红色：

• 苹果
• 香蕉
• 橙子

2. 改变列表符号的样式

另一个常见的样式更改是更改列表符号的样式。我们可以使用list-style-type属性来更改列表符号的样式。

例子：以下代码将列表项的符号更改为圆圈：

ul {
  list-style-type: circle;
}

此时，列表的符号会变成圆圈：

• 苹果
• 香蕉
• 橙子

我们也可以将列表符号样式更改为其它形状，如方块(square)、罗马数字等等。

总结：

本教程中简单讲解了如何使用CSS对ul和li标签进行样式设置，使用更改列表项的颜色和修改列表符号样式举例说明。希望本教程能帮助初学者更好地理解CSS的基础知识。