我們如何在HTML中使用不同的CSS類別？-html教學-PHP中文網

範例 5

Jason

Abdul

Example 4

Satya

首頁

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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn