HTML的class屬性怎么用？使用方法詳細(xì)總結(jié)！

猿友 2021-05-20 11:26:37 瀏覽數(shù) (9578)

反饋

我們?cè)陂_(kāi)發(fā)網(wǎng)頁(yè)時(shí)有一個(gè)屬性經(jīng)常被用到，那就是 class。這篇文章 w3cschool 小編來(lái)為大家介紹下 HTML 的 class 屬性怎么用。學(xué)習(xí) class 看這篇文章就夠了。

class 屬性怎么用？

class 屬性用來(lái)規(guī)定元素的類(lèi)名，最常用在樣式表上，JavaScript 上也有部分用到。顧名思義，class 是用來(lái)定義一種類(lèi)的，它指定元素的分類(lèi)，比如我們?cè)跇邮奖砩显O(shè)定一個(gè)類(lèi)的屬性，在 HTML 中只要將該元素的類(lèi)名設(shè)置為相同就可以了。如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>class屬性 - 編程獅(w3cschool.cn)</title>
	<style type="text/css">
		.red{
			color: red;
		}
		.blue{
			color: blue;
		}
	</style>
</head>
<body>
	<p class="red">第一行被設(shè)置為紅色的文字</p>
	<p class="red">第二行被設(shè)置為紅色的文字</p>
	<p class="blue">第一行被設(shè)置為藍(lán)色的文字</p>
	<p class="blue">第二行被設(shè)置為藍(lán)色的文字</p>
</body>
</html>

在這段代碼中，我們可以看到總共有四句話，不同的兩句話之間被賦予了同一個(gè) class，顯示出來(lái)的效果也是一樣的。效果如下：

class屬性