者：vivo 互联网前端团队 - Zhang Jiqi

本文主要讲述了CSS中的级联层（CSS@layer），讨论了级联以及级联层的创建、嵌套、排序和浏览器支持情况。级联层可以用于避免样式冲突，提高代码可读性和可维护性。

一、什么是级联层(Cascade Layers)？

1.1 级联层的官方定义

我们参看Cascading and Inheritance Level 5（13 January 2022） 中6.4节所述：

级联层提供了一种结构化的方式来组织和平衡单个起源中的问题。单个级联层内的规则级联在一起，不与层外的样式规则交错。

开发者可以创建层来表现元素默认值、第三方库、主题、组件、覆盖和其他样式问题，并且能够以显式方式重新排序层级，而无需更改每个层内的选择器或特异性，或依赖源顺序来解决跨层的冲突。

单纯看官方定义和概括可能比较晦涩，下面我们会结合案例来说清楚。

1.2 级联层为了解决什么问题？

简而言之：级联层的出现就是为了使 CSS 开发者可以更简单直接地控制级联。

我们来假设日常开发中的一个场景，从场景去理解级联层在解决什么问题。

如下图：

我们原来的'display'文案是红色，当我们引入了一个第三方组件库，第三方库中有以下样式。

/* 开发者样式 */
  .item {
    color: red;
  }
 
/* 第三方库 */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }

就会导致'display'文案变成绿色。

我们想要将'display'文案的颜色由绿色改成红色一般的手段是增加选择器特异性（优先级）。比如在开发页面中对开发者样式进行修改：

 /* 开发者样式 */
  #app div.item {
    color: red;
  }
 /* 第三方库 */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }

或者借助级联中出场顺序对优先级的影响在用户页面中重写

 /* 第三方库 */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
 /* 开发者样式 */
  #app .item {
    color: red;
  }

效果如下：

再举个例子：

比如有可能第三方组件写了

a { color: blue; }

那项目开发中由于引入这个第三方组件 就会导致样式污染，因为第三方库的样式往往都在项目设置的通用样式比如common.css后加载。

如果后面想在代码中覆盖某些属性，使用高特异性选择器的语句就可能会导致问题。然后因为有问题就会选择更高特异性的择器的语句或使用!important，这会使代码变得冗长也可能会带来副作用。低特异性选择器的语句很容易被后面出现在代码中的语句覆盖。在自己的代码之后加载第三方 CSS 时特别会出现这种问题。

所以级联层就是为了解决以上场景出现的，级联层在级联中的的位置是在内联样式和选择器特异性之间。当有些css声明就是设置要低优先级且不受选择器特异性影响那么使用级联层再合适不过。

运用级联层解决第一个日常开发场景痛点的css代码如下：

/* 排序层 */
@layer reset, lib;
/* 通用样式 */
@layer reset {
  #app .item {
    color: black;
    width: 100px;
    padding: 1em;
  }
}
/* 第三方库样式 */
/*我们将第三方库的样式全部放到lib层*/
/*这里一般使用@import导入的方式*/
/*为了示例简单我们简化了操作*/


@layer lib {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    width: 130px;
  }
}
/* 开发者样式 */
.item {
  color: red;
}

为了知道为什么上面的css代码能解决冲突问题，更好地理解级联层的作用，理解一些现象背后的根因，了解级联层和级联的关系，我们继续往下看。

二、理解级联层的前提——级联(cascade)

2.1 什么是级联？

CSS中有两个重要的基础规则，一个是继承，一个是级联。

继承

指的是类似 color，font-family，font-size，line-height 等属性父元素设置后，子元素会继承的特性。

级联

可以简单理解为是CSS 用来解决要应用于元素的具体样式的算法。也就是基于一些优先级排序输出给给定元素上属性值一个级联值。级联值是级联的结果。

2.2 当前级联的排序标准

我们参看Cascading and Inheritance Level 5（13 January 2022） 中6.1节，

相比于Cascading and Inheritance Level 4（14 January 2016） 中的定义有明显变化。

最重要的变化就是增加了级联层。由此级联排序变成：

1. 起源和重要性（Origin and Importance）
2. 上下文（Context）
3. 样式属性（Element-Attached Styles）
4. 层（Layers）
5. 特异性（Specificity）
6. 出场顺序（又名源代码顺序）（Order of Appearance）

浏览器在确定最终元素样式呈现的时候，会依据这些准则按照优先权从高到低排序，并且会一个一个的检查，直到确定最终样式。

2.3 级联起源（Cascading Origins）

2.3.1 三个核心起源

css中每个样式规则有三个核心起源，它决定了它进入级联的位置，理解起源优先级是理解级联的关键。

• 用户代理来源（浏览器内置样式）
• 用户来源（浏览器的用户设置 ）
• 作者来源（Web开发者）

2.3.2 起源的优先级

Css声明的起源取决于它来自哪里，重要性在于它是否用!important声明。

各种起源的优先级按降序排列：

1. 过渡
2. 重要的用户代理
3. 重要用户
4. 重要作者
5. 动画
6. 普通作者
7. 普通用户
8. 普通用户代理

越靠前来源的声明优先级越高。过渡和动画我们可以暂时忽略。

2.4 熟悉又陌生的 !important

通常作为开发者，!important会被我们视为一种增加特异性的方法，用以覆盖内联样式或特异性较高的选择器。

但是!important设计出来的初衷是作为整体级联中的一个特性，来平衡开发者、用户设置和浏览器内置之间对css优先级的影响能力。

默认情况下三者的优先级是：作者来源> 用户来源>用户代理来源（可以参看上文起源优先级中6-8的排序）。但是当css声明添加!important之后会使它们的优先顺序颠倒（参看上文起源优先级中2-4的排序）。

如果站在浏览器和用户的角度看!important提供了在必要时重获优先级控制权的能力，而非只是简单的增加特异性。

举个例子：

浏览器默认样式表包含我们开发者无法覆盖的重要样式。

浏览器对具有'hidden'类型的input输入框设置了默认的展示属性并且将其声明为重要。

input[type=hidden i] { display: none !important; }

看下面两张图例：

第一张可以看出我们对具有'hidden'类型的input输入框的展示属性设置成了显示并且声明为重要

第二张是样式最终计算结果：隐藏

从上面的浏览器表现可以看到我们作为开发者在作者样式表中设置的规则没能覆盖用户代理样式表中的相同规则。

这验证了上面说的：在级联中!important会颠倒三大核心起源默认优先顺序。

验证的过程中还发现了一个chrome控制台这边的bug，看上面的第一张图例：没生效的规则不划删除线，生效的反而划删除线了。

再看一个官方文档的例子加强一下理解：

图片来源：w3.org

font-size的值最终是‘12pt ’。

因为作者样式表中添加!important的规则优先权高于用户样式表中普通规则。

text-indent的值最终是‘1em’。

因为虽然两个样式表都标注了!important，但是标注!important用户声明优先级大于标注!important作者声明。

2.5 一张图带你理解级联

下图可以帮助我们直观的理解级联以及级联层在级联中的位置：

图片来源：css-tricks

我们会发现平时操作最多的选择器特异性（selector specificity）只是级联中的一小部分。也轻松地理解了为什么内联样式优先级天然高。同时我们会发现!important在级联中有特殊地位。他穿插在级联规则的各个阶段并能颠倒优先级。

三、级联层(CSS@layer) 使用探索

3.1 @layer 是什么？

我们来看MDN上的定义：

The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.

也就是说 @layer 这个at-rule（AT规则） 用于声明级联层（cascade layer），也能用于定义多个级联层的优先级。

At-rules 是什么？

At-rules是指导 CSS 如何表现的CSS 语句。它们以 at 符号 ' @' ( U+0040 COMMERCIAL AT) 开头，后跟一个标识符，包括下一个分号 ' ;' ( U+003B SEMICOLON) 或下一个CSS 块之前的所有内容。

我们开发常见的at-rule有@charset、@media、@font-face 、@keyframes 等。

3.2 @layer的句法规则

@layer的句法如下：

@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}

3.3 如何创建级联层

可以通过多种方式创建级联层。

第一种方法是：创建命名的级联层，其中包含该层的 CSS 规则，如下所示：

@layer green {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}
 
@layer special {
  .item {
    color: rebeccapurple;
  }
}

第二种方法是：创建一个命名的级联层而不分配任何样式。这可以是单层，如下所示：

@layer green;

可以一次定义多个层，如下：

@layer green, special

一次定义多个层有什么好处呢？

因为声明层的初始顺序决定了层的优先级。与声明一样，如果在多个层中找到声明，最后定义的层声明将最终生效。看下面代码：

@layer green,special;
 
@layer green {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}
@layer special {
  .item {
    color: rebeccapurple;
  }
}

效果如下图：

special层中item样式规则将被应用即使它的特异性低于 green层中的规则。这是因为一旦层顺序定义完成，就会忽略选择器特异性。

同样也会忽略出现的顺序：

我们声明层名称并设置它们的顺序后，可以通过重新声明名称来将 CSS 规则添加到图层。然后将样式附加到层，并且层顺序不会更改。比如如下代码虽然@layer green重新声明了并在文件后方但是由于顺序一开始已经设置所以字体颜色还是紫色：

@layer green,special;
 
@layer special {
  .item {
    color: rebeccapurple;
  }
}
 
@layer green {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}

效果如下：

忽略选择器特异性和代码出现顺序可以让我们创建更简单的 CSS 选择器，并使代码优雅，因为不必确保选择器具有足够高的特异性来覆盖其他css规则，只需要确保它出现在后面的层中。

第三种方法是：创建一个没有名称的级联层。例如：

@layer {
  .item {
    color: black;
  }
}

这将创建一个匿名级联层，该层功能与命名层相同。但是使用匿名层有如下缺点:

1. 可读性较差：匿名层没有名称，会导致样式表不易阅读和理解。特别是在大型项目中，可能会出现样式不断增加，难以跟踪和管理的问题。
2. 难以扩展：如果稍后想要更改特定样式或组合，也会很难找到特定的代码块。
3. 不可复用性：匿名层中的样式不能在其他地方重复使用或引用。这样会使样式表更难以管理和维护。

平时我们尽量避免使用匿名层。但当我们是样式库的作者，并想将某些css代码不被使用者修改可以借助匿名层做到这一点。

第四种方法是：使用@import。CSS 原生支持 @import 导入其他 CSS 文件。

@import url(index.css) layer(index);

同时，也支持匿名引入，例如：

@import url(index.css) layer;

我们在使用@import时候需要放在除@charset之外的样式规则前，否则无法导入。

可能的第五种方式仍在讨论中：通过元素上的属性。请参阅[css-cascade] Provide an attribute for assigning ato a cascade layer #5853。

3.4 层的嵌套规则

图层可以嵌套。例如：

@layer base {
  p { max-width: 70ch; }
}
 
@layer framework {
  @layer base {
    p { margin-block: 0.75em; }
  }
 
  @layer theme {
    p { color: #222; }
  }
}

生成的层可以表示为一棵树：

1.base

• framework
• base

2.theme

或可以用扁平列表表示

1. base
2. framework.base
3. framework.theme

要将样式附加到嵌套层，您需要使用以下全名来引用它：

@layer framework {
  @layer default {
     p { margin-block: 0.75em; }
  }
 
  @layer theme {
    p { color: #222; }
  }
}
 
@layer framework.theme {
  /* 这些样式会被添加到framework层里面的theme层 */
  blockquote { color: rebeccapurple; }
}

看效果：

3.5 层的排序规则

级联层按照它们声明的顺序排序。第一层优先级最低，最后一层优先级最高。但是，未分层的样式具有最高优先级：

/* 未分层 */a { color: green; }
@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 { a { color: yellow; } }

优先级顺序如下：

1. 未分层样式
2. layer-3
3. layer-2
4. layer-1

看下图示例：

层可以在一个地方被定义图层（以建立图层顺序），然后在任何地方添加样式

/* 定义在一个地方 */
@layer my-layer;
/* 其他样式*/
...
/* 在某个地方添加样式 */
@layer my-layer { a { color: red; } }

3.6 加上!important之后的排序规则

/* 未分层 */ a { color: green !important; }
@layer layer-1 { a { color: red !important; } }
@layer layer-2 { a { color: orange !important; } }
@layer layer-3 { a { color: yellow !important; } }

任何加上重要声明的样式都以相反的顺序应用

优先级顺序如下：

1. !important layer-1
2. !important layer-2
3. !important layer-3
4. !important 未分层样式

看下图示例：

这里我们看到对应规则在chrome浏览器的显示是正确的。但是在开发者控制台中的样式一栏规则显示有问题。应该是chrome浏览器开发者控制台的bug。

3.7 嵌套层的排序规则

@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 {
  @layer sub-layer-1 { a { color: yellow; } }
  @layer sub-layer-2 { a { color: green; } }
  /* 未嵌套 */ a { color: blue; }
}
/* 未分层 样式 */ a { color: black; }

优先级顺序如下：

1. 未分层 样式
2. layer-3
3. -layer-3 未嵌套
4. -layer-3 sub-layer-2
5. -layer-3 sub-layer-1
6. layer-2
7. layer-1

3.8 媒体查询对层排序的影响

以下层顺序将取决于匹配的媒体条件：

例如：

@media (min-width: 600px) {
   @layer layout {
     .item {
       font-size: x-large;
     }
   }
 }
 
@media (prefers-color-scheme: dark) {
  @layer theme {
     .item {
        color: red;
     }
   }
}

如果两个媒体查询的规则中匹配一个那么对应的级联层生效。如果两者都匹配，那么图层顺序将为layout, theme都生效。如果两个都不匹配则不定义层。下图是两者都匹配的场景。

四、现在就能使用级联层吗？

4.1 目前浏览器支持程度

图片来源：developer.mozilla.org

目前所有现代浏览器均已经支持 @layer 规则。所有浏览器厂商都支持的特性未来一定比较实用。

4.2 W3C 鼓励可以作为日常使用

SS 的标准化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C层叠样式列表小组以及独立CSS专家组成。W3C 本身并不制定标准，而是作为一个论坛式的平台，接收来自小组成员的提交，并通过会议来商讨制定标准，所有的提交以及讨论都是公开透明的，可以在 W3C 网站上看到会议的记录，可以简单分为4个大阶段：

• 工作草案( WD )
• 候选人推荐( CR )
• 提议的建议( PR )
• W3C 推荐( REC )

下图可以帮助理解：

图片来源：w3.org

W3C 通过状态码表示规范的成熟度。成熟度从低到高排序如下图。

图片来源：w3.org

再看下图：包含layer概念的标准讨论已经到达CR阶段。

图片来源：w3.org

W3C 鼓励从 CR阶段的标准 开始可以作为日常使用。

五、总结

最后，我们回到通过级联层如何解决“引入了一个第三方组件库导致样式覆盖“的问题上。

css代码如下：

/* 排序层 */
@layer reset, lib;
/* 通用样式 */
@layer reset {
  #app .item {
    color: black;
    width: 100px;
    padding: 1em;
  }
}
/* 第三方库样式 */
/*我们将第三方库的样式全部放到lib层，这里一般使用@import导入的方式，为了示例简单我们简化了操作*/
@layer lib {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    width: 130px;
  }
}
/* 开发者样式 */
.item {
  color: red;
}

我们将第三方库的样式全部放到lib层，将需要重置的一些样式放到reset层，自己开发的样式不放入层中（当然你也可以放入到一层然后排序在最后）。由此我们实现了样式的分层解决了第三方组件库导致样式覆盖的问题，而且做到开发者样式简单不冗长。

效果如下：

级联层（CSS@layer）已经历概念提出到到浏览器全面支持的阶段。也许在不久的将来大家都会普遍使用它，期望本文能给大家带来一定帮助。

参考资料：

1. CSS Cascading and Inheritance Level 5
2. A Complete Guide to CSS Cascade Layers
3. The Future of CSS: Cascade Layers (CSS @layer)
4. CSS必学基础：理解CSS中的级联规则
5. 详解日后定会大规模使用的CSS @layer 规则
6. W3C Process Document
7. Cascade Layers Explainer

作者:Zhang Jiqi

来源:微信公众号:vivo互联网技术

出处:https://mp.weixin.qq.com/s/4M-RvnTq8rJuKDC3VZOONQ

网百科全书-使用 HTML，CSS，JS， jQuery，php，mySQL 建立网站，克隆eBay，AirPods，YouTube，Tesla网页

通过我们推荐的参考学习书籍你将会学到的职场竞争能力：

• 能使用HTML来编写网页上各种各样的对象或者元素
• 能够使用指定不同的元素或者对象用CSS或CSS3去美化他们，让网站看起来更光彩夺目！
• 能使用Javascript，jQuery去制作具有各种功能的网页程序或互动效果
• 能使用Bootstrap的框架去制作美观，复杂的网页程序，并适应不同的设备，包括各种平板和手机等
• 能使用Wordpress无需编写任何一段代码去构建自己的网上商店或论坛
• 能使用PHP和mySQL去编写功能强大的服务器端程序，响应用户的请求，实现服务器端与客户端的互动！

通过这些参考学习书籍的学习，我们将会会学习10种语言和工具，包括HTML， HTML5， CSS， CSS3， JavaScript， jQuery， jQueryUI， Bootstrap， Wordpress， PHP， MySQL， etc。 我们可以从零基础开始，建立多个网站实例，其中包括eBay，YouTube，AirPods，Tesla等网页。 我们将历经一场非常有趣，又具有挑战性的旅程，让我们一起从零到专业学习建立属于自己的网站。

使用 HTML，CSS，JS， jQuery，php，mySQL建立网站的推荐的参考学习书籍

下面列出的参考学习书籍可以帮助任何没有程序开发经验的人更轻松地学习与IT相关的语言和工具。

这些学习书籍中有许多实际的例子以及一些比较完整的操作示例，帮助学生在短时间内全面地理解整个学科的知识，同时让新知识应用到实际的操作和工作中。

《学习编码：学习HTML，CSS和JavaScript，并构建网站，应用程序和游戏》

学习编码 - 使用 HTML、CSS 和 JavaScript 构建网站、应用和游戏。

你准备好开始你的程序员之旅了吗？坐下来，把自己绑起来，为美妙的学习体验做好准备。本书将带您完成易于遵循的分步课程，并为您提供编写第一个程序所需的所有指导，制作一个有用的网站，让您快速访问所有您喜欢的在线地方，制作一个测验应用程序，巧妙地适合您的手机，最后制作一个成熟的基于体系的平台游戏。一流！

本书旨在让您能够编写所有内容以在浏览器中运行，并在PC或Mac上本地编程。事实上，根据设计，HTML，CSS和JavaScript可以在任何浏览器中运行，并在几乎任何文本编辑器中编码。
那你还等什么？
你需要什么？
您需要的一切都可以在Windows和Mac上免费获得。 更好的是，您需要的是内置的。

书中的每个练习都为您准备下一个练习，随着您的进步教您新技能。你不需要以前的经验，因为一切都被分解和彻底解释。此外，您可以从支持网站下载所需的所有代码、图像、背景图像、精灵、音效、音乐和任何其他元素。您需要的所有细节在每次练习中都贯穿全书。
最重要的是，如果你想学习编码，这本书将为您提供很棒的工具，让你快速编码！

《学习足够的 HTML、CSS 和布局来变得专业：现代网站创建和模板系统简介》

这本书有您所需要知道的一切，没有您不知道的，开始创建和部署网站；

要设计、构建和部署现代网站，您需要三项核心技能：编写和编辑 HTML 的能力，使用 CSS 控制页面设计的能力，以及创建为用户提供良好服务的高效 Web 布局。但是你不需要学习关于HTML，CSS和网页布局的“一切”，只需要如何有效地使用它们来解决实际问题。在《学习足够的HTML、CSS和布局到专业》一书中，专家开发人员Lee Donahoe和著名讲师Michael Hartl教授完成工作所需的特定概念、技能和方法。
即使您从未创建过网页，作者也会帮助您快速建立技术复杂性并掌握成功所需的知识。专注的练习可以帮助您内化重要的事情，而不会将时间浪费在专业人士不关心的细节上。很快，你就会像生来就知道这些东西一样——你会突然变得非常专业。
通过本书学习了解足够多的信息。 。 。

• 立即将简单但真实的网站部署到实时的Web中
• 向网站添加高级样式，包括 CSS Flexbox 和 CSS Grid
• 安装和配置 Jekyll，一个静态站点生成器
• 模板系统和编程语言入门
• 掌握网页设计的关键布局原则
• 使用自定义 URL 和电子邮件地址注册和配置自定义域
• 通过 Google 的 G Suite 在您的网域中接收电子邮件
• 设置分析以更好地了解您网站的访问者
• 使所有这些技术很好地协同工作

Michael Hartl的“Learn Enough”系列包括书籍和视频课程，这些课程侧重于每个主题中最重要的部分，因此您不必学习所有内容即可开始 - 您只需要学习足够的知识即可成为专业并自己解决技术问题。

《使用 HTML5 和 CSS 进行响应式网页设计：使用最新的 HTML5 和 CSS 技术构建面向未来的响应式网站，第 4 版》

利用 HTML5 和 CSS 的最新功能，创建可在手机、平板电脑和台式机上完美运行的单一 UI，以及介于两者之间的所有内容 - 现在具有彩色图像！

本书的主要特点

• 了解什么是响应式网页设计及其对现代网页开发的重要性
• 探索响应式网页设计和CSS的最新发展，包括网格和子网格的布局，CSS级联层，广色域颜色和CSS函数
• 掌握新 HTML 元素和属性的用途和优势

本书的内容简介

《Responsive Web Design with HTML5 and CSS， Fourth Edition》是关于响应式网页设计的最新HTML5和CSS技术的最全面和最畅销的书籍之一的完全改进和扩展版本。它强调实用的应用，教你构建大多数现实生活网站所需的方法，每章都有可下载应用的示例。

本版本书籍以作者友好且易于遵循的风格编写，涵盖了响应式网页设计的所有最新发展和改进，包括更好的可访问性、可变字体和字体加载的方法，以及最新的颜色处理工具进入浏览器。您可以享受前沿功能的覆盖范围，例如 CSS 层、容器查询、嵌套和子网格。

本书最后探讨了作者对前端开发的一些独家技巧和方法。

在本书结束时，您不仅会全面了解响应式网页设计以及最新的HTML5和CSS的可能性，而且还会了解如何最好地实现每种技术。作为完整指南通读，或作为每个主题重点章节的参考。

你将学到什么

• 使用媒体查询，包括检测触摸/鼠标和颜色首选项
• 学习 HTML 语义和创作可访问标记
• 根据屏幕尺寸或分辨率促进不同的图像
• 编写最新的颜色函数，混合颜色，并选择最容易访问的颜色
• 在设计中使用 SVG 提供与分辨率无关的图像
• 创建和使用 CSS 自定义属性，利用新的 CSS 函数，包括“clamp”、“min”和“max”
• 向 HTML 表单添加验证和界面元素
• 使用滤镜、阴影和动画增强界面元素

这本书是为谁写的

您是需要提高前端技能的全栈或后端开发人员吗？也许您在前端工作，并且需要对所有现代HTML和CSS提供的明确概述？也许你已经做了一些网站建设，但你需要深入了解响应式网页设计以及如何实现它们？那么这就是给你的书！要利用本书，你需要的只是对HTML和CSS的工作理解。不需要JavaScript知识。

本书的目录

1. 响应式网页设计的基本要素
2. 编写 HTML 标记
3. 媒体查询和容器查询
4. 流体布局和弹性框
5. 使用 CSS 网格布局
6. CSS 选择器、排版等
7. CSS 颜色
8. CSS的惊人美学
9. 响应式图像
10. .SVG
11. 过渡、变换和动画
12. 自定义属性和 CSS 函数
13. 形式
14. 尖端的 CSS 功能
15. Bonus 技术和Parting 建议

《响应式网页设计与HTML 5和CSS》

Minnick的《RESPONSIVE WEB DESIGN WITH HTML 5和CSS，第9版》为您提供最新的工具，逐步教您如何设计专业质量的网站来吸引和留住客户。这本书籍包含专业人士的最佳实践和提示，为您提供了 HTML、CSS 和响应式网页设计的坚实基础。它向您展示如何创建一个自动适应手机、平板电脑、笔记本电脑和台式机设备以及大型显示器的网站。您将学习如何编写网页代码以从移动设备拨打电话、嵌入地图、使用自定义字体、创建快捷导航菜单、集成社交媒体以促进业务等。此外，您将使用流行的Web框架Bootstrap来创建网页。

《学习网页设计 - HTML5：实用手册》

这本电子书是通过练习HTML来学习网页设计的实用指南。

• 它涵盖了从基础到高级的 HTML。
• 它是关于做什么和如何做的详细指南。
• 在练习HTML的过程中，您将被指导如何使用HTML元素构建网页。提供了示例网页布局根据布局，您将被教导逐步设计网页。提供代码片段用于实践目的。还提供了代码片段的输出以供参考。通过代码片段进行练习将为您提供丰富的实践经验
• 首先，您将学习为桌面设计网页
• 然后，您将学习如何对已经设计的网页实现响应功能。

当您完成这本电子书的学习时，您将掌握HTML和网页设计技术！
这是自学材料！

任何有兴趣学习HTML和网页设计的人都可以阅读这本电子书。

快乐学习、快乐编码！

《使用HTML5和CSS3进行网站设计和开发》

结合理论和实践，《HTML5和CSS3的网站设计和开发》既针对想要设计第一个网站的初学者，也针对想要巩固其技术技能的经验丰富的开发人员。

本书讨论了HTML5和CSS3的理论方面，包括：HTML元素，语义容器，语义文本格式，多媒体元素，表单，表格，CSS样式的定义和集成，文本格式以及容器和框样式。本书还包括一个实用部分，介绍了创建网站的过程，以及应用的关键规则，以便不仅实现项目成功，而且满足用户需求。

本书通过大量示例说明，包括更正的实际工作，根据从简单的HTML5页面设计到创建专业网站的进化逻辑进行结构化。

《jQuery食谱：找到所有jQuery问题的现成解决方案》

快速发现常见问题的解决方案、您可以遵循的最佳实践以及 jQuery 提供的所有功能。本书使用问题解决方案，从开发人员在使用jQuery时通常面临的小的初始问题开始，然后逐渐深入探索更复杂的问题。解决方案包括插图和清晰、简洁的代码说明。

您将学习有效地遍历和操作 DOM，了解如何使用数组、迭代、事件模型以及实现动画和视觉效果。您将探索如何使用插件和 CSS。使用本书和jQuery，您的网站将更加动态和生动。这个完全更新的第二版教你现代jQuery技术，包括如何遍历和操作DOM，理解事件模型，实现动画和使用滑动效果。

《jQuery Recipes，第二版》向您展示了如何避免浪费开发时间并解决您可能面临的问题。这是一个宝贵的参考学习书籍，可以在你进行jQuery开发时留在你身边。立即开始使用《 jQuery Rerecies 》这本书，使你成为 jQuery 专业人士。

通过本书你将学到什么

• 了解 jQuery 的基础知识以及该库的工作原理
• 了解如何遍历和操作 DOM 以满足您自己的需求
• 探索 jQuery UI 技术，包括手风琴、对话框、滑块、日期选择器和自动完成
• 使用流行的插件和CSS来自定义和定制您的开发

本书适合谁学习：
这本书非常适合希望学习 jQuery 并在开发过程中拥有方便的 jQuery 参考的新手或中级开发人员。

《学习PHP，MySQL和JavaScript：使用jQuery，CSS和HTML5》

使用开源技术和 Web 标准的强大组合构建交互式数据驱动型网站，即使您只有基本的 HTML 知识。通过这个流行的实践指南，您将在当今的核心技术的帮助下处理动态Web编程：PHP，MySQL，JavaScript，CSS，HTML5和现成函数的jQuery库，以显着增强您的项目。

您不仅可以快速了解这些各种技术的最新更新，包括增强的MySQL和PHP安全功能，还可以学习如何优化您的网站以在手机和平板电脑上使用。

分别探索每种技术，学习如何将它们一起使用，并在此过程中学习有价值的 Web 编程实践。在本书的最后，您将把所有内容放在一起，使用AMPPS或任何其他流行的开发堆栈来构建一个适用于桌面和移动浏览器的全功能社交网站。您将深入学习PHP，以及面向对象编程的基础知识。

• 探索 MySQL，从数据库结构到复杂查询
• 使用 MySQLi 扩展，PHP 改进的 MySQL 接口
• 创建动态的PHP网页，为用户量身定制自己的网站
• 管理 Cookie 和会话，并保持高级别的安全性
• 掌握JavaScript语言并使用jQuery和jQuery移动库对其进行增强
• 使用 Ajax 调用进行后台浏览器服务器通信
• 获得CSS2和CSS3技能，以专业地设计您的网页样式
• 实现强大的 HTML5 功能，包括地理位置、音频、视频和画布
• 将您的网站重新格式化为移动 Web 应用程序

《Bootstrap 5 指南：使用 Sass 和 JavaScript 自定义和扩展 Bootstrap 5，以创建独特的网站设计》

通过释放 Bootstrap 5 的全部潜力并创建高效的 UI， 使您的网站脱颖而出

本书的主要特点

• 了解如何使用 Sass 自定义 Bootstrap 5 的所有部分，包括使用实用程序 API
• 仅使用 Bootstrap 5 创建具有 Sass 自定义和交互功能的独特网站
• 掌握与 Sass、CSS、JavaScript 和源代码优化相关的高级 Bootstrap 5 主题

书籍简介

Bootstrap 是世界上最受欢迎和易于使用的前端 UI 工具包之一，用于构建响应式网站，但很少有人知道如何充分利用其广泛的组件、实用程序、JavaScript 插件和其他功能。《Missing Bootstrap 5 Guide》 将帮助您使用 Sass 自定义 Bootstrap 5，以实现从人群中脱颖而出的布局，使您能够创建看起来不像是用 Bootstrap 创建的独特内容。

有了这个实用的 Bootstrap 定制指南，使用 Bootstrap 的开发人员将能够利用强大的定制技术来创建具有独特设计和独家功能的网站。您将看到如何通过使用CSS，Sass和JavaScript的高级功能来自定义您的网站，从而快速轻松地开发具有视觉吸引力的网站。从学习如何使用 Sass 创建 Bootstrap 5 视觉样式开始，您将了解如何自定义它以满足您的需求，同时实现您想要的网站外观。然后，您将使用这些知识使用Bootstrap 5的大部分组件以及Sass和JavaScript的自定义来创建网站。最后，您将探索与 Sass、CSS、JavaScript 和源代码优化相关的各种高级 Bootstrap 5 主题。

在本书结束时，您将能够使用 Bootstrap 5 的强大功能自行设计和构建现代、迷人且独特的网站。

通过本书你将学到什么：

• 确定使用 Bootstrap 5 时最重要的 Sass 功能
• 了解 Bootstrap 5 中使用的 Sass 代码的结构和内容
• 探索自定义选项、颜色、布局、内容、表单、组件、帮助程序和实用程序
• 了解如何自定义、扩展和改进网站以使其独一无二
• 发现使用 Bootstrap 5 的 CSS 自定义属性的不同方法
• 掌握 Bootstrap 5 源代码优化

这本书是为谁写的：

本书面向熟悉HTML并具有Bootstrap经验的UI设计人员和开发人员。前端和使用Bootstrap的后端开发人员，他们不知道如何编写CSS代码，但对HTML有扎实的掌握，也会发现这本书很有用。有经验的默认引导程序文件用户可以使用本书来了解有关自定义和其他高级功能的所有信息。

本书的目录：

1. 为什么以及如何自定义Bootstrap
2. 使用和编译 Sass
3. 下载和探索Bootstrap 5 Sass 文件
4. Bootstrap 5全局选项和颜色
5. 自定义各种Bootstrap 5元素
6. 了解和使用 Bootstrap 5 实用程序 API
7. 使用默认Bootstrap 5 元素创建网站
8. 使用 Bootstrap 5 变量、实用程序 API 和 Sass 自定义网站
9. 使用 JavaScript 通过交互功能改进网站
10. 将 Bootstrap 5 与高级 Sass 和 CSS 功能结合使用
11. 将 Bootstrap 5 与高级 JavaScript 功能结合使用
12. 优化编译的Bootstrap 5 CSS 和 JavaScript 代码