我們使用class屬性來(lái)為HTML元素指定一個(gè)類。
多個(gè) HTML 元素可以共享同一個(gè)類。使用類的各種屬性，例如更改顏色、字體等，我們可以為這些 HTML 元素定義樣式規(guī)則。具有該類的元素將根據(jù)定義的規(guī)則進(jìn)行格式化。這稱為類選擇器。
要選擇具有特定類的元素，您需要編寫(xiě)一個(gè)句點(diǎn)（.）字符，后面跟上類的名稱，例如，讓我們看一下“.black”類，
.black {
color: #000000;
}
登錄后復(fù)制
對(duì)于我們文檔中class屬性設(shè)置為black的每個(gè)元素，以黑色渲染內(nèi)容。例如，僅對(duì)class屬性設(shè)置為black的
元素以黑色渲染內(nèi)容。
h3.black {
color: #000000;
}
登錄后復(fù)制
我們使用類屬性來(lái)指向樣式表中的類名。 JavaScript 還可以使用它來(lái)訪問(wèn)具有特定類名的元素。
示例 1
下面給出了一個(gè)示例，其中我們有兩個(gè) 元素，它們的 class 屬性具有相同的值。所有 元素將根據(jù) head 標(biāo)記中的樣式定義進(jìn)行相同的樣式設(shè)置。
<!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>
登錄后復(fù)制
以下是上述示例程序的輸出。
Example 2
的中文翻譯為：
示例2
下面給出了一個(gè)示例，其中我們有兩個(gè) 元素，它們的 class 屬性具有不同的值。兩個(gè) 元素將根據(jù) head 標(biāo)記中的樣式定義設(shè)置樣式。
要定義多個(gè)類，請(qǐng)用空格分隔類名。元素將根據(jù)指定的類進(jìn)行樣式設(shè)置。
<!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>
登錄后復(fù)制
要定義多個(gè)類，請(qǐng)用空格分隔類名或指定不同的值。元素將根據(jù)指定的類進(jìn)行樣式設(shè)置。
Example 3
的中文翻譯為：
示例 3
給出以下示例，其中我們有三個(gè)具有不同值的class屬性的元素。根據(jù)head標(biāo)簽中的樣式定義，兩個(gè)元素將被等同地進(jìn)行樣式設(shè)置，而另一個(gè)元素將根據(jù)head標(biāo)簽中的樣式定義進(jìn)行樣式設(shè)置
<!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>
登錄后復(fù)制
以下是上述示例程序的輸出。
Example 4
的中文翻譯為：
示例 4
另一個(gè)例子可以包括對(duì)<p>標(biāo)簽進(jìn)行樣式設(shè)置。通過(guò)以下方式，將所有具有class=”device”的<p>元素進(jìn)行樣式設(shè)置
<!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>
登錄后復(fù)制
示例 5
標(biāo)簽的樣式可以通過(guò)多個(gè)類來(lái)完成，即此處的設(shè)備和配件 –
<!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>
登錄后復(fù)制
以上就是我們?nèi)绾卧贖TML中使用不同的CSS類？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
