1.CSS简介
CSS 的全称是Cascading Style Sheets，层叠样式表
2.CSS的引入方式
- 内联样式
也叫行内样式，直接在HTML标签中的style属性中添加CSS。
它只能改变当前标签的样式，如果想要多个<div>拥有相同的样式，你不得不重复地为每个<div>添加相同的样式，如果想要修改一种样式，又不得不改变所有的style中的代码。很显然，内联方式引入CSS代码会导致HTML代码变的冗长，且使得网页难以维护。 - 内部样式
将样式规则写在HTML头部的<style>...</style>标签之中，通常是将整个<style>...</style>结构写在网页的<head> </head>部分中。
优点：整篇文章有了统一性，只要是有声明的元件即会套用该样式规则。
缺点：个别元件的灵活度不足，整站的功能性较弱。 - 外部样式
(1).该样式规则写在一个.css的样式文件中，再以<link>标签引入。这样引入该css样式表文件以后，就可以直接套用该样式档案中制定的样式了。通常是将link标签写在网页的<head> </head>部分中。
优点：可以把要套用相同样式规则的数篇文件都指定到同一个样式文件中，可以进行统一的修改，也便于整站的设置有统一的风格。
缺点：在个别文件或元素的灵活度不足。
一般css网页布局都使用此种方法。这种方法可以说是最好的，可以使用一个样式表来设计多个文档，并且只需要在需要更改的地方更新CSS。
(2). 外部引用@import引用CSS
跟link方法很像，但必须放在<style>...</style>中，行末必须要有分号！
优点：灵活的引入css文件对xhtml元素进行控制。
缺点：在个别文件或元素的灵活度不足。
3. link和@import的区别
- 本质的区别：
link属于XHTML标签，而@import是CSS提供的一种方法。link标签除了可以加载CSS外，还可以做很多其他的事情，可以放在任何地方，而@import就只能加载CSS，必须放在<style> </style>标签内部。 - 加载顺序的区别：
当一个页面被加载时，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完才被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（闪烁）。 - 兼容性的差别：
由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题。 - 使用DOM控制样式时的差别：
当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
4. 相对路径、绝对路径和网站路径。
- 相对路径
文件夹都上传到服务器上，在线上和本地都能看到文件夹。相对路径是相对当前的路径。一般使用相对路径。 - 绝对路径
本地文件的一个绝对地址，是真实地址。路径长，且放到服务器上不能被找到。一般不用这种绝对寻址的方式。 - 网站路径
使用一个线上的地址，自己在做测试时可以临时用一下。
以下这几种文件路径分别用在什么地方，代表什么意思?
- css/a.css 相对路径 当前css目录下的a.css文件
- ./css/a.css 相对路径 ./代表当前，同上。
- b.css 相对路径 当前目录下的b.css
- ../imgs/a.png 相对路径 父目录下imgs文件夹下的a.png文件
- /Users/hunger/project/css/a.css 绝对路径 通过这个真实地址区绝对寻址，C盘下用户目录下hunger文件夹下project文件夹下的css文件夹中的a.css文件
- /static/css/a.css 网站路径 引用网站路径下static文件夹下css文件夹中的a.css文件（域名+端口号+/static/css/a.css）
- http://cdn.jirengu.com/kejian1/8-1.png 网站路径 是一个线上的图片地址，引用此URL中的8-1.png图片
- 如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
把本地图片上传到一个地方，生成一个网址。还有一个投机取巧的方法，在本地开一个服务器，通过localhost方式加载图片，这个方法适用于本地测试临时用一下。
5. HTML的书写规范
- 不使用内联级样式
- 闭合HTML标签
- 文档类型声明及编码：统一为html5声明类型<!DOCTYPE html>；编码统一为<meta charset="gbk"/>，书写时利用IDE实现层次分明的缩进
- 重要图片必须加上alt属性
- 在页面底部引入JavaScript文件
5. CSS的书写规范
- 编码统一为utf-8
- 语法不区分大小写，但一般全小写。
- 不使用内联的style属性定义样式，不要把样式写在标签上。
- id和class使用有意义的单词，id与class 间的分隔符用"-"
- 有一定的缩进，使代码美观易读。
- 属性名冒号后需要添加一个空格。
6. chrome谷歌浏览器开发者工具
- 如何去调试？鼠标右键点击审查元素（我的是检查）。
Elements、CSS、控制台
Network调试AJAX接口 Sources用来调试JS
Resources是当前页面的一些资源
Timeline分析时序
Profiles分析CPU和内存
Emulation模拟不同分辨率（例如iPhone5）的浏览器、不同的标识头部和不同的网络环境和网速。
-
在做前端开发时，要养成一个好习惯，如果你很欣赏这个页面的风格和布局，最简单的方式时审查元素，可以借鉴这些方式，因为前端是没有隐藏的。
chrome开发者工具.png
console用来调试css代码，console.log(变量)，报错，双击定位到出错点
