在 HTML 中创建多个类

Subodh Poudel 2023年2月19日 2021年10月2日
  1. 将多个类分配给 HTML 中的容器
  2. 在 HTML 中为容器分配多个类以编写高效的 CSS
在 HTML 中创建多个类

本文将介绍如何在 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;
}

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

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

例如,创建一个 div,如上例所示。为 div 编写由空格分隔的两个类 boxwrapper。在 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;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn