image-20250711005743167

CSS3 核心知识

欢迎各位小伙伴来到前端路线的CSS课程，这一站也是前端三件套（HTML、CSS、JavaScript）中难度最高的一个，期待与各位小伙伴共度这一旅程！视频中所有的文档、资料，都可以直接在视频下方简介中找到，视频非培训机构出品，纯个人录制，不需要加任何公众号、小程序，直接自取即可。

教程开始之前，提醒各位小伙伴：

  • 如果你对某样东西不熟悉，请务必保证跟视频中使用一模一样的环境、一模一样的操作方式去使用，不要自作主张，否则出现某些奇怪的问题又不知道怎么办，就会浪费很多时间。
  • 在学习过程中，尽可能避免出现中文文件夹，包括后面的环境安装、项目创建，都尽量不要放在中文路径下（因为使用中文常常出现奇奇怪怪的问题）建议使用对应的英文单词代替，或者是用拼音都可以，最好只出现英文字母和数字。
  • 本系列教程统一使用 WebStorm 作为集成开发环境，该软件是免费使用的。
  • 请不要抱着应试教育的心态进行学习，学习编程开发是为了掌握技能，而不是单纯为了过考试。

如果觉得本视频对你有帮助，请一键三连支持一下UP主~

CSS核心部分

虽然在之前的HTML篇中我们学习了如果构建网站的基本框架，但是在用户要求日益增高的今天，没有漂亮的界面是不会得到用户的选择和青睐的，而CSS则是帮助我们构建应该现代化且美丽界面的工具，本次课程我们将深入学习最新的CSS3相关知识点。

CSS（Cascading Style Sheets，层叠样式表）是一种用来描述网页外观和布局的样式表语言。它与HTML（超文本标记语言）配合使用，负责网页的样式设计，使网页具有美观的外观和良好的用户体验。

CSS的最初版本发布于 1996 年，其包含基本的样式控制，如字体、颜色、边距、边框和背景，不过功能过于简单，不支持复杂的布局模型、只有有限的动画和过渡效果、缺少媒体查询，响应式设计难以实现。于是在 1998 年，CSS2正式发布，它在 CSS1 的基础上引入了许多新的特性和改进，定位、层级、布局、伪元素等特性都是这个时期出现的，随后在2004年推出了一个CSS2.1修订版，进一步增强CSS2的使用规范。

在2010年之后，CSS3逐步开始进入大众视野，相比CSS2.1带来了许多重要的改进和新特性，引入新布局模型、动画效果、多背景、多字体、响应式设计等多方面的改进，大大扩展了网页设计的可能性，使得网页更加美观、动态和适应各种设备。这些新特性在现代网页开发中几乎是必不可少的基础工具。而CSS3及之前的CSS特性也是我们目前学习的主要目标。

CSS的主要功能如下：

  1. 控制页面布局：设置元素的位置、大小、边距、边框等。
  2. 定义字体和颜色：设置文本的字体、大小、颜色、背景色等。
  3. 实现响应式设计：通过媒体查询适配不同设备（如手机、平板、桌面）。
  4. 动画与过渡效果：实现元素的动画、渐变、变换等交互效果。
  5. 样式继承和层叠：多个样式规则可以叠加应用，优先级由层叠规则决定。

CSS包含的知识点非常之多，同时很多概念也不太好理解，因此它也是前端三件套中最难学习和完全掌握的一个东西。

CSS引入方式

在开始介绍CSS引入方式之前，我们先来带大家体验一下如何在HTML使用CSS样式。我们先创建一个用于测试简单页面文件：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是网站标题</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p>
    我是一段文本，我想请问你要干嘛，为什么要黑我们家鸽鸽
  </p>
</body>
</html>

接着，我们来为p标签添加一个CSS样式，让其中的字体改变颜色，我们需要在标签上添加style属性，所有的CSS属性都要编写到style中，虽然还没有正式介绍CSS样式的相关属性，但是大家可以先跟着我们使用：

html 复制代码 
<p style="color: green">
  我是一段文本，我想请问你要干嘛，为什么要黑我们家鸽鸽
</p>

这里我们使用color属性来修改标签内的文本颜色，注意CSS属性后需要使用冒号之后才能编写具体的属性值，这里设置的是green代表绿色，可以看到，在我们添加CSS样式之后，页面中的字体确实也变成了指定的颜色：

image-20250711014435749

这样，我们就成功修改了文本的样式，让其原本的黑色变成了绿色。我们还可以继续添加CSS样式，比如我希望字体变成粗体，我们可以继续添加CSS属性font-weight，它用于控制字体字重，注意多个CSS样式之间需要使用;隔开：

java 复制代码 
<p style="color: green;font-weight: 800">
  我是一段文本，我想请问你要干嘛，为什么要黑我们家鸽鸽
</p>

像这样编写的CSS样式，我们一般称其为行内样式，行内样式使用标签自带的style属性进行定义，它可以直接写到标签内部，同时其作用域也只能在标签内部：

java 复制代码 
<body>
  <p style="color: green;font-weight: 800">
    我是一段文本，我想请问你要干嘛，为什么要黑我们家鸽鸽
    <span>我附加</span>
  </p>
  <p>
    我是另一段文本，我不信现在你们都还有鸽鸽的照片
  </p>
</body>
image-20250711015111955

行内样式只能影响到标签及其内部嵌套标签，无法影响到其他同级标签或是父级标签。

除了使用行内样式之外，我们也可以直接在HTML的head标签内部插入应该style标签，并在此标签内编写我们的CSS样式属性：

java 复制代码 
<head>
  <meta charset="UTF-8">
  <title>我是网站标题</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    p {   /* 注意使用内部样式需要通过选择器去指定样式能够作用的范围 */
      color: green;
      font-weight: 800;
    }
  </style>
</head>

由于样式被写到了一个单独的style标签内，浏览器无法得知我们需要将这些样式作用到哪个标签或是哪些标签上，所以我们还必须结合一个选择器来对作用域进行指定，有关CSS选择器的知识点我们会在下一部分进行介绍。这里我们使用了p代表选择所有p标签，编写完选择器之后，需要使用花括号囊括此作用范围内生效的样式，编写方式和上面的行内样式是一样的。

还有一种CSS的引入方式是单独在外部创建一个css文件作为外部样式表，然后在页面中引入此外部样式表：

image-20250711015955046

首先我们需要创建一个新的.css文件，一般网页默认的css文件名称为style.css，接着我们就可以将CSS样式在其中进行编写了，和内部样式一样，也需要使用选择器来选择样式的作用范围。

接着我们需要再HTML文件中引入这个外部的样式，需要使用link标签来完成：

html 复制代码 
<link rel="stylesheet" type="text/css" href="style.css">

其中rel和type写法是固定的，后面的href和我们之前HTML阶段学习的图片引入是一样的，也是编写外部CSS文件的路径，这样就可以将样式引入到页面中了。

综上，引入CSS的方式主要有三种，分别是：

  1. 内联样式/行内样式 （Inline CSS）直接在HTML元素的style属性中编写CSS代码。
  2. 内部样式 （Internal CSS）在HTML文档的<head>标签内使用<style>标签定义CSS规则。
  3. 外部样式 （External CSS）将CSS代码写在独立的.css文件中，然后通过<link>标签引入到HTML页面中。

基本选择器

前面我们介绍了如何在页面中引入CSS样式，这一节我们来学习一下内联样式和外部样式需要用到的CSS选择器。

选择器实际上是用于限制样式能够生效的作用范围的工具，也可以反过来理解，就是通过选择器去选中某一个或一些元素，进而为这些被选中的元素添加我们想要的样式。

选择器的种类非常多，用法也不一样，我们首先来介绍一下基本选择器：

  1. **标签选择器（Element Selector）**通过 HTML 标签名称选择元素。

    标签选择器可以直接为所有指定类型的标签添加样式，比如我们希望一次性为所有p标签添加样式，就可以使用标签选择器，只需直接输入标签名称即可：

    css 复制代码 
    p {
  color: blueviolet;
}

    此时所有的p标签都会变成紫色：

    html 复制代码 
    <body>
  <p>Hello World</p>
  <p>This is a paragraph.</p>
</body>

    标签选择器是最简单的一种选择器类型，只要是标签（包括body、html）都可以选择。

  2. **类选择器（Class Selector）**通过元素的 class 属性选择元素。

    在HTML中，class属性是用来为元素指定类别的标识符。它可以让你为网页中的多个元素分配相同的类名，从而方便通过CSS或JavaScript对这些元素进行统一的样式设置或操作。

    在class属性中，我们可以填入一个或多个自定义的类名，命名规则也比较随意，注意多个类名需要用空格分隔：

    html 复制代码 
    <p class="test bold">Hello World</p>
<p>This is a paragraph.</p>
<p class="test">This is another paragraph.</p>

    我们可以通过类选择器来根据类名选择元素，使用.类名称的格式指定类选择器：

    css 复制代码 
    .test {
  color: blueviolet;
}

.bold {
  font-weight: 800;
}

    使用类选择器之后，只要标签的class属性携带了对应的类名，那么样式就会生效。

  3. **ID 选择器（ID Selector）**通过元素的 id 属性选择元素，但与class不同的是，id应该保证在页面中是唯一的。

    HTML中的id属性是用来为元素指定唯一标识符的属性。每个id值在整个页面中必须是唯一的，这样可以方便地通过JavaScript、CSS或者其他技术定位和操作特定的元素。

    由于id属性全局唯一，我们只能给页面中的任何一个元素设置：

    html 复制代码 
    <p id="title">Hello World</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

    一旦出现重复的id，IDE会出现红标提示：

    image-20250731153238031

    针对于id属性，我们也可以使用ID选择器来选中指定id的元素，使用#ID的格式：

    css 复制代码 
    #title {
  color: blueviolet;
  font-weight: bold;
}

    对于ID的命名存在一定的规范，需要注意以下几点：

    • 只能有字母、数字、下划线，且必须以字母开头。
    • 不能和HTML标签同名，比如body、p、a等。
    • 大小写严格区分，比如test和TEST就是两个不同的ID。

    因此，由于id属性存在诸多限制，在实际使用时建议尽可能使用上面提到的类选择器而不是ID选择器，它的限制更少且使用起来更灵活，id属性其实更像是为我们后续学习的JavaScript而准备的。

  4. **通配符选择器（Universal Selector）**选择页面中的所有元素。

    通配符选择器可以直接选取页面中所有元素，包括html、body、p等一切元素都会生效，使用*表示通配符：

    java 复制代码 
    * {
  color: blueviolet;
}

有了基本选择器，我们就可以很灵活地针对指定元素进行样式添加，虽然基本选择器已经很强大，但是针对于一些复杂环境还是有点力不从心，我们接着来介绍一下更加高级的CSS选择器类型。首先是交集和并集的情况：

  1. 交集选择器，适用于要求同时满足N个选择条件的元素才能被选中，我们可以将前面介绍的四种选择器进行直接连接：

    css 复制代码 
    p.test {  /* 注意不要随意交换顺序，这可能会产生歧义，比如.testp就变成了选择testp这个类 */
  color: blueviolet;
}

    此时，只有同时为p标签并且class中存在test类的元素才能被选中，再比如下面这种情况：

    css 复制代码 
    p.test#p {
  color: blueviolet;
}

    很明显这是由三个基本选择器组成的交集选择器，必须同时满足三个条件才能正确选择。

  2. 并集选择器（选择器列表），并集选择器适用于针对多种选择条件同时进行选中，一次性统一编写样式而不需要分开进行编写，比如我们以前是像这样写的：

    css 复制代码 
    p { color: blueviolet; }
a { color: blueviolet }
div { color: blueviolet }

    实际上这三个选择器配置的样式都是一样的，我们可以直接使用并集选择器来为这三个选择器一次性编写样式，只需使用,隔开每一种选择器即可：

    css 复制代码 
    p, a, div {  /* 与上面的代码效果等价 */
  color: blueviolet;
}

    这样编写同样可以实现上面分开编写的效果，并且可以统一进行样式修改，同样适用于前面介绍的四种选择器。

高级选择器

前面我们介绍了基本选择器的使用，我们接着来看更加强大的组合选择器，它可以实现对基本选择器的任意组合，这针对于一些特定环境会非常好使：

  1. **后代选择器（Descendant Selector）**选择某个元素的后代元素（子元素或更深层次的元素）

    html 复制代码 
    <div class="content">
  <p>Hello World</p>
  <div>
    <p>This is a paragraph</p>
    <div>Click here</div>
  </div>
</div>

    比如现在我们需要对上面.content盒子中的所有p标签设置样式，那么我们可以使用后代选择器，只需空格继续添加其后代选择器即可，就像这样：

    css 复制代码 
    .content p {
  color: blueviolet;
}

    这里的选取意义为，首先找到所有类名称为content的元素，然后进一步选择其中（注意必须是子元素或是更深层次的后代元素，不能为当前元素本身）所有的p标签元素。再比如下面这种情况：

    css 复制代码 
    .content div p {
  color: blueviolet;
}

    这里的选择器和上面一样，首先选取所有类名称为content的元素，接着再找到其后代中的div标签，然后进一步在div标签的后代中继续选择p标签元素。虽然看起来比较绕，但是实际上这种连续向下选择后代的情况，在之后的开发中非常常见，它可以非常精确地定位的一系列元素下的某个元素，且能大幅度提升选择器的优先级（后续介绍）

  2. **子选择器（Child Selector）**选择某个元素的直接子元素。

    子选择器类似于后代选择器，不过它将选择范围锁定在直接子元素中，也就是只有嵌套一级的元素，而更深层次的元素则无法进行选中，我们可以使用>符合来连接：

    css 复制代码 
    .content > p {   /* 为了美观，>两边也可以打上空格，不影响语义 */
  color: blueviolet;
}

    这里的选取意义为，首先找到所有类名称为content的元素，然后进一步选择其中仅一层嵌套的p标签作为目标添加样式，而非所有内部的p标签。

  3. **相邻兄弟选择器（Adjacent Sibling Selector）**选择某个元素的下一个相邻兄弟元素。

    html 复制代码 
    <div class="content"></div>
<p>Hello World</p>
<p>This is a paragraph</p>

    我们可以使用相邻兄弟选择器来选择某个元素的相邻元素，使用+进行连接：

    css 复制代码 
    .content + p {
  color: blueviolet;
}

    此时，会找到所有类名称为content的元素，然后进一步选择与其相邻的p标签元素，也就是兄弟节点。但是注意，相邻兄弟选择器只能选择其下一个相邻兄弟元素，再之后的元素无法选中。

  4. **通用兄弟选择器（General Sibling Selector）**选择某个元素之后的所有兄弟元素。

    通用兄弟选取器弥补了相邻兄弟选择器只能选择下一个相邻兄弟的缺点，它可以一次性选择所有兄弟节点：

    css 复制代码 
    .content ~ p {
  color: blueviolet;
}

    此时，会找到所有类名称为content的元素，然后进一步选择所有兄弟的p标签元素。

  5. 属性选择器，类似前面提到的ID选择器和类选择器，属性选择器可以根据标签中的某些属性和值来进行元素选择，比如我们想要选择下面的链接元素：

    html 复制代码 
    <a href="https://www.baidu.com">我是百度</a>
<a href="https://www.bing.com">我是必应</a>
<div>大家一般用哪一个作为搜索引擎呢？</div>

    现在我们想要选择百度的链接元素，并将其颜色修改为紫色，我们可以使用属性选择器来精确选择，使用大括号囊括属性：

    css 复制代码 
    /* 类似于直接在html标签中的写法 */
[href="https://www.baidu.com"] {
  color: blueviolet;
}

    一般为了选择器更加精确，我们会使用交集来进行属性选择，比如这里我们明确需要的是a标签，而且herf属性本来就是a标签所拥有的，所以我们可以像这样写：

    css 复制代码 
    /* 选择 href 属性以 "https" 开头的a链接元素 */
a[herf="https://www.baidu.com"] {
  color: blueviolet;
}

    当然，如果我们只是想要选择携带了某个属性的标签，而非具体属性要为某个值，也可以直接使用方括号囊括属性：

    css 复制代码 
    a[href] {
  color: blueviolet;
}

    此时只要携带href属性的a标签都会变成紫色，无论其是否包含值或是值具体是什么，但是注意，如果存在a标签未配置此属性，则无法选中。

    除此之外，我们还可以对属性的值进行一定规则的匹配，比如我们希望匹配href属性值中包含bing的元素：

    css 复制代码 
    a[href*="bing"] {  /* 使用*来表示至少包含一个bing的元素 */
  color: blueviolet;
}

    我们还可以直接在后面添加一个小写或大写字母i来忽略大小写进行匹配：

    css 复制代码 
    a[href*="Bing" i] {
  color: blueviolet;
}

    有关更多匹配规则，请参阅MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors

对于这些高级选择器，我们也可以使用之前的交集并集策略来进一步进行组合，实现更加精确和灵活的元素选择，比如：

css 复制代码 
a[href*="Bing" i].test {
  color: blueviolet;
}
css 复制代码 
a[href*="Bing" i], a[href*="baidu" i] {
  color: blueviolet;
}

这些高级选择器也可以相互组合使用：

css 复制代码 
body > a[href*="Bing" i] {
  color: blueviolet;
}

不过，CSS的选择器远不止这些，但是为了降低课程难度，有关伪类选择器和伪元素选择器以及嵌套选择器的定义和使用，我们会放在下一章中继续为大家讲解，这一章请务必将以上讲解的选择器类型全部理解到位。

选择器优先级

前面我们为大家介绍了多种多样的CSS元素选择器，不过，有些时候可能会出现一些冲突的情况，比如：

html 复制代码 
<p class="test">This is a paragraph</p>
css 复制代码 
p { color: blueviolet; }
.test { color: red; }

此时无论是标签选择器还是类选择器，都可以选择到上面的p标签，现在分别对其设置不同的颜色，那么到底使用哪一个呢？这里就需要谈到CSS的优先级了，不同类型的选择器，具有的优先级是不一样的，优先级计算规则比较复杂，一般由四个部分组成，通常表示为（a，b，c，d）：

  • a: 行内样式的数量（这个数量代表的是有没有内联样式，而非内联样式写了多少，所以只有1和0）
  • b: ID 选择器的数量。
  • c: 类选择器、属性选择器和伪类的数量。
  • d: 元素选择器和伪元素的数量。

那么这个是如何进行计算和比较的呢？我们以下面这个例子为例：

html 复制代码 
<p class="test" id="aaa">
  This is a paragraph
</p>
css 复制代码 
.test { color: red; }
#aaa { color: blue; }
#aaa.test { color: green; }

我们会发现此时这个选择器都可以选中这里的p标签，并且都在对其字体颜色进行修改，那么此时到底谁生效呢？根据上面的公式我们来推算一下，我们首先从a开始看，此时标签中不存在任何行内样式，那么就将其标记为0，接着是b，他代表ID选择器的数量，c代表类选择器的数量，那么此时上面的三种选择器对应的优先级就是：

css 复制代码 
.test { color: red; }   /* 优先级为 (0, 0, 1, 0) */
#aaa { color: blue; }   /* 优先级为 (0, 1, 0, 0) */
#aaa.test { color: green; }   /* 优先级为 (0, 1, 1, 0) */

那么现在得到了优先级表达式之后，怎么进行比较呢？很简单，我们只需要从左往右依次进行比较即可，比如.test和#aaa，此时前者和后者的a位置上都是0，暂时比较不出大小，我们继续向后看，接着前者的b位置上为0，而后者为1，很明显，后者的优先级更高，则无需继续向后比较了，直接就可以得出后者的优先级更高。再比如#aaa和#aaa.test，此时它们的b位置都为1，因此还暂时无法比较出优先级，我们接着往后看c位置，此时前者的c位置上为0，而后者为1，因此推断出后者比前者优先级更高。

通过上面的例子不难发现，选择器条件越复杂，优先级更高的可能性就越大，当然并不是说选择器条件越复杂就一定优先级越高，最终还是要按照公式来判断，比如：

css 复制代码 
.aaa.bbb { color: red; }  /* 优先级为 (0, 0, 2, 0) */
#ccc { color: blue; }     /* 优先级为 (0, 1, 0, 0) */

此时虽然上面的.aaa.bbb更复杂，但根据判断公式结果，显然#ccc的优先级更高。

此外，我们还发现，只要是通过CSS选择器得到的优先级，a位置的结果始终都是0，这实际上就是为了内联样式而生的，我们来看下面这个例子：

html 复制代码 
<p class="test" style="color: blue">
  This is a paragraph
</p>
css 复制代码 
.test {
  color: red;
}

可以看到，此时我们同时在内联样式和类选择器中修改了文本的颜色，那么谁的优先级更高呢？根据上面的规则，此时.test的优先级为(0 ,0, 1, 0)，而内联样式的优先级为(1, 0, 0, 0)，显然内联样式优先级秒杀前者。因此，如果一个标签上存在内联样式，则必定优先采用内联样式中的设置，所以内联样式也是优先级最高的一种。

那么如果此时出现了两个相同有优先级的选择器怎么办呢？

html 复制代码 
<p class="t1 t2">This is a paragraph</p>
css 复制代码 
.t1 { color: blue; }  /* 优先级为 (0, 0, 1, 0) */
.t2 { color: red; }   /* 优先级为 (0, 0, 1, 0) */

这种情况下，.t1和.t2结果是相同的，那么就会按照声明顺序来进行排序，由于.t2是写在.t1后面的，因此在同等优先级下后者更高，所以此时会采用.t2中的样式。

最后，为了让样式设置更加灵活，我们可以使用!important来强制提升某一个样式的优先级到最高，比如：

css 复制代码 
p.t1 {  /* 优先级为 (0, 1, 1, 0) */
  color: blue;
  background-color: yellow;
}
.t1 {   /* 优先级为 (0, 0, 1, 0) */
  color: red;
  background-color: aqua;
}

很明显，此时p.t1优先级更高，但是我们可以强制针对某个属性进行提升，只需在后面添加!important即可：

css 复制代码 
p.t1 {
  color: blue;  /* 优先级低于下面的 */
  background-color: yellow;
}
.t1 {
  color: red !important;
  background-color: aqua;
}

此时，虽然p.t1优先级更高，但是我们强制对.t1中的color属性进行了优先级提升，那么就会使用.t1中的color属性，通过这种方式提升后，优先级将直接变为最高，即使是行内样式也无法影响。

提问： 如果给上面的p.t1中的color属性也设置一个!important会怎么样？

CSS样式继承

子元素会自动继承某些父元素的样式属性。比如：

html 复制代码 
<div class="t1">
  <p>This is a paragraph</p>
</div>
css 复制代码 
.t1 { color: red; }

可以看到，虽然我们将样式设定给父元素，但实际上其内部的子元素同样也会生效，这就是样式的继承。

上面提到的color属性就是支持自动继承的属性，自动继承的属性会将其生效给所有的子级元素，除非子元素又单独去设定自己的样式。当然支持自动继承的属性并非所有，只有部分CSS属性会被自动继承，包括文本相关的属性，如 color, font-family, font-size, line-height, visibility, cursor 等，其他属性如盒子模型相关的 margin, padding, border, width, height 等，都不会自动继承。

不过，并不是所有的情况下我们都希望样式能够自动继承，那么有没有办法阻止这种自动继承的效果呢？最简单的方法就是手动设定样式覆盖被继承的样式：

html 复制代码 
<div class="t1">
  <p style="color: gray">This is a paragraph</p>
</div>

此时我们为p标签手动设定了color样式，则不会受到自动继承的影响。当然，如果我们希望color变回默认的值而不是我们手动去指定，那么也可以使用initial来指定其为初始值，这是一个比较特殊的值：

html 复制代码 
<div class="t1">
  <p style="color: initial">This is a paragraph</p>
</div>

除了initial之外，还有一些比较特殊的值，比如我们希望某个属性主动继承父元素的设置，就可以使用inherit来表示，如果我们希望某个属性变回自动继承的效果，也可以使用unset来表示。还有一个与initial类似的revert，同样是重置样式，不过依照的是用户样式表而非浏览器默认设置。有关这些特殊属性，我们会在后续的样式讲解中逐步使用。

(选学) HTML快速生成语法

有些时候，我们编写一个标签实在是太累了，比如我想创建一个普通的盒子div，此时我不仅要去吧前半部分打出来，还要把后半部分也打出来，非常麻烦，虽然WebStorm自带了提示，但是针对于一次性生成多个元素的情况下依然不够好使。这里我们介绍一种全新的工具，它可以帮助我们快速完成HTML结构生成：

Emmet 是一个强大的前端开发工具，能够大大加快 HTML 和 CSS 的编写速度。它通过简洁的语法，让你用短小的表达式快速生成复杂的代码结构，它已经在常用的IDE中内置，包括WebStorm和VSCode等。

正常情况下，我们如果需要编写div，都是直接打出来，然后手动去选择WebStorm的div标签提示来快速生成：

image-20250823201516866

使用Emmet后，我们可以直接使用Tab键快速生成div元素。

不对啊，你这有啥区别吗，我WebStorm提示也可以生成啊，那如果现在我要求你快速生成多个div标签呢？此时，利用Emmet我们可以直接编写div*3来表示我们需要快速创建三个盒子，同样按下Tab后即可出现：

image-20250823201749534

还是不对啊，我直接按住Alt键拉动鼠标也可以多行编辑，一样可以一次性打三个盒子出来，为啥非得用Emmet？好好好，那如果现在我们需要你快速打出一个div嵌套一个button呢？

这下没办法了吧？而此时我们依然可以利用Emmet来快速生成，还记得我们前面刚讲过的选择器吗，我们只需要提供一个合理的选择器，Emmet就能理解并自动生成我们想要的结构。

比如一个div嵌套一个button，我们可以直接编写一个选择器div>button，这个选择器代表的就是选择div中的button元素，此时Emmet就能够进行理解，并生成对应结构：

image-20250823202220474

再比如我们要生成两个连续的button元素，就可以使用兄弟选择器来表示button+button：

image-20250823202443503

我们还可以结合之前介绍的类选择器，来快速生成一个带class属性的盒子，比如div.test：

image-20250823202522573

比如我们希望得到的盒子中自带一段文本内容，可以使用花括号囊括：

html 复制代码 
div{我是文本}
html 复制代码 
<div>我是文本</div>

此外，我们还可以利用$符号来快速生成带编号的元素，比如我希望生成一个test1、test2、test3这样的连续ID元素，我们就可以使用下面的方式：

复制代码 
div#test$*3
image-20250823203546349

在学习完选择器和Emmet之后，快速编写HTML就简单多了。

字体样式

一个网页中，最关键的就是文字，文字也是我们网页向用户传达信息的最关键内容，因此，文字的样式是我们最重要也是最常用的。

前往下一部分继续阅读，当前位于 1 / 2 分段
正在加载页面，请稍后...