CSS基础

1. CSS的全称是什么?

全称为Cascading Style Sheets，层叠样式表。用于给网页内容定义样式。

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

2.1 CSS有几种引入方式?

内联样式

例如

内部样式

用style标签定义class，一般放在head标签内
例如

饥人谷

外部样式

• 使用link链接引入的方式来加入样式，放在header里去

• 使用@import放入style内引入CSS

2.2 link 和@import 有什么区别?

• 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.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
  网址路径

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

• 将图片上传至服务器，并通过相对路径调用图片
• 将图片上传至网络并获取图片对应的网址链接，通过网址路径对图片进行调用

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

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

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

微信截图_20170506101952.png