一、CSS 全称是什么？
CSS 全称 Cascading Style Sheets，层叠样式表。
二、CSS 有几种引入方式? link 和 @import 有什么区别?
- 内联样式
写在 HTML 页面的元素内，权重越大，通过 JS 改变的样式其实都是内联样式。但如果写页面的时候直接写在 HTML 元素里，会使得 HTML 看起来很混乱，而且难以维护，使用方法如下：
<div style="color: red;">Hello World!</div>
- 内部引用
同样写在 HTML 页面内，但用了个特殊的
<style>标签包裹着，一般该标签放在<head>里面，但放在其他标签内也可以。相对比内联写法好，免去的 CSS 样式的请求，加快页面加载速度，缺点是会使得 HTML 本身文件大小变得更大，维护也是有问题的，使用方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
background-color: #ccc;
}
</style>
</head>
<body>
<div>Hello World!</div>
</body>
</html>
- 用内部标签 link 引用 CSS 资源
该引用是通过在
<head>标签内通过<link>标签引入外部资源，可以是相对路径、绝对路径、网站路径引入。<link>引入会增加 HTTP 请求，网络慢时，会影响体验。但样式和结构分离，易维护，也是主流的引入方式。使用方法如下：
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap-grid.css" rel="stylesheet">
</head>
<body>
<div class="text-center">居中</div>
</body>
</html>
- 用 @import 引入 CSS 资源
在 HTML 中的
<style>中通过import url();引入，或者在*.css中的通过import url();引入。同样会增加 HTTP 请求，但对于团队分工有好处，使用方法如下：
<style>
<!--
@import url(css/example.css);
-->
</style>
@import 和 link 引入对比
-
<link>标签不仅仅可以加载 CSS,@import只能支持 CSS 引入 - 加载顺序，
<link>引入的都是优先加载的，哪怕是@import写在<link>前方，在网速慢的时候体验不好。参照：CSS 中 link 和 import 的加载顺序 - 兼容性。
<link>没有兼容性，@import是 CSS 2.1 提出的，有浏览器兼容问题，需要 IE5 以上才能识别。不过 IE 已死，兼容性不再是问题。 -
@import可以在其内部再次引入，如下,当引入a.css时：
/* a.css */
@import(b.css);
div {
background: #eee;
}
/* b.css */
@import(c.css);
div {
color: #000;
}
/* c.css */
div {
border: 1px solid red;
}
参考： CSS 引入的方式有哪些？
三、以下这几种文件路径分别用在什么地方，代表什么意思?
- 相对路径
css/a.css
./css/a.css
b.css
../imgs/a.png
- 绝对路径
/Users/hunger/project/css/a.css
- 网站路径
/static/css/a.css
http://cdn.jirengu.com/kejian1/8-1.png
四、如果我想在 js.jirengu.com 上展示一个图片，需要怎么操作?
上传图片到一个服务器，任何能通过网站路径访问的方式都可以成功在
js.jirengu.com中引入。比如 QQ空间、微博、贴吧或者github（强烈推荐 _ ），然后把图片地址复制，贴进js.jirengu.com就可以了。
五、列出5条以上 HTML 和 CSS 的书写规范
HTML
- 缩进：用两个空格，而且内嵌元素都应该缩进。
- 全部使用双引号。
- 自闭合标签不使用
/。 - 添加
<!DOCTYPE html>声明。 - 语言属性
<html lang="en">；IE兼容模式<meta http-equiv="X-UA-Compatible" content="IE=Edge">；字符编码<meta charset="utf-8"> - 引入 CSS 和 JS 无须书写
type="text/css"和type="text/javascript"，因为这是默认属性。 - 尽量使用最少标签实现功能，免除复杂化。
...
CSS
- 缩进：用两个空格。
- 选择器：选择器与左花括号
{之间有一个空格，且左花括号{开始分行；选择器有多组时，每个选择器单独一行； - 每条 CSS 属性的
:之后应该接一个空格。 - 所有语句结束都是分号。
- 小数省略 0 。
- 十六进制颜色全部小写。
...
参考： 编码规范
六、截图介绍 chrome 开发者工具的功能区
1. Element 功能块。
日常使用最多的一个功能，在浏览器中右键审查元素就能看到当前元素的 HTML 结构，而且还能看到对应的 CSS ，所有结构和属性都可以直接修改。
2. Console 功能块。
同样的使用频率很高，能看到网页的报错和一些打印信息，同时也能直接在上面进行 JS 代码调试，而且是主要功能。
3. Sources 功能块。
能看到该网页需要加载的所有资源。
4. Network 功能块。
查看网络请求，可以看到请求头，服务器响应（数据、HTML 代码等），获取时间等信息。
5. 设置。
在设置可以选择开发者工具显示的位置，同时在最左边有个移动端模式用于手机调试的。
日常用的比较多的就以上几个。
