最新的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»