資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在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 次瀏覽
廣告