css的引入方式和区别

一、css的四种引入方式

1.内联式引用：直接用在标签上，但维护成本高

style='font-size:16px;color:#000000'

2.外部连接式引用：css代码与html代码分离，便于代码重复使用

<link href="css/style.css" type="text/css" rel="stylesheet" />

style.css文件内容如右：

.font{color:blue;font-size:12px;}

3.内部式引用：页面较为清晰，但不能被别的页面使用

<style type='text/css'>
    .font{color:blue;font-size:12px;}
</style>

4.外部导入式：可以在一个HTML文件中导入多个样式表。类似于外部链接式引用
    在HTML文件中head标签中加入

<style type='text/css'>
    @import url('./style/style.css');
</style>

 二、链接link和导入import的区别

1. link标签是属于xhtml范畴，而@import则是css2.1中特有的。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 

2. 加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@import则在整个页面加载完成后才加载。

3. 兼容性的区别，因@import是CSS2.1才特有的，所以对于不兼容CSS2.1的浏览器来说，无效。

4. 在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别，此时@import就无能为力了。