如果要给 HTML 元素设置 CSS 样式，则需要在元素中设置 "id" 和 "class" 属性，该属性用作选择器。
使用他们的使用记住一条规则 id在页面是唯一的，class是可以多次重复使用的。所有在一些经常使用的到css效果我们可以用class定义
(1)、id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。
<head>
<style>
#heading{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 id="heading">CSS 选择器</h1>
</body>
(2)、class 选择器
class 选择器用于描述一组元素的样式，也叫做类选择器，class 选择器有别于 id 选择器，class 可以在多个元素中使用，并且一个元素也可以指定多个类名。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 "." 号来定义。可以设置所有带有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。注意：类名的第一个字符也不能使用数字。
实例：所有拥有 center 类的 HTML 元素均为居中显示。
<head>
<style>
.center{
text-align:center;
}
.col{
color:red;
}
.font{
font-size:18px;
font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center font">我是另一个段落。</p>
</body>
实例：所有的 p 元素使用 class="center"，让该元素的文本居中。
<head>
<style>
.center{
color:blue;
}
p.center{
text-align:center;
}
p.col{
color:red;
}
.font{
font-size:18px;
font-weight:bold;
font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center col">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center col font">我是另一个段落。</p>
<h2 class="center">h2 标题</h2>
</body>
(3)、ID 选择器和类（class）选择器的区别
相同点：可以应用于任何元素。
不同点：
①、ID 选择器只能在文档中使用一次。与类选择器不同，在一个 HTML 文档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
②、可以使用类选择器词列表方法为一个元素同时设置多个样式。在一个 HTML 文档中，可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID 选择器是不可以的，不能使用 ID 词列表，即一个元素可以指定多个类名，如 <span class="one two three">文本</span>，而 ID 只能指定一个。
辽公网安备:42900402000182号