CSS 是什么？

CSS 如何使用？有几种引入方式？ link 和 @import 有什么区别？

eg:

@charset "utf-8";
h1 {
  color: red;
  font-size: 20px;
  /*这是注释*/
}
a:hover{
  color: red;
}

内联样式

也叫行内样式，样式直接写在HTML标签中。但现在按照“内容样式行为分离”的原则，基本不再使用。 <h1 style="color: red; font-size: 20px;"></h1>
内部样式

在 HTML 的 head 部分，加入一个 style 标签，在其中书写样式，称为内部样式。

<style type="text/css">
  h1 {
    color: red;
    font-size: 20px;
  }
</style>
<h1>...</h1>

外部样式

目前最常用的 CSS 引入方式，即单独一个 css 文件来写样式，HTML 文件在执行的时候，通过外部引用的方式来获取 CSS 。外部引用有 link 和 @import 两种方式。

<head>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>

<style>
  @import url("hello.css");
  @import "world.css";
</style>

css/a.css 当前目录下 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 本地文件的绝对地址

/static/css/a.css 网站路径，此时寻找的是根目录下 static 文件夹下 css 文件夹中 a.css 文件

css/a.css 在网页打开时为相对路径，为和 HTML 页面同级下 css 文件夹下的 a.css 文件

http://cdn.jirengu.com/kejian1/8-1.png 网络路径，表示cdn.jirengu.com上面的图片地址

不同设备的模拟演示
Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
Sources:断点调试JS。
Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
Security:判断当前网页是否安全。
样式
Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。