了解Chrome开发者工具

1.CSS的全称是什么?

CSS全称为Cascading Style Sheets， 层叠样式表。

---

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

CSS有四种引入方式：行内式，内嵌式，导入式，和 链接式。
link 和@import的区别：

• link属于html标签，而@import是css提供的。
• 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
• link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
• link方式样式的权重高于@import的。

---

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

1）相对路径

• css/a.css指当前目录下的css文件夹里的a.css文件
• ./css/a.css 指当前目录下css文件夹中的a.css文件（同上）
• b.css 当前目录下的b.css文件
• ../imgs/a.png 指上级目录下的imgs 文件夹中的a图片文件

2）绝对路径（本地文件的绝对地址）

• /User/hunger/project/css/a.css 本地绝对路径中的a.css文件

3）网站路径

• http://cdn.jirengu.com/kejian1/8-1.png3 按照该链接地址找到的8-1.png3图片文件

/static/css/a.css 指在当前目录下再按照给定目录地址找到的a.css文件

---

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

将所需图片上传至服务器。获取到该图片的url，然后在需要用该图片的地方引入它的url。

---

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

• 标签一定要正确嵌套，标签一定要闭合。
• 模块之间必须保持独立，区块化布局，方便随意增删改，多人协作维护。
• 使用CSS缩写属性。
• 属性值为零的 去掉单位。
• 16进制颜色代码缩写。
• 需要程序单独赋值或者控制的地方尽量用独立的标签包括起来，方便添加id和其他自定义属性。

---

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

• 使用 设备模拟器可以模拟不同的设备分辨率显示效果。

  
  

• 使用 Elements(元素)面板，检查并实时编辑页面中的HTML和CSS。
  1）在Styles(样式)窗格中查看和更改应用于任何选定元素的CSS规则。
  2）在Computed(计算)窗格中查看和编辑所选元素的盒模型。
  3）在Sources(源代码)面板中查看您在本地网页上所做的任何更改。

  
  

• 在开发期间，可以使用Console(控制台面板)记录诊断信息。或者使用它作为 shell,在页面上与JavaScript交互。

  
  

• 在Sources(源代码面板)中，可以断点调试 JavaScript 。或者通过Workspaces（工作区）连接本地文件，使用开发者工具实时编辑。

  
  

• 使用Network(网络面板)了解请求和下载的资源文件，并优化您的网页加载性能。

  
  

• 使用Application(资源面板)检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。