CSS基础

CSS的全称是什么?

CSS：层叠样式表（casecating style sheet），是对html元素的式样进行定义，比如颜色，位置，是否有边框等等。

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

• 行内式
  

• 内嵌式

hello word

• 链接式

• 导入式

link 和@import 的区别

1. link是HTML标签；@import属于CSS范畴，只能加载CSS。
2. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3. link是HTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4. link支持使用Javascript控制DOM去改变样式；而@import不支持。

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

• 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

相对路径

文件路径	代表意思
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目录下的a.css文件

网站路径

文件路径	代表意思
/static/css/a.css	该网站目录下/static目录下的/css目录下的/a.css文件（相对路径）
http://cdn.jirengu.com/kejian1/8-1.png	jirengu.com网站目录下的8-1.png图片（绝对路径）

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

1. 将本地图片上传到服务器中，使用相对路径获取这个图片。
2. 网络图片，取得网络图片的网络地址（绝对路径），直接使用这个网络地址即可。

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

• 语法不区分大小写，但建议统一使用小写
• 不使用内联的style属性定义样式
• id和class使用有意义的单词，分隔符建议使用-
• 有可能就是用缩写
• 属性值是0的省略单位
• 块内容缩进
• 属性名冒号后面添加一个空格

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

• Elements
  允许我们从浏览器的角度看页面，可以看到chrome渲染页面所需要的的HTML、CSS和DOM对象。此外，还可以编辑这些内容更改页面显示效果。
• Console
  显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。
• Sources
  用于查看和调试当前页面所加载的脚本的源文件。
• Network
  可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等。
• Performance
  提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Performance中。
• memory
  实时监视当前页面使用的内存量。
• Application:
  对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑。
• Security
  判断当前网页是否安全。
• Audits
  分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案。