如何在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 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告