了解 HTML 中 ID 和类之间的区别。

2023-11-29 00:03:39 浏览数 (1)

每当我们决定学习新事物时,我们都会面临各种各样的困难。理解我们想要学习的概念是很重要的。

今天,我们将学习两个在成为程序员或开发人员时每天都会遇到的常用概念。那就是 ID 和 CLASS 的概念。

对它们的理解和获取护照一样重要,如果您希望出国旅行的话。

首先,什么是 ID?用简单的英语来说,ID 代表身份证件。每个人都有某种身份,可以被识别。例如,如果一个人在许多矮个子中身高较高,他可以被描述或识别为“高个子”,其他人会知道指的是谁,因此可以用这个人的身高来在其他成员中识别他或她。

现在,让我们进一步深入了解。当一个人获得出生证明、护照、居留卡、国民保险号码等时,这些都是不同类型的身份证明文件,因为这些文件可以用于具体识别、追踪或指向他们。

没有两个人会有完全相同的身份。在上面解释的身份证明文件类比中,当两个或更多人拥有完全相同的身份名称、文件号、出生日期等时,这意味着某些地方出现了问题,需要重新检查和更正。

编程世界中也是同样的概念。

当您不希望某个元素改变时,可以为该元素应用 ID。也就是说,如果您不希望某个项目改变或属于大众的类,最好的方法就是为该项目或元素应用 ID,这样您可以使用您为该元素或项目指定的 ID 名称,从 100 万个以上的其他项目中特别识别出它们。

在 HTML 文档中,ID 被写为例如; ID = sam;而在 CSS 中,它们用 # 符号表示,所以在 CSS 中 ID = sam 将会被写为或目标为 #sam。

另一方面,类是灵活的。可以使用相同的类名应用于许多不同的元素或项目。从身份证明文件的类比来看,两个或更多人不能完全拥有相同的身份证明文件特征,但类不在乎。

对于 Class 来说,不同的人可以拥有完全相同的特征,比如姓名、号码、出生日期等,一切仍然都会很好。

用我自己的话来描述,我会将类描述为松散和灵活的。它们不在乎具体性。

例如,如果我们有 4 个人名字分别为:Sam、Ben、Fenya 和 Mary,我们想要将他们都作为一个目标,我们可以通过将他们都放入一个类中,并在 HTML 文档中为他们都分配相同的名称来实现。

例如,如果我们想要将上面的名字应用一个类,通过给它们在 HTML 文档中分别分配相同的类名,如 class = name。

在 CSS 中,类使用句点 (.) 符号进行定位。

看一下当您编写代码时,类和 ID 是如何在 HTML 中写入的示例。

代码语言:html复制
<div class="single-project" id="calculator"></div>   

看一下在 CSS 中如何定位 HTML 中的 ID 项目或元素。

代码语言:css复制
#calculator {
background-image: url(../images/02-portfolio-2.jpg);
}

#led-wall {
background-image: url(../images/02-portfolio-1.jpg);
}

看一下在 CSS 中如何定位 HTML 中的 Class 项目或元素。

代码语言:css复制
.single-project {
border-style: solid;
border-color: aquamarine;
}

.project-container {
background-color: aqua;
align-items: flex-start;
}

我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

0 人点赞