CSS基础

CSS的全称是什么?

CSS全称是 Cascading Style Sheets, 层叠样式表

CSS有几种引入方式? link 和@import 有什么区别?

内联样式：
<h1 style="color: red; font-size: 20px;"></h1>
内部样式：

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

外部样式：
<link rel="stylesheet" type="text/css" href="index.css">
@import url("hello.css");
@import "world.css";
link 是标签引用，可以放在HTML中的任何一个位置。
@import是CSS的一个语法，要放到另外一个样式表里才能生效。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

以下这几种文件路径分别用在什么地方，代表什么意思?

 css/a.css  //当前目录下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 //网站相对路径 去当前域名根目录下寻找 如http://www.jianshu.com/static/css/a.css
http://cdn.jirengu.com/kejian1/8-1.png //网站绝对路径 通过该路径可以找到cdn.jirengu.com域名下kejian1目录下的8-1.png文件

如果我想在js.jirengu.com上展示一个图片，需要怎么操作?

1. 在body标签内输入img标签
2. 给img标签src属性添加图片链接
   ![img](https://jirengu.com/addons/theme/stv1/_static/app/index-new/imgs/1.gif)
   即可
   

列出5条以上html和 css 的书写规范

截图介绍 chrome 开发者工具的功能区

1. Elements标签页
   Elements标签页的左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。
   

   
   Elements标签页的右侧可以对元素的CSS进行查看与编辑修改
   

2. Network标签页
   Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
   

   
   点击左侧某一个具体请求URL，可以看到该请求的详细HTTP请求情况：
   
   我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息。
   Headers请求头信息和响应头信息
   Preview预览结果，如果是文件可以查看这个文件；如果是图片可以预览这个图片；如果是从服务器返回来的JSON数据，可以查看格式话后的JSON
   Response从服务器返回的响应结果
   Cookies请求和响应的Cookie
   Timing具体的响应时间
   

3. Sources标签页
   Sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。
   

   
   

4. Console标签页
   JavaScript控制台：在这个面板可以查看错误信息、打印调试信息（console.log()）、写一些测试脚本，还可以当作Javascript API查看用。