[分享]css中class使用方法

CSS class在前端开发中被广泛使用，它可以帮助我们定义一组相同样式的元素，从而使我们的代码更加清晰、简洁。

.nav {
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 5px;
}

以上代码定义了一个名为“nav”的class，这个class样式将应用于所有使用该class的元素。

如何使用class呢？我们只需要在HTML元素中添加class属性，其值为我们在CSS中定义的class名即可：

<div class="nav">
  <ul>
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
  </ul>
</div>

以上代码中，<div>元素使用了名为“nav”的class，因此它的背景色、内边距和圆角样式与CSS中定义的样式相同。

除了使用一个class之外，我们还可以同时为一个元素定义多个class，只需要在class属性中加上各个class名并用空格隔开即可：

.red {
  color: red;
}
.bold {
  font-weight: bold;
}

<h1 class="red bold">标题</h1>

以上代码将给<h1>元素应用了两个class，即“red”和“bold”，这样它的文字颜色和字体粗细都会生效。

通过合理使用class，可以让我们的页面更加清爽易懂，同时也方便我们进行样式调整与维护。