CSS(级联样式表)用于样式化您的网站。它提供了多种选项,使您可以更改字体,颜色,图像的大小和样式以及页面上元素的位置。

标识CSS中的元素可以通过多种方式完成。您可以影响标签的所有实例,例如段落,标题或链接。您还可以通过使用ID或类来更加具体。

所以呢’ID和类之间的区别?

使用CSS ID

假设您有一个包含页眉,导航栏,内容部分和页脚的网站。您网站的基本HTML(减去<body>标签及其外部的所有内容)可能看起来像这样:

If you wanted to style just the 标头, then you could do this:

注意#符号–这意味着我们要影响CSS ID。 #header表示我们想影响具有ID的元素“header”.

使用CSS类

如果您想要样式“bubble”框,以下代码将实现此目的:

注意期间“.” – this means that we’重新上课。 .bubble意味着我们要影响该类的所有元素“bubble”.

关键差异

尽管您可以应用相同的样式,无论您是否’重新使用ID或类,它’了解差异很重要:

  1. ID只能用于页面上的一个元素;类可以用于页面上的许多元素
  2. ID可用于选择JavaScript中的一项;该类可用于选择JavaScript中的多个项目

那里’您还可以使用元素ID进行更多操作,但是’是另一个教程的主题。

如何选择

Use an ID for elements of the design that only appear once, such as your 标头 and footer.

将类用于可能在同一页面上多次出现但元素的样式应与标准HTML标签不同的元素。因此,您可以将类用于信息框或用户头像,而不是标准文本段。

小心

如果您要更改的站点’创建时,在编辑ID和类时要非常小心。这不仅会破坏站点设计,而且更改元素的ID也会破坏功能。在将更改推送到实际环境之前,请进行更多测试,测试和测试。

摄影者 杰费萨热克