CSS的厉害之处

CSS的厉害之处在于层叠样式表，其中包括
• 样式层叠：可以多次对同一选择器选择样式声明
• 选择器层叠：可以用不同选择器对同一个元素声明样式
• 文件层叠：可以用多个文件层叠

CSS的版本：
CSS2是最广泛使用的版本，兼容一切IE, CSS3是现代使用的版本，之后就分模块升级 caniuse.com查询兼容性

可以在 caniuse 上查询CSS样式的在不同浏览器的兼容性

体系化学习

学一门语言必须学会什么

• 语法（怎么写代码）
• 如何调试（怎么知道子代码写错）
• 在哪查资料（其实就是为了抄代码）
• 标准制定者是谁

如何学

• Copy - 抄文档、抄老师
• Run - 放在自己的机器上运行成功
• Modify - 加入一点自己的想法，然后重新运行

语法一：样式语法

选择器 {
   属性名： 属性值；
   /*注释*/
}

例如：

p{
  color: red;
  background: black;
}

注意事项：

• 所有符号都是英文符号，如果写错了，浏览器会警告
• 区分大小写
• 没有//注释

语法二：at语法

• @charset "UTF-8";
• @import url(2.css);
• @media (min-width: 100px) and (max-width: 200px) {语法一}

注意事项：

• @charset 必须放在第一行
• 前两个at语法必须以分号；结尾
• @media 语法会单独教学
• charset是字符集的意思，但UFT-8是字符编码

如何调试CSS

方法：

• 使用VSCode 看颜色
• 使用WebStorm 看颜色
• Border调试法：相当于JS的log调试法 步骤：
  border: 1px solid red;
• 怀疑某个元素有我呢提就给这个元素加border
• border没出现？说明选择器错了或者语法错了
• border出现了？看看边界是否符合预期

如何查资料

• google搜索关键词加MSN
• 关键词加CSS tricks
• 张鑫旭的博客：关键词加张鑫旭

在哪搜联系素材

• PSD:365psd里的UI套件
• 效果图：dribbble.com 顶级设计师社区
• 模仿你厂区的网站