用 CSS 最困难的部分之一是处理CSS的权重值，它可以决定到底哪条规则会最终被应用，尤其是如果你想在 Bootstrap 这样的框架中覆盖其已有样式，更加显得麻烦。不过随着 CSS 层的引入，这一切都发生了变化。 这个新功能允许您创建自己的自定义 CSS 层，这是有史以来第一次确定所有 CSS 代码权重的层次结构。 在本文中，我将剖析这对您意味着什么，它是如何工作的，以及您今天如何开始使用它。

什么是层(Layers)

创建您自己的自定义图层是 CSS 的新功能，但图层从一开始就存在于 CSS 中。 CSS 中有 3 个不同的层来管理所有样式的工作方式。

浏览器（也称为用户代理）样式 - user agent style
用户样式 - User Styles
作者样式 - Author Styles

浏览器样式是应用于浏览器的默认样式。这就是为什么 Chrome 和 Safari 中的按钮看起来不同的原因。在浏览器层中找到的样式在浏览器之间是不同的，并且给每个浏览器一个独特的外观。

下一层是用户样式，这并不是您真正需要担心的事情。这些通常是用户可以编写并注入浏览器的自定义样式，但浏览器不再真正支持这些样式。用户可能会更改一些浏览器设置，这些设置会向该图层添加样式，但在大多数情况下，可以完全忽略该层。

最后，我们来到作者层。这是您最熟悉的层，因为您编写的每一段 CSS 代码都属于这一层。

这些层分开的原因是因为它可以很容易地覆盖浏览器样式和用户样式中定义的代码，因为层定义了自己的层次结构，完全忽略了权重的影响。

这 3 个 CSS 层是有序的（浏览器样式、用户样式、然后是作者样式），后面层中的每个样式都将覆盖前一层的任何样式。这意味着即使浏览器样式定义了一个超级特定的选择器，例如#button.btn.super-specific，并且您的作者样式定义了一个超级通用的选择器，例如按钮，您的作者样式仍然会覆盖浏览器样式。

这实际上已经是您可能一直在使用而没有意识到的东西。

* {
  box-sizing: border-box;
}

上面的选择器没有权重，因为 * 符号对权重没有贡献。 这意味着例如使用 p 作为选择器的 p 标签的浏览器样式在技术上比 * 选择器更具体，权重更高。 但是，这一切并不重要，因为作者样式位于比浏览器样式层晚的层中，因此您的代码将始终覆盖浏览器样式。

理解这一点至关重要，因为使用这个新的图层 API，您可以在作者图层中创建自己的图层，从而更轻松地处理特定性。

如何创建你自己的层

下面来看个例子：

很明显，这是我们正常理解的CSS， ID设置的颜色权重更高，所以按钮显示为红色。让我们使用@layer给它们加上两个层，看看是什么效果：

按钮变成蓝色。为什么会这样？

我们给两条CSS分别建立了base和utilities层，很明显，后面创建的层的样式覆盖了前面层的样式，尽管前面层的样式有更高的权重。这就是层的默认工作原理。当然层的顺序是可以指定的，

@layer utilities, base;

您需要做的就是编写@layer 关键字，后跟以逗号分隔的层列表。 这将按从左到右的顺序定义所有层，其中列出的第一层到最后一层的权重是依次增加的。 然后，您可以稍后使用普通的@layer 语法向每个层添加代码，而不必担心定义层的顺序，因为它们都在这一行中定义。 需要注意的是，这行代码必须在定义任何层之前出现，所以我通常将它作为我的 CSS 文件中的第一行。如上图，通过指定层的顺序，我们让base层应用在utilities层之后，所以按钮又显示为红色。

导入层

上面这两种方式都是导入bootstrap框架的CSS，并且把他们放在framework层中，这样你如果想要覆盖它已有的样式，只需要新建一个自己的层，放置在framework层后面就行。像下面这样。

匿名层

匿名层不常用，但它写在后面可以覆盖其他层的样式，像下面可以把按钮设为橙色。

不在层里的样式

不在层里的样式会有更高的权重，下面这个列表会让你看得更清楚覆盖是怎么发生的

层还可以重叠设置，不过很少用。具体的用法可以查阅相关文档。

浏览器支持

自从IE死了以后，所有主流浏览器都已支持这一特性。大家请放心使用。

用 CSS 最困难的部分之一是处理特异性。如果您尝试从像 Bootstrap 这样的框架覆盖样式，这一点尤其明显，但是随着 CSS 层的引入，这一切都发生了变化。这个新功能允许您创建自己的自定义 CSS 层，这是有史以来第一次确定所有 CSS 代码的特异性层次结构。在本文中，我将剖析这对您意味着什么，它是如何工作的，以及您今天如何开始使用它。

什么是图层？

创建自己的自定义图层的能力对于 CSS 来说是新功能，但图层从一开始就在 CSS 中存在。CSS 中有 3 个不同的层来管理所有样式的工作方式。

1. 浏览器（也称为用户代理）样式
2. 用户风格
3. 作者风格

浏览器样式是应用于浏览器的默认样式。这就是为什么 Chrome 和 Safari 中的按钮看起来不同的原因。在浏览器层中找到的样式在浏览器之间是不同的，并且给每个浏览器一个独特的外观。

下一层是用户样式，这并不是您真正需要担心的事情。这些通常是用户可以编写并注入浏览器的自定义样式，但浏览器不再真正支持这些样式。用户可能会更改一些浏览器设置，这些设置会向该图层添加样式，但在大多数情况下，可以完全忽略该图层。

最后，我们来到作者层。这是您最熟悉的层，因为您编写的每一段 CSS 代码都属于这一层

层叠的规则

层叠的规则是按照“样式表来源”、“选择器优先级”、“源码顺序”来考虑的，下图展示了一个判定流程：

但是页面一样复杂，组件一多，样式管理起来还是很费劲，很多时候还是得用自己不想用的一些「优先级」权重高的选择器去覆写样式，比如ID或者 !important，所以CSS新出一个 @layer 特性，能让样式得到更好的管理和控制。

如何创建自己的图层

大家用过ps的话，很好理解 @layer ，它就像ps里的图层一样，可以对ps图层进行排序，上面的图层有更高的优先级，@layer 的一个重要作用，就是可以提前定义好“级联层”的优先级：

@layer one {
  #button.super-specific-selector {
    color: red;
  }
}
@layer two {
  button {
    color: green;
  }
}

正如你在上面看到的，我们只是使用@layer关键字来创建一个自定义层，给它任何我们想要的名称 。图层two的样式会覆盖图层one的样式。one无论其特殊性如何。

1. 浏览器样式
2. 用户风格
3. 作者风格

• one
• two

如您所见，我们在作者样式中创建了两个新层，我们可以使用它们来组织我们的代码并使使用特定性更容易。

附加到图层

如何将代码添加到现有层。

@layer one {
  #button.super-specific-selector {
    color: red;
  }
}
@layer two {
  button {
    color: green;
  }
}
@layer one {
  .another-style {
    color: blue;
  }
}

在这个例子中你可以看到我已经定义one了两次图层。这完全没问题，实际上是在创建图层后向图层添加更多样式的方式。这样做不会影响层的顺序，因为层的顺序是由创建层的第一段代码决定的。这意味着我们one在 CSS 文件顶部的第一个图层实例将创建图层，因此本示例中的图层顺序与上一个示例中的相同。唯一的区别是我们能够在图层one创建后通过@layer再次使用关键字来添加额外的样式。等同如下

@layer one {
  #button.super-specific-selector {
    color: red;
  }
  .another-style {
    color: blue;
  }
}
@layer two {
  button {
    color: green;
  }
}

定义层顺序

这种在创建图层后向图层添加样式的功能在定义图层顺序时非常有用。想象一下，您有以下几层

@layer base,application;
@layer application {
    em {
        color: red;
    }
}
@layer base {
    .item em {
        color: green;
    }
}

通过@layer base,application;按从左到右的顺序定义所有层，其中列出的base是最不具体的，最后指定的层application是最具体的。也是最先生效的。然后，您可以稍后使用正常@layer语法将代码添加到每个层，而不必担心定义层的顺序，因为它们都在这一行中定义。需要注意的是，这行代码必须在定义任何层之前出现，所以我通常将它作为我的 CSS 文件中的第一行。

导入图层

很多时候，当你使用一个框架时，你可能会像这样将它导入到你的 CSS 中。

@import url("your.css");

如果要将所有这些导入的代码添加到特定层，只需添加layer(layer-name)到导入语句的末尾即可。

@import url("your.css") layer(layerName);

这会将所有样式添加your.css到layerName图层。但是，使用导入的一件事是它们的性能不是很好，因为首先您需要下载包含该@import语句的样式表，然后浏览器才能下载导入的文件。解决此问题的一种方法是在 HTML 中使用style标签。

<!-- link tag to stylesheet that define your layers -->
<link rel="stylesheet" href="styles.css">
<style>
  @import url("your.css") layer(layerName);
</style>

通过像这样编写代码，您可以避免所有性能问题，@import但仍然可以获得直接导入图层的所有好处

匿名层

匿名层指的是不声明layer名地级联层，它在级联层中的优先级，取决于layer声明次序：

@layer A {
    body {
        background-color: green;
    }
}
@layer {
    body {
        background-color: red;
    }
}
@layer B {
    body {
        background-color: bisque;
    }
}

优先级从高到低为：B > 匿名 > A，所以最后生效的body背景色为bisque。这并不是我觉得太有用的东西，但如果你真的需要将少量的 CSS 代码分成一个层，这可能会很有用。

嵌套层

我认为不太有用的另一个功能是能够将图层相互嵌套

@layer outer {
  @layer inner {
    .button {
      color: red;
    }
  }
}
@layer outer.inner {
  .another {
    color: green;
  }
}

通过使用上面的.语法或嵌套语法，您可以在其他层内创建层。这是您可能不会经常使用的东西，因为大多数应用程序只有几层，但如果您有一个非常复杂或大型样式系统，这可能会很有用。

重要的层概念

这涵盖了创建图层的基础知识，但是您需要了解一些关于图层的概念才能充分利用图层。

非分层样式更先生效

到目前为止，我们只处理了所有样式都在图层中的 CSS。当您的样式没有图层时，事情会变得有点复杂。

body {
    background-color: blue;
}
@layer A {
    body {
        background-color: red;
        color: black;
    }
}
@layer B {
    body {
        color: blue;
        background-color: green;
    }
}

在这个例子中，我们有两个个A和B图层，然后是一个没有图层的样式。当您的代码不在任何层中时，它总是被认为比分层代码更具体。这意味着我们的有一个蓝色的背景。为了使这一点更容易理解，我喜欢将不在任何层中的代码视为在所有其他层之后定义的自己的层中。

1. 浏览器样式
2. 用户风格
3. 作者风格

• A layer
• B layer
• 非分层样式

这有助于我可视化我的代码，因此我可以理解为什么非分层代码总是覆盖层内的代码。

！improtant

该!important关键字使使用特异性变得困难，并且对于图层来说也没有什么不同。该!important关键字的工作方式与普通图层完全相反。如果您使用!important关键字定义样式，它将覆盖该层之后定义的层中的任何样式。

@layer one {
  button {
    color: red !important;
  }
}
@layer two {
  button {
    color: green;
  }
}

在上面的例子中，按钮文本将是红色的，因为我们之前!important定义了颜色。但是，如果我们尝试添加!important到 layertwo以覆盖!important来自图层one，它实际上不会更改按钮颜色。

@layer one {
  button {
    color: red !important;
  }
}
@layer two {
  button {
    color: green !important;
  }
}

这样做的原因是因为它!important的工作方式与普通图层相反。由于 layerone是在 layer 之前定义的，所以 layer中的two所有!important样式one都会覆盖 layer 中的任何样式，包括!important样式two。这意味着我们的按钮仍然是红色的。

如果我再加一个没有图层!important的普通样式，按钮又是什么颜色的呢？

@layer one {
  button {
    color: red !important;
  }
}
@layer two {
  button {
    color: green !important;
  }
}
button{
    color: blue !important;
}

根据非分层样式更先生效，那自然按钮会是蓝色的。

浏览器支持

对于每一个很酷的 CSS 功能，你总是需要考虑浏览器的支持，但幸运的是，对我们来说，图层得到了很好的支持，并且很快就会得到完美的支持。目前，layer有84.31% 的支持率，但这主要是因为这个功能最近才在最新版本的浏览器中推出。大多数现代浏览器在撰写本文时不到一个月前就推出了此功能，这意味着我们目前只是在等待用户将他们的浏览器更新到最新版本以支持此功能。

结论

总之，@layer 还是蛮好用的，希望能尽快在业务代码里面用到吧。

.标签语义化

提到标签，很多刚入门前端开发的人，肯定都会很纳闷，这么多HTML标签我如何记住呢？我又应该根据什么依据去正确使用它呢？其实这样的问题，我刚开始和大家一样苦闷，但是在我学习Web页面开发的过程中，然后不断的积累，不断的总结，发现要想记住HTML标签以及怎样更好的去使用这些标签，需要做到以下三点：

第一点：不要死记硬背，没意义，只需要记住常用的哪几个足矣。

第二点：根据内容选择使用HTML标签，什么意思呢？见下文分解。

第三点：遵循W3C的规范。

首先，第一点咱们就不用说，不让死记硬背，就是要多写页面，多敲代码，久而久之孰能生巧，巧能生花，慢慢的你就能记住这些标签了，而且在开发页面的过程中，你们会发现，咱们最常用的也就是那么几个而已。

其次，第二点根据内容选择使用HTML标签，这一点非常关键，因为你掌握了这一点，你能很好地去使用HTML标签，并且能让页面变得很优质，这也会提高你网页被搜索引擎收录。

最后，也就是第三点，这一点自然不用怀疑，如果要想让页面更好的在不同的浏览器中呈现出一致的效果，那么必须遵循W3C的规范。

说了这么多，只是一些学习需要注意的问题，下面才是真正解开怎样去使用和记住标签这个谜团的方法。

我们在使用标签的过程中，大家会发现类似的标签，比如标题标签（h1-h6）、p（段落标签）、a（超链接标签）以及图片标签（img）等，通过这些标签的名称，咱们是不是不难理解吧，很直观的就知道这些标签该怎么，用于何处。而这些名称的含义就是我们所说的标签语义化。随着智能手机的出来，移动Web都是通过H5去开发页面，而H5中的HTML标签就比之前版本的HTML标签更加具有语义化。

那么什么是标签语义化呢？所谓的标签语义化，指的就是标签所代表的含义。咱们可以通过标签的含义，正确地去使用它。

标签语义化的作用：

• 通过使用语义化标签，更能精准地将其把内容呈现出来。
• 通过使用语义化标签，让页面结构更加的清晰，方便代码的阅读和维护。
• 能让浏览器或网络爬虫更好地解析，从而更好地分析和抓取网页中的内容。
• 使用语义化标签还能让搜索引擎得到更好的优化。

如下图所示，通过使用语义化标签和没使用任何标签，就能直观感受到语义化标签的好处。

那么如何去判断一个页面中，语义化是否良好呢？很简单，直接扒掉CSS这层漂亮的衣服，当我们把CSS去掉后，如果页面中的结构依然组织有序，并且有良好的可读性，那么它就是非常良好的。

如何去使用这些标签呢？首先根据内容确定语义化的标签，其次再根据呈现需求，使用CSS样式。因此HTML标签并非通过死记硬背，而是通过在使用的过程中，利用HTML标签的语义化去记忆。如下图所示，通过使用语义化标签，瞬间就能把普通的文本，以更清晰的结构呈现出来。

2.常用标签分类汇总

通常我们常见的标签有标题标签、段落标签、水平线标签、换行标签以及div和span标签，这些标签又被统称为排版标签。

在开发中，排版标签主要是和CSS搭配使用，主要是用于显示网页的整体结构，也是网页布局中常用的标签。下面我一一了解一下。

排版标签：

【1】标题标签（h1-h6）

• 缩写来源：标题标签的英文单词是head，因此它使用它的缩写h来表示。
• 语义：标题标签主要是用于突显标题内容，它是h1-h6（分为1级标题、2级标题、3级标题......6级标题），级别依次递减。级别越小，标题就会越小。
• 语法格式如下：

呈现的效果如下：

一句话总结：使用了标题标签的文字会加粗，会根据级别显示文字的大小，并且一行只能放一个标题。

【2】段落标签（p）

• 缩写来源：p标签的英文单词是paragraph，表示段落的意思。
• 语义：p标签可以把html文档分割为若干段落。在网页中要想把文字以段落的形式呈现，并且有条不紊的，那么段落就是必备的标签。
• 语法格式如下：

【3】水平线标签（hr）

• 缩写来源：hr的英文单词是horizontal，表示横线的意思。
• 语义：它表示分隔线，用于将文字内容分隔开，让文档结构看起来更加清晰，层次分明。当然在网页中除了使用分隔线（hr）标签来实现，还可以通过图片插入以及CSS样式来实现，只不过使用hr标签是最简单的方式。提示：CSS样式是页面中的重点，此处主要是介绍HTML，因此暂不做详细说明。
• 语法格式：<hr />。
• 标签特点：它是一个单标签，hr标签默认是以水平线的样式进行显示。

【4】换行标签（br）

• 缩写来源：br的英文单词是break，打断、换行的意思。
• 语义：表示换行的意思。在html中，一个段落的文字会从左到右依次排列显示，直到浏览器窗口的最右端，才会自动换行。如果我们在实际开发中碰到需要将文本内容强制换行显示的，此时就可以使用换行标签实现。
• 语法格式：<br />。
• 标签特点：它也是一个单标签。
• 示例：将以下内容通过br标签强制换行

呈现效果：

【5】div和span标签

• 缩写来源：div的英文是division，表示分割、分区的意思。span没有缩写，表示跨度、跨距和范围的意思。
• 语义：div和span标签，没有任何语言，主要是用于网页布局使用。
• 语法格式：<div>这是一个div盒子</div> <span>这是一个span盒子</span>
• div和span的区别：div标签，主要是用于布局，在没有使用其它干预的情况下，一行只能放一个div。而span标签，也是用来布局，在没有任何其它的干预的情况下，一行上可以放很多span标签。此处的效果，大家可以根据语法，自行在实现查看一下对比效果。

最后给大家来一个完美的总结：

难道这就完了吗？咱们的标签就只有这些常用的吗？那当然不是，咱们接下来再看我们的文本格式化标签。

文本格式化标签

文本格式化标签的作用：通常文本格式化标签主要用于网页中文字样式的设置，比如字体加粗、斜体或下划线等效果，当然后期也会通过CSS样式来实现，会更加完美。

常见的文本格式化标签如下：

它们分别的区别：

• b和strong：b标签只是加粗，strong除了加粗，还具有强调的意思，更具语义化。
• i和em：i只是让文本显示斜体的效果，而em在斜体的效果上加强了语义。
• s和del：s只是让文本显示删除线，而得了不仅显示删除线，还加强了语义。
• u和ins：u只是添加了下划线，而ins不仅显示了下划线，还加强了语义。

我么网页中除了排版标签、文本格式化标签，当然还少不了图片标签（img），通过图片的展示，会让整个页面更加的生动形象。那么下面再来看一下这个标签吧。

图片标签（img）

• 缩写来源：img的英文单词是image，表示图像、影像的意思。
• 语义：用于显示图片内容。
• 语法格式：<img src='图像url' />，在这个的语法中，我们发现img标签使用了src属性，这个属性主要是用于指定图像的文件路径，也是img的必须属性。
• img标签常见属性如下所示：

• 标签特点：img标签主要是用于在网页中插入图像，它是一个单标签。
• 知识点扩展：通过img标签，我们会发现，html标签除了自身外，它们还具有一些属性，这些属性，我们称为标签属性，通过标签属性可以设置标签的一些外在特性。标签属性的基本语法格式：<标签名 属性1="值1" 属性2="值2" ...>内容 </标签名>。

标签属性的特点：

• 一个标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
• 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
• 任何标签的属性都有默认值，省略该属性则使用默认值。
• 标签的属性采用的是键值对的格式key="value"的形式。

链接标签

• 缩写来源：a标签的英文单词是anchor，表示锚、铁锚的意思。
• 语义：表示超文本链接。
• 语法格式：<a href ="跳转目标" target="目标窗口的弹出方式">文本或图像</a>。
• 常见的属性：

提示：

• 比如添加作为外部链接，需要添加外部地址。
• 内部链接，就是页面直接内部相互链接，因此只需要使用名称即可，比如

• 如果没有确定链接目标，通常使用"#"表示暂时空链接。
• 除了可以创建文本链接，还可以给网页中的元素，如图像、表格、音频、视频都可以添加超链接。

注释标签

• 注释标签：用于在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的文字说明，此时就需要使用注释标签。它是HTML中的一种特殊标签，它不会在浏览器中显示，但是会在源代码中查看到。
• 语法格式：

• 提示：注释通常是给咱们开发者看的，程序是不会执行这个代码的。

好了，各位小伙伴，今天我就给大家分享到这儿了，希望我给大家总结的内容，能帮到正在浏览我这篇内容的前端开发者，也希望你们有所收获。如果喜欢的，可以点击关注，会继续给大家分享更多的内容。