1. CSS概述

层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。

由Håkon Wium Lie（哈肯·维姆·莱）首先提出。

1.1 层叠指什么？

• 样式层叠：可以多次对同一选择器进行样式声明。
• 选择器层叠：可以用不同选择器对同一个元素进行样式声明。
• 文件层叠：可以用多个文件进行层叠。 这些特性使得CSS极度灵活

2. CSS的版本

版本	时间	重点
CSS 1	1996年
CSS 2	1998年	添加定位、z-index、media...
CSS 2.1	2004~2011年	使用最广泛的版本（IE支持）
CSS 3	1999年开始起草	现代版本。分模块（IE 8部分支持）
CSS 4*	分模块升级

3. CSS语法

• 语法一：样式语法

选择器{
  属性名: 属性值;
  /*注释*/
}

注意事项

• 所有符号都是英文符号。

• 区分大小写。

• 注释只有一种格式。

• 最后一个分号可以省略。

• 任何地方写错，都不会报错，浏览器会直接忽略。

• 语法二：at语法

@charset "UTF-8"; /*声明字符编码*/
@import url(2.css); /*导入一个额外的.css文件*/
@media (min-width: 100px) and (max-width: 200px) {
语法一 /*媒体查询*/
}

注意事项

• @charset必须放在第一行。
• 前面两个at语法必须以 ; 结尾。
• charset是字符集的意思，但UTF-8是字符编码encoding，这是历史遗留问题。

4. 如何调试

Webstorm = F12 > VSCode > W3C

5. Border调试法

步骤

1. 怀疑哪个元素有问题就给这个元素加border；
2. border没出现，说明选择器或语法错了；
3. border出现了，看看边界是否符合预期；
4. bug解决了才可以把border删掉。 CSS的border调试法就相当于JS的log调试法