1、CSS的全称是什么?
Cascading Style Sheets，层叠样式表。可以用于静态的修饰网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。
2、CSS有几种引入方式? link 和@import 有什么区别?
1、内联样式
<h1 style="color: blue; font-size: 10px;"></h1>
样式直接写在HTML标签中，简单直接，但对后续的修改以及添加样式会很繁琐，不推荐使用。
2、内部样式
h1 {
color: blue; font-size: 10px;
}
</style> ```
优劣：因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。但是如果写末班网页的话就很适合，因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。
3、外部样式
` <head> <link rel="stylesheet" type="text/css" href="index.css"> </head> `
最常用的引用方式，rel:告诉浏览器引用的是一个样式表文件；type:文件类型（可省略）；href:文件地址。实现了内容与样式分离。
<style>
@import url("hello.css");
</style>
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别
- 1.link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
- 2.加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时性能较差
- 3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题
- 4.使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
## 3、以下这几种文件路径分别用在什么地方，代表什么意思?
### 相对路径
- css/a.css:当前目录下的css文件夹中的a.css
- ./css/a.css:当前目录中css文件夹中的a.css文件
- b.css:当前目录下的b.css文件
- ../imgs/a.png:上级目录中的imgs 文件夹中的a图片
### 绝对路径
- /Users/hunger/project/css/a.css:本地绝对路径中的a.css文件
### 网站路径
- /static/css/a.css:网站路径的相对路径
- http://cdn.jirengu.com/kejian1/8-1.png:图片上传后生成的线上地址
## 4、如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
1、把图片上传到服务器上，把图片和html文件放在同一级或者上一级的img文件夹中，使用相对路径引用。
2、直接使用网络上的地址引用（把本地照片上传到极简图床，会生成一个网络地址）。
## 5、列出5条以上html和 css 的书写规范
### html规范：
- id元素必须保证页面唯一。
- 同一页面，应避免使用相同的 name 与 id。
- 标签使用必须符合标签嵌套规则。
- 属性值必须用双引号包围。
- 引入 CSS 时必须指明 rel="stylesheet"。
- title 必须作为 head 的直接子元素，并紧随 charset 声明之后。
### CSS书写规范：
- 语法不区分大小写，但建议统一使用小写
- 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
- 属性定义后必须以分号结尾。
- 不使用内联的style属性定义样式
- id和class使用有意义的单词，分隔符建议使用-
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格
## 6、截图介绍 chrome 开发者工具的功能区
- Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
- Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
- Sources:断点调试JS。
- Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
- Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
- Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
- Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
- Security:判断当前网页是否安全。
- Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
网友评论