css基础

2017-07-25 本文已影响0人 liushaung

1.css的全称是什么？

内联方式，指直接在 HTML 标签中的 style 属性中添加 CSS。
<pre> <div style="background: red"></div> </pre>
嵌入方式,指在 HTML 头部中的 <style> 标签下书写 CSS 代码。
<pre><head>
<style>
.content {
background: red;
}
</style>
</head>
</pre>
链接方式, 指使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。
<pre>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</pre>
导入方式, 指使用 CSS 规则引入外部 CSS 文件。
<pre>
<style>
@import url(style.css);
</style>
</pre>
link和@import的区别：
- link属于HTML标签，而@import属于css的语法；link必须在HTML文件中使用，而@import可以在<style>标签或css文件中使用。
- 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

绝对路径：资源相对于跟目录的位置。
- /Users/hunger/project/css/a.css
- /static/css/a.css
相对路径：资源相对于当前目录的位置。
- css/a.css
- ./css/a.css
- b.css
- ../imgs/a.png
网站路径：从网站根目录到文件的路径。
- http: //cdn.jirengu.com/kejian1/8-1.png
- /static/css/a.css/static/css/a.css
- css/a.css

123.png