迹忆客 专注技术分享

本文将介绍如何在 HTML 中创建多个类。本文将讨论在 HTML 中使用多个类的好处。

将多个类分配给 HTML 中的容器

在 HTML 中，我们经常看到一个类分配给一个容器。我们可以使用 class 属性在 HTML 元素中分配一个类，然后写入值。我们可以在块级和内联元素中创建一个类。我们可以为不同的 HTML 标签创建类，例如 <img>、<p>、<h1> 等等。通常，我们可以创建一个容器并为其分配一个类，并使用 CSS 为容器设置样式。我们可以使用 . 选择容器类 CSS 选择器。让我们看一个例子。

<div class ="box">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

在上面的示例中，我们创建了一个带有类 box 的 div 元素。我们在 div 中有一些内容。在 CSS 中，我们选择了 box 类并对其应用了一些样式。我们创建了一个具有一定高度和宽度的盒子。它有一个黑色边框。

我们还可以在 HTML 中为一个容器分配两个类。为此，我们应该写下类的两个名称，一个接一个用空格分隔。然后，我们可以单独设置包含相同容器的类的样式。

例如，创建一个 div，如上例所示。为 div 编写由空格分隔的两个类 box 和 wrapper。在 CSS 中，首先选择 box 类并编写 border 属性。将 border 属性的值设置为 2px solid black。然后，给出 200px 的高度和宽度。接下来，选择 wrapper 类并将 20px 的值赋予 margin 属性。

在下面的示例中，我们使用两个类向容器添加了 20px 的边距。

示例代码：

<div class ="box wrapper">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

.wrapper{
    margin:20px;
}

在 HTML 中为容器分配多个类以编写高效的 CSS

我们学习了如何在一个容器中使用多个类。现在，我们需要了解遵循这种方法的好处。当某些类具有相同的属性时，我们可以在容器中使用多个类。我们可以一次性设置通用类的样式，然后单独设置单个类的样式。因此，我们可以高效地编写 CSS。

例如，在 HTML 中创建三个 div 元素。对于每个元素，写 box 作为第一个类名。然后，为第一个 div 编写类名 redBox，为第二个 div 编写类名 greenBox，为第三个 div 编写类名 blueBox。接下来，在 CSS 中，选择 box 类并提供 200px 的高度和宽度。设置 20px 的边距。现在，选择单个类名并提供相应的背景颜色。选择 redBox 类并将 background-color 属性设置为 red。用各自的颜色作为背景颜色对其余的类重复相同的操作。

在下面的例子中，我们确定了这三个盒子的共同属性并创建了一个共同的类 box。因此，我们不需要为每个框编写重复的样式。我们还为容器分配了单独的类，通过这些类，我们可以用独特的颜色来设置盒子的样式。这样，我们就可以使用多个类来编写高效的 CSS 代码。

示例代码：

<div class ="box redBox"></div>
<div class ="box greenBox"></div>
<div class ="box blueBox"></div>

.box{
    height:200px;
    width:200px;
    margin:20px;
}

.redBox{
    background-color:red;
}

.greenBox{
    background-color:green;
}

.blueBox{
    background-color:blue;
}