CSS基础

CSS的全称是什么?

• CSS是Cascading Style sheets的简称。层叠样式表，用于控制页面的样式。

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

• CSS有4种引用方式。行内样式，内联样式，外联样式，@import引入。
• link与@import的区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

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

• 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 ： 绝对地址/Users/hunger/project/css/a.css
• /static/css/a.css ： 站点下static/css/a.css
• http://cdn.jirengu.com/kejian1/8-1.png ： 网址为http://cdn.jirengu.com/kejian1/8-1.png的文件

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

• 如果是本地图片把图片上传到服务器，使用相对路径
• 如果是网络图片，使用图片的链接

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

• 语法不区分大小写，但建议统一使用小写
• div尽量在三层以内，还是从seo方面考虑
• 不使用内联的style属性定义样式
• 属性值是0的省略单位
• 块内容缩进
• 属性名冒号后面添加一个空格

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

• Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。

  
  
  

  1.png

• Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。

  
  
  

  2.png

• Sources:断点调试JS

  
  
  

  3.png

• Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。

  
  
  

  4.png

• Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
  

  6.png
  
  

  -Security:判断当前网页是否安全。

  
  
  

  7.png

• Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

  
  
  

  8.png