id 属性用于为HTML元素指定唯一的id,Class属性用于为HTML元素指定相同类名的多个元素。
使用id属性
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">标题</h1>
</body>
</html>
PS:id 的语法是:写一个井号#,后跟一个 id 名称。然后,在括号 { } 中定义 CSS 属性。
Class与ID差异
<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
background-color: lightblue;
color: black;
padding: 5px;
text-align: center;
}
/* 设置类名为 "city" 的所有元素的样式 */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">标题</h1>
<!-- 拥有相同类名的多个元素 -->
<h2 class="city">段落</h2>
<p>内容内容内容</p>
<h2 class="city">段落</h2>
<p>内容内容内容</p>
PS:同一个类名可以由多个HTML元素使用,而一个id名称只能由页面中的一个HTML元素使用:
广告插入