最新的Web開發教程

HTML類


使用class屬性

該HTML class屬性能夠定義等於樣式具有相同的類名的元素。

在這裡,我們有三個<div>指向相同的類名的元素:

<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>
試一試»

倫敦

倫敦是英國的首都。 它是英國人口最多的城市,有超過13萬居民的大都市區。

站在泰晤士河,倫敦一直是主要解決兩千年來,它的歷史可以追溯到羅馬人,誰把它命名為倫迪尼烏姆成立。

巴黎

巴黎是首都和法國的人口最多的城市。

坐落於塞納河,它是在法蘭西島地區的心臟地帶,也被稱為該地區的巴黎。

在大都市區是歐洲最大的人口中心,擁有超過12萬居民中的一個。

東京

東京是日本,大東京地區的中心所需的資本,並在世界上人口最多的大都市區。

這是日本政府和皇宮,和日本皇室的家的所在地。

東京府是38億人口,是世界上最大的城市經濟是世界上人口最多的大都市區的一部分。


使用class的內聯元素屬性

的HTML類屬性也可用於內聯元素:

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
    font-size: 120%;
    color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>
試一試»

測試自己與練習!

練習1» 練習2» 練習3»