如何在HTML中使用不同的CSS类？

我们使用class属性为HTML元素指定一个类。

多个HTML元素可以共享相同的类。通过使用类的各种属性，例如更改颜色、字体等，我们可以为这些HTML元素定义样式规则。拥有该类的元素将根据定义的规则进行格式化。这被称为类选择器。

要选择具有特定类的元素，需要编写一个句点(.)字符，后跟类名，例如，让我们来看一下“.black”类，

.black {
   color: #000000;
}

为文档中class属性设置为black的每个元素呈现黑色内容。例如，仅为class属性设置为black的<h3>元素呈现黑色内容。

h3.black {
   color: #000000;
}

我们使用class属性指向样式表中的类名。JavaScript也可以使用它来访问具有特定类名的元素。

示例1

下面是一个示例，其中我们有两个<div>元素，它们具有相同值的class属性。所有<div>元素都将根据head标签中样式定义进行相同的样式设置。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .information,ol {
         border: 2px solid black;
         margin: 20px;
         padding: 20px;
      }
      ol{
         background-color: darkgoldenrod;
      }
   </style>
</head>
<body>
   <div class="information">
      <h2>Jason</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -A</li>
      </ol>
   </div>
   <div class="information">
      <h2>Abdul</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -B</li>
      </ol>
   </div>
</body>
</html>

以下是上述示例程序的输出。

示例2

下面是一个示例，其中我们有两个<div>元素，它们具有不同值的class属性。两个<div>元素将根据head标签中样式定义进行样式设置。

要定义多个类，请用空格分隔类名。元素将根据指定的类进行样式设置。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .room {
         font-family: monospace;
         font-size: 200%;
         color: tomato;
         text-align: center;
      }
      .two{
         font-family: cursive;
         color: lawngreen;
         text-align: center;
      }
   </style>
</head>
<body>
   <p class="room">Meta tag contents are not visible on your browser.</p>
   <p class="room two"> The mata tag is added inside the head tag.</p>
</body>
</html>

要定义多个类，请用空格分隔类名或提及不同的值。元素将根据指定的类进行样式设置。

示例3

下面是一个示例，其中我们有三个<div>元素，它们具有不同值的class属性。两个<div>元素将根据head标签中样式定义进行相同的样式设置，另一个将根据head标签中样式定义进行样式设置。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .information,ol {
         border: 2px solid black;
         margin: 20px;
         padding: 20px;
      }
      .computerscience,ul {
         border: 2px solid black;
         margin: 20px;
         padding: 20px;
      }
      ol{
         background-color: brown;
      }
      ul{
         background-color: tomato;
      }
   </style>
</head>
<body>
   <div class="information">
      <h2>Jason</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -A</li>
      </ol>
   </div>
   <div class="information">
      <h2>Abdul</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -B</li>
      </ol>
   </div>
   <div class="computerscience">
      <h2>Satya</h2>
      <ul>
         <li>Bachelor's of Engineering</li>
         <li>Cse stream</li>
         <li>section -A</li>
      </ul>
   </div>
</body>
</html>

以下是上述示例程序的输出。

示例4

另一个示例可能包括为<p>标签设置样式。通过以下方法，为所有具有class="device"的<p>元素设置样式

<!DOCTYPE html>
<html>
<head>
   <style>
      p.device {
         background: #000000;
         color: #fffffF;
      }
   </style>
</head>
<body>
   <p>This is demo text</p>
   <p class="device">Information about devices.</p>
   <p>This is demo text</p>
</body>
</html>

示例5

<p>标签的样式可以使用多个类，这里为devices和accessories：

<!DOCTYPE html>
<html>
<head>
   <style>
      p.device {
         background: #000000;
         color: #fffffF;
      }
      p.accessories {
         text-align: center;
      }
   </style>
</head>
<body>
   <p class="device accessories">DEVICE DETAILS</p>
   <p class="device">Information about devices.</p>
</body>
</html>

更新于：2022年10月19日

492 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告