CSS是什么：
css的全称是Cascading Style Sheets，层叠样式表。CSS是一个声明式语言。
选择器 {
属性: 值;
属性: 值;
.....
}
作用：利用CSS对写好的HTML页面进行样式美化。
如何引用CSS
- 内联样式：style
<h1 style = "color: red; font-size: 20px;"></h1>
缺点：表示范围有限。
- 内部样式
<style type = "text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>内部样式</h1>
- 外部样式：使用连接引入的方式加载CSS。建议放到head里面。
<head>
<link rel = "stylesheet" type = "text/css" href = "index.css">
</head>
<style>
@import url("hello.css");
@import "world.css"; 分号一定要有，引号可以去掉
</style>
以上二者有区别：
- link是HTMLHTML标签，标签可以放在任何地方。
- @import是CSS语法，不是HTML标签，引用的时候放在style标签里面，即放在任何的样式文件里面。例如index.css里面可以写@import。
- 浏览器的默认样式。审查元素。user agent stylesheet(用户代理)
文件路径
- 相对路径 ,相对于当前页面的路径。一般情况下使用相对路径
。 css/a.css（查找同级上一级目录下的css文件夹里面的a.css文件）
。 ./css/a.css （与上一个等价）
。 b.css（同级目录）
。 ../imgs/a.png（上一级目录下的imgs文件夹里面的a.png） - 绝对路径
。 /Users/hunger/project/css/a.css（本地打开的真实路径，但是放到服务器上就会找不到文件，只能在本地进行绝对寻址。） - 网站路径
。 /static/css/a.css（主域名下的同域名的CSS）
。 css/a.css（当前HTML同级的CSS）
。 http://cdn.jirengu.com/kejian1/8-1.png（线上的图片地址）
用js.bin上传一个本地的图片，需要把本地图片上传生成一个线上的网址，或者在本地开启一个服务器，只能用于本地测试。
打开你的QQ空间-相册管理-点击上传-把你想要的图片上传到QQ空间里去；然后，打开图片-鼠标右键-弹出对话框-点击最下面的属性打开-再次弹出对话框-就看到图片地址了-直接复制就可以了。
http://a3.qpic.cn/psb?/V117qpYJ0Fo6qa/vNIDrwIYjNEuKiLFST6.oNNi7DyvzRrjP5MWczyZsws!/m/dLYAAAAAAAAAnull&bo=gAKJAwAAAAAKByM!&rf=photolist&t=5
书写规范：尽量简洁优雅好看。
- 语法不区分大小写，但建议统一小写；
- 不要用内联的style属性定义样式；
- id和class使用有意义的单词，分隔符建议使用-；
- 有可能就用缩写；
- 属性值是0的省略单位；
- 块内容缩进；
- 属性名冒号后面添加一个空格。
切图：
图片切下来后，要用tinypng进行图片的无损压缩。防止图片过大。背景要去掉。切背景图片的时候，背景如果由许多小格子不断铺开得到的，那么切一个小格子就可以了。切之前一定要思考。不好调大小的时候，用编辑器进行调试。图层。
Chrome开发调试
- Elements：对应的DOM元素。
- Console：用于调试JS。
-
Sources：当前页面下的所有的应用。，所有的HTML，CSS，JS，可以给页面添加断点，进行调试。主要用于调试JS。执行到断点就会暂停。
2.png
当执行到内部函数的作用域后，调试台的作用域就变成函数内部作用域。
-
Network：用于调试ajax接口。
3.png
- Headers：通过这个接口可以看到向一个接口传递的参数。
- Respones：后台给我们哪些响应，响应有什么东西，一般是JSON格式的字符串。
- Preview：自动解析为json格式，便于解析。
- Resourses：当前页面的资源。
- Emulation:用于移动端的开发的调试，浏览器模拟手机浏览器。主要关注手机的分辨率。
- Timeline：分析时序的。
- Profiles：分析CPU和内存的。
如何学习CSS，观察法。border大法。
- CSS没有为什么，只有接受，没有逻辑可言。
- CSS有些属性相互影响，组合起来很麻烦。flex
- CSS有些属性很独立，跟其他属性一点关系也没有。动画，3D变换。
- 精髓：知道每一个元素在哪里，知道它多宽多高。
- 有任何问题，先定义border样式。
*{
border: 1px solid;
}
记住点：
- body没有占全屏，没有占满整个视口。
- header：有边框但是不显示。
- 如果两个span标签在一起，里面有任何空格回车出现，两个span标签之前都会有空隙，空隙的宽度大概是一个空格的宽度。如果是两个div，则没有空隙。因为div一定会另起一行。
CSS学习路线
- 从做一个小东西小按钮小序列开始。
- 所有的页面都是分模块的，从局部到整体。
- 时间不能短。CSS一直会有新的东西。
- 把常见的CSS学会就可以了。
CSS学习的主要内容：
- CSS3核心思想
- 响应式
- 堆叠上下文
- 常见布局：flex布局，float布局
- 常见动画：Fullpage、轮播、3D变化
- 常见组件：表单美化，好看的日历组件，好看的下拉列表。
- 常用工具
- CSS要背的知识（各种不正交的知识点）
- 自己实现的部分bootstrap
- CSS实战（造轮子）
- 不包含的内容有：IE兼容性
历史：
- css发明时间大概1999年。HTML先发明出来的。
- 在没有CSS的时候，HTML通过body的bgcolor，给页面添加背景颜色。
- 没有CSS的时候，可以用<center></center>来实现页面的内容的居中。
- 没有CSS的时候，可以用<font>给页面元素添加样式。
CSS不正交：
- 影响margin合并的元素：
- overflow (overflow:hidden)
- border:1px solid red;
- padding: 1px solid red;
- display:table(flex)
- 影响li的前面小圆点
- display:block：小圆点消失了。因为li默认的display:list-item,小圆点只负责给item元素的，一旦display的值改为其他的，小圆点就消失了。
- position:absolute和display:inline互相影响
如果一个元素是display:inline或者display:inline-block，为其添加display:absolute，他的display就会变成block。 - 元素之前也会相互影响。
- position:fixed影响transform。
- float影响inline元素。
CSS为什么难学
- CSS 属性很多，难以一次性记下来
- CSS 属性之间互相影响，难以完全掌握
- CSS 元素之间互相影响，难以完全掌握
- CSS 升级很快，如果学得太慢，会很有挫败感
CSS为什么好学
- CSS 常用套路并不多，不外乎布局、居中、文字省略、位置变换、动画过渡等。
- 只需要熟悉常用套路，足以应付日常工作（包括阿里巴巴、腾讯这些公司的日常工作）
- 现在的公司更喜欢 JS 好的程序员，对 CSS 要求不高，面试题也很基础。
- CSS 中没有复杂的逻辑，记忆型知识较多，只要多做 demo 会看文档就可以掌握 CSS
