我們如何在HTML中使用不同的CSS類別？
- 王林轉載
- 2023-09-15 15:41:121389瀏覽
我們使用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
另一個例子可以包含對
標籤進行樣式設定。透過以下方式，將所有具有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中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：在HTML5畫布上繪製SVG文件下一篇：在HTML5畫布上繪製SVG文件