三、体系化学习CSS
1.CSS语法
（1）语法一：样式语法
选择器 {
属性名：属性值;
/*注释*/
}
注意事项：
1> 所有符号都是英文符号，如果写错了，浏览器检查会警告
2> 区分大小写，a和A是不同的东西
3> 没有 // 注释，等同于写错，不是所有浏览器都支持
4> 最后一个分号可以省略，但尽量不要省略
5>任何地方写错了，都不会报错，浏览器会直接忽略
6>怎么知道自己写没写错 （见下文 如何调试）
（2）语法二：at语法
1> @charset "UTF-8"; （声明字符编码）
2> @import url(2.css); （导入一个CSS）
3> @media (min-width:100px) and (max-width:200px){
语法一
} （媒体查询）
注意事项：
1> @charset 必须放在第一行
2> 前两个at语法必须以分号 ; 结尾
3> charset 是字符集的意思，但UTF-8是字符编码encoding，这是历史遗留问题
2.如何调试
（1） 使用W3C验证器（基本不用）
（2） 使用VSCode看颜色
（3） 使用WebStorm看颜色
（4） 使用开发者工具看警告
1>找到标签,点击选取
2> 看它是否有选择器
3> 看它的样式是否被划掉
4> 看它的样式是否有警告
5>border调试法 （ ☆ ☆ ☆ 牢记☆ ☆ ☆）
步骤：
① 怀疑某个元素有问题
② 就给这个元素加border
③ 如果border没出现，就说明选择器错了或者语法错了，放在选择器第一行，如果没有出现就说明是选择器错了
通过把border加在下面，来知道错误发生在border之前。
④ border出现，看看是否符合预期，如果并没有重复③的操作
如果border生效，说明选择器没有问题，并且说明border上面没有问题。
⑤ 问题解决了如果不需要border，删除border即可
注意：
CSS的border调试法就相当于JS的log调试法
新人常见错误：
① 选择器拼写错误
② 属性名拼写错误
③ 属性值拼写错误
④ 大小写错误
⑤ 没写分号
⑥ 中文冒号
⑦ 没写反花括号
⑧ 没加单位
没有非低级错误，只有以上错误！！！
3.如何查资料
标准的制定者是W3C，搜索CSS spec 可以找到CSS最新标准。因为太长，根本看不完，仅供查询使用，可以看看CSS2.1标准的中文版。
网站推荐
（1）Google搜索关键词 + MDN
（2）搜索关键词 + CSS tricks （英文网站）
（3）搜索关键词 + 张鑫旭 （比较适合新人）
今日喵照