今天起 正式开始接触CSS!
挑战不正交的CSS！
1. CSS introduction
CSS 为层叠样式表,有如下特点：
- 样式层叠
可以多次对同一选择器进行样式声明
- 选择器层叠
可以用不同选择器对同一个元素进行样式声明
- 文件层叠
可以用多个文件进行层叠
- 故这些特性使CSS极度灵活
造成了CSS不正交的特点
CSS标准制定者：W3C
链接
2.CSS version
| 版本 | 时间 | 重点 |
|---|---|---|
| CSS 1 | 1996年 | 没用 |
| CSS 2 | 1998年 | 添加定位、Z-index、media、不用管 |
| CSS 2.1 | 2004~2011年 | 使用最广泛的版本（IE支持） |
| CSS 3 | 1999年开始起草 | 现代版本、分模块（IE 8 部分支持） |
| CSS 4* | 分模块升级 |
牢记CSS 2.1 使用了7年
Q:当不确定什么浏览器支持什么特性,怎么办？
欢迎访问caniuse!!!
caniuse的使用方法：
- 输入关心的样式，如border-radius或filter
- 查看大部分浏览器支持情况
- 如果想看更多，点击show All
- note会有详细说明以及BUG
这个网站如何运作的
- 网站主一开始自己测试了一部分浏览器
- 社区前端工程师帮助测试了各种各样的浏览器
- UC（已被阿里收购）和QQ浏览器主要由中国开发者测试
- 大家把测试结果提交到Github上，这就是开发者社区的力量
3.CSS语法（炒鸡简单）
111. 样式语法
选择器{
属性名:属性值； 注意:和;
/*注释*/
}
注意：
- 没有//注释，在句子里加//只是这句话的语法错误把这句话的作用抵消了
- 任何地方写错了，浏览器不会报错，解决办法在下文！
222.at语法
@charset"UTF-8"
@import url(2.css);
@media(min-width:100px) and (max-width:200px){
上版本的语法
}
- @charset定义的是样式表的字符集，charset是字符集的意思，但UTF-8是字符编码的意思，是历史遗留问题，可以理解为声明字符编码的意思
- import为导入额外CSS文件的意思
WARN！！！
以下内容为调试方法,
十分重要，
为重中之重！！
4. 如何调试CSS？？
Method：
- W3C验证器
链接 - 用VScode看颜色
- WebStorm
- chrome开发者工具看警告
如何使用开发者工具：
- 找到标签
- 看是否有选择器
- 看样式是否被划掉
- 看样式是否有警告
重要：
Border调试法
逐行往下加 border:2px solid red;
若border不出现，则说明上一行选择器或语法有问题
若border出现了，看看边界是否符合预期
5. 查资料：
-
MDN
-
张鑫旭博客
-
CSS tricks
练习素材：
- Freepik搜素PSD
- 效果图：dribbble.com
- 去常用的商业网站直接模仿
