CSS基础

1. CSS的全称是啥？

cascading style sheets，中文翻译为层叠样式表。

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

有三种引入样式：

• 内联样式，<div style="background-color: red;"></div>。
• 内部样式，

<style>
        div {
            background-color: red;
        }
</style>

• 外部样式，外部样式还需要使用link标签引用。

div {
            background-color: red;
}

link和@import的区别：

1.本质：link是html标签，link可以放在HTML中的任何位置，而@import是CSS方法，放在样式当中。
2.加载速度：页面加载时，因为link是HTML标签，所以会被先加载，然后页面加载完之后，再加载CSS中的@import。
3.兼容性：link标签属于HTML标签，不存在兼容性的问题。而@import是语法，只支持IE5以上的浏览器。
4.是否支持JS：当使用JS修改DOM元素的样式时，只能使用link方式，而不能使用@import，因为@import属于CSS语法，不支持JS。

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

1. css/a.css
2. ./css/a.css
3. b.css
4. ../imgs/a.png
5. /Users/hunger/project/css/a.css
6. /static/css/a.css
7. http://cdn.jirengu.com/kejian1/8-1.png

• 1，2，3，4为相对路径，网站的文件提交给服务端之后，一般使用相对路径来引入CSS或图片资源。相对路径是相对于网站文件本身，比如说b.css就是与自身处于同一根目录下的文件。css/a.css等同于./css/a.css，它表示处于上一级的目录文件。而../imgs/a.png则表示根目录下的文件。
• 5为绝对路径，一般用于获取本地路径，不适用于网站文件提交中的路径。
• 6，7为网站路径，6在提交网站文件后，会在服务器端主域名下寻找该地址的文件。而7是一个已经生效的网址，直接通过该网址来引用相关文件，而无需在主域名下寻找。

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

将该图片放在服务器端，生成一个网址，然后在js.jirengu.com上面引用即可。

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

1. 语法不区分大小写，但一般默认使用小写。
2. id使用驼峰法命名，class命名时使用 “ - ” 连接。
3. id和class命名时尽量使用有意义的英文单词，能缩写就缩写。
4. 写CSS的时候冒号后面加个空格，让代码看起来更整洁。
5. 块内容缩进。
6. 属性值是0的省略单位。

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

快捷键F12进入开发者工具调试页面。

chrome调试工具介绍.png sources.png applications.png