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

百变鹏仔 3个月前 (09-21) #HTML

文章标签如何在

我们使用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>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>

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

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

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

Example 4

的中文翻译为：

示例 4

另一个例子可以包括对

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

元素进行样式设置

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

元素以黑色渲染内容。

示例 1

Example 2

示例2

Example 3

示例 3

Example 4

示例 4

示例 5

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8