我们如何在HTML中使用不同的CSS类？-html教程-PHP中文网

首页

web前端

html教程

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

王林

Sep 15, 2023 pm 03:41 PM

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

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

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

要选择具有特定类的元素，您需要编写一个句点（.）字符，后面跟上类的名称，例如，让我们看一下“.black”类，

.black {
   color: #000000;
}

对于我们文档中class属性设置为black的每个元素，以黑色渲染内容。例如，仅对class属性设置为black的

元素以黑色渲染内容。

h3.black {
   color: #000000;
}

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

示例 1

下面给出了一个示例，其中我们有两个元素，它们的 class 属性具有相同的值。所有元素将根据 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 id="Jason">Jason</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -A</li>
      </ol>
   </div>
   <div class="information">
      <h2 id="Abdul">Abdul</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -B</li>
      </ol>
   </div>
</body>
</html>

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

Example 2

的中文翻译为：

示例2

下面给出了一个示例，其中我们有两个元素，它们的 class 属性具有不同的值。两个元素将根据 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>

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

Example 3

的中文翻译为：

示例 3

给出以下示例，其中我们有三个具有不同值的class属性的元素。根据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 id="Jason">Jason</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -A</li>
      </ol>
   </div>
   <div class="information">
      <h2 id="Abdul">Abdul</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -B</li>
      </ol>
   </div>
   <div class="computerscience">
      <h2 id="Satya">Satya</h2>
      <ul>
         <li>Bachelor's of Engineering</li>
         <li>Cse stream</li>
         <li>section -A</li>
      </ul>
   </div>
</body>
</html>

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

Example 4

的中文翻译为：

示例 4

另一个例子可以包括对

标签进行样式设置。通过以下方式，将所有具有class="device"的

元素进行样式设置

<!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

标签的样式可以通过多个类来完成，即此处的设备和配件 -

<!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>

以上是我们如何在HTML中使用不同的CSS类？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

HTML行动：网站结构的示例May 05, 2025 am 12:03 AM

HTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。

您如何将图像插入HTML页面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

See all articles