HTML 属性允许我们定义元素的附加特征或属性。通过将 id 和 class 属性分配给元素，我们可以在 CSS 规则中定位它们并设置它们的样式。在本文中，将详细了解这两个属性之间的区别以及如何使用它们来定义元素的样式。
id 属性
你有没有想过拥有名字有多方便？我们不必称每个人为“你”，并且可以轻松地指定我们正在与谁交谈，而无需进行冗长的描述。
在这方面，ID 类似于名称。为元素提供唯一标识符允许您在创建 CSS 规则或使用 JavaScript 时直接提及它。如果你想给一个标题设置不同的样式，你可以给它一个并在标签id内为这个元素设置一个 CSS 规则。<style>
ID 选择器语法
在样式表中，我们可以使用哈希 ( # ) 访问 id。例如，如果您为某个标题指定了一个 id，请键入#Header以将其用作选择器。选择器允许您为唯一元素、元素类型和类设置 CSS 规则。
假设我们希望标题在红色背景上以粗体显示。使用属性font-weight并background 给它们各自的值。在这种情况下，CSS 规则如下所示：
#Header {
font-weight: bold;
background: rgb(255, 0, 0);
}
ID 值必须是唯一的
两个不同的人可以有相同的名字，但元素的 ID 不是这样。在一个文档中，没有两个元素应该有相同的 id，并且每个元素只能有一个 id——这就是它的本来面目！
从技术上讲，CSS 本身不存在重复 id 的问题——它只会对它们应用相同的规则。然而，JavaScript 要求所有 id 都是唯一的，并且通常，遵守语言规则会使您的代码更好，更能适应未来的变化。
ID 区分大小写
Id 值区分大小写——这意味着大写字母会改变值。例如，id="Header"andid="header"是两个具有不同值的 id。在分配 id 并将它们用作选择器时，请确保使用正确的大小写。
使用字符在某些情况下可能会导致兼容性问题，所以最好坚持使用字母 ASCII 字母，数字、“ _ ”、“ - ”和“ . ”用于 id 值。
添加带有 id 属性的书签
如果你曾经狂读过维基百科，你就会知道书签的重要性。它们是您在目录中看到的链接，可让您跳转到您感兴趣的任何部分——这在阅读较长的文章时特别方便。
要创建书签，您需要：
1. 为要用作书签的元素添加 id - 例如，h2 标题：<h2 id="Сh2">
2. 使用前面带有哈希 ( # ) 的 id 作为链接的值添加到书签的链接。例如，<a href="#Ch2">Jump to Chapter 2</a>
当用户点击链接时，页面将滚动到第 2 章。
类属性
除了为元素提供唯一的 id 之外，您还可以分配类。与 id 不同的是，许多元素可以属于同一个类，一个元素可以有多个类。如果我们回到关于 id 的唯一性类似于名称的类比，类更像是人们所属的群体。例如，您可能只认识一个 Chris Hemsworth，但许多人具有相同的性别和相同的公民身份——男性和澳大利亚人是他所属的两个群体。class是一个全局属性，这意味着它可以添加到任何元素。
类选择器语法
要在标记中定义任何类<style>，请键入其值，前面带有句点 ( . )。例如，要为类的所有元素设置蓝色price，我们应该应用以下规则：
.price {
color:blue;
}
此规则只会影响具有属性的元素class=" price"，而其他元素将保持不变。
使用类
CSS 类将帮助您快速设计 HTML 元素的样式。它们允许您一次向元素添加大量属性，而无需重复相同的代码。
例如，如果您希望类的所有元素都price 显示为蓝色，请设置以下规则：
.price {
color:blue;
}
类区分大小写
与 id 值类似，类值也区分大小写。如果您的属性以大写字母开头，则引用该类的选择器也应以大写字母开头，反之亦然。这意味着，如果您将 class 属性设置为并尝试使用 selector 为其设置规则，它根本不起作用。 class=" example" .Example
一个元素可以有多个类
使用类的好处之一是一个元素可以属于多个类。要列出类，请将它们写在由单个空格分隔的类属性值中。
假设您有一个包含一系列产品的页面。您希望所有价格都显示为蓝色，折扣价显示为浅灰青色。将折扣价的class属性值设置为“ price best”，并添加如下CSS规则：
.price {
color:blue;
}
.best {
background-color:#e1f6ee;
}
不同的元素可以属于同一个类
由于一个元素可以属于多个类，因此不同类型的元素也可能属于同一个类。例如，如果您希望所有新信息都显示在粉红色背景上（无论出于何种原因），无论是新标题还是新段落，请将新类添加到元素<h1>并<p>为选择器创建规则.new：
.new {
rgb(255, 230, 230
}
使用 # 访问 id 选择器
CSS 选择器允许您定位网页上的特定元素以设置它们的样式。但首先，您需要为元素提供一个唯一的 id，并在该元素的开始标记内使用该属性。要将样式规则应用于该元素，请使用其前面的值作为选择器。 idid#
注意字母大小写
有些语言区分大小写，有些则不区分大小写。CSS 很奇怪，因为它同时不区分大小写和敏感。您需要记住的是 id 和 class 选择器区分大小写，因为 HTML 值的属性id和class 是。写入这些值时，请始终注意使用正确的大小写。
访问类选择器
选择器是 CSS 最重要的方面之一，因为它们允许您识别要设置样式的元素。类选择器用句号 ( . ) 定义，紧跟在类值之后。当然，您首先需要使用class 属性将类分配给元素。
用空格分隔类
您可以将多个类分配给同一个元素——或者顺便说一下，将同一个类分配给任意数量的元素。请记住，当一个元素有多个类时，它们的名称必须用空格字符分隔。
以上内容为转载
网友评论