CSS基础

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