css样式import的简单介绍

css中link和import的区别

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

创新互联建站制作网站网页找三站合一网站制作公司,专注于网页设计,成都网站设计、成都网站建设,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为1000多家服务,创新互联建站网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!

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可以控制的。

@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

main.css

———————-

@import “sub1.css”;

@import “sub2.css”;

sub1.css

———————-

p {color:red;}

sub2.css

———————-

.myclass {color:blue}

这样更利于修改和扩展。

大致就这几种差别了，其它的都一样，从上面的分析来看，还是使用link标签比较好。标准网页制作加载CSS文件时，还应该选定要加载的媒体（media），比如screen，print，或者全部all等。

提示：这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件。

CSS里 @import用法

引入CSS的方法有两种，一种是@import，一种是link

@import url('地址');

link href="地址" rel="stylesheet" type="text/css" /

现在绝大部分的网站都采用后一种link方式，原因在于

@import先加载HTML，后加载CSS

link先加载CSS，后加载HTML。

所以前者加载网页会出现令浏览者以外的格式，后者则是带格式的加载网页。

css中为什么要把@import放在样式表的最前面?

实际上，@import并不是一定要在最前面

W3C的CSS2.1标准中，对@import作了以下规定：

In CSS 2.1, any @import rules must precede all other rules (except the @charset rule,if present).

在CSS2.1中，任何@import命令必须放在所有其它语句之前（除了用到@charset时）。

而在CSS3标准中，则是这样规定：

Any ‘@import’ rules must follow all ‘@charset’ rules and precede all other at-rules and rule sets in a style sheet.

在样式表中，任何@import命令必须紧跟在@charset命令之后（如果有的话），放在其它@命令和样式语句之前。

还有，@import命令放在注释之后同样生效。你不需要知道为什么，只要记住如果不这样做@import就会失效就行了。假如你一定要追究为什么要做这样的硬性规定，我认为主要出于这样的考虑：

p id="intro" class="frame head"I'm just a p element used test specificity of selectors. So leave me alone!/p

p#intro { font: italic 1em Candara, Arial, sans-serif; }

p.frame { font: bold 3em Arial, Helvetica, sans-serif; }

p { font: italic 2em Georgia, serif; }

你认为页面最终会使用哪条规则的font样式？是第一条p#intro。这里涉及到一个优先级(specificity)的问题：#id .class element(标签名)。所以即便p{font}样式出现在p#intro{font}和p.frame{}之后，最终被应用的还是p#intro{font}。而容易导致问题的是下一种情况：

p.head { font: italic 1em Candara, Arial, sans-serif; }

p.frame { font: bold 3em Arial, Helvetica, sans-serif; }

这次你认为会使用哪条font样式？是第二条p.frame。这里涉及到cascading的问题。p.head的优先级和p.frame的优先级相同，但p.frame写在p.head之后，按规则p.frame的font样式会覆盖p.head的font样式。

在这种情况下，再允许把@import放在一堆样式当中，到底@import引入的样式表中有没有会覆盖当前样式表的条目，诸如此类的判断会更加困难。实际上，即便CSS标准里没有作这样的规定，程序员也还是会这样做，因为这样可以减少很多不必要的麻烦。

关于@import css样式表问题

这里是指相对路径，举个例子比较好理解：

假如有两个样式文件，main.css和index.css（它们在同一文件夹中），我们要在main.css里引用index.css，那么这里的写法就是：

@import url(index.css);