CSS基础知识

CSS的全称是什么？

层叠样式表(英文全称：Cascading Style Sheets)，是一种用来表现HTML或XML等文件样式的计算机语言。

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

CSS的引入一般有三种：

• 外部资源引入

@import "../../css/xxx.css```
- style标签引入
`<style type="text/css">`
- 内联style属性
`<p style="color:red; font-size:12px;">123</p>`

link和@import的引入方式有以下区别：
- link属于HTML，通过<link>标签中的href属性来引入外部文件，而@import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件
- link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后加载。
- link支持使用JS控制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 绝对路径，本地绝对路径中的a.css文件
- /static/css/a.css 当前服务器根目录下/static/css/中的a.css
- http://cdn.jirengu.com/kejian1/8-1.png 网站中的地址

#####如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
可以使用以下方法：
- 可以直接将图片上传到服务器，在页面使用这张图片
- 如果这个图片本来就存在网络上其他的服务器上，可以直接使用图片的网络链接的方式在页面上添加url引用这张图片

#####列出5条以上html和 css 的书写规范
1. 统一使用小写
2. 尽量不使用内联样式的style元素定义样式
3. id和class使用有意思的单词
4. 块内容缩进
5. 冒号后面加一个空格隔开

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

![00.png](https://img.haomeiwen.com/i5192284/ae54c7aadf1da19b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- Elements：查看当前页面的元素
- Console：记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell
- Sources： 资源信息，可用于对JS进行断点调试
- Network： 从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化
- Timeline： 记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能
- Application： 记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等
- style：查看样式信息，可以调试CSS