我們使用class屬性來為HTML元素指定一個類。
多個 HTML 元素可以共享同一個類。使用類的各種屬性，例如更改顏色、字體等，我們可以為這些 HTML 元素定義樣式規(guī)則。具有該類的元素將根據定義的規(guī)則進行格式化。這稱為類選擇器。
要選擇具有特定類的元素，您需要編寫一個句點（.）字符，后面跟上類的名稱，例如，讓我們看一下“.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
另一個例子可以包括對<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
標簽的樣式可以通過多個類來完成，即此處的設備和配件 –
<!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類？的詳細內容，更多請關注www.92cms.cn其它相關文章！
