css中 link 和 @import 区别

最新推荐文章于 2022-06-07 15:20:43 发布

橙橙橙橙橙橙

最新推荐文章于 2022-06-07 15:20:43 发布

阅读量675

点赞数

本文链接：https://blog.csdn.net/chenghuimei/article/details/82116961

版权

介绍link和@import 区别之前，我想先总结一下页面引入样式的几种方式：

1、行内样式

<div style="font-size:12px">今天天气不错</div>

2、内嵌式

<html>
<head>
    <style>
        .test{font-size:12px}
    </style>
</head>
<body>
    <div class="test">今天天气不错</div>
</body>
</html>

3、链接式

<link href="style.css" rel="stylesheet">

4、导入式
a、在html中直接导入

<html>
<head>
    <style>
	    @import url('style.css');
    </style>
</head>
<body>
    <div class="test">今天天气不错</div>
</body>
</html>

b、在css文件中导入

@import url('style.css'); /*必须要在样式顶部*/
*{
	padding: 0;
	margin: 0;
}
body{
	color: red;
	font-size: 10px;
}

需要注意的是，a中@import和link方式的优先级是以加载顺序为参考，后加载的优先级高。b中link方式优先级高于@import方式。还要注意的一点是在样式表中导入css文件，必须放在头部最先声明，并且其后的分号是必须的，如果省略分号，样式无法正确导入，还会报错。

link和@import的区别

a、link方式引用的css会在页面加载的时候同时加载，@import引用的方式会等到页面加载完以后加载，有时候会出现一开始没有css样式，闪烁一下出现样式的情况。

b、link是XHTML标签，还可以定义RSS等其他事物；@import属于css2范畴，只能加载css。

c、link无兼容问题，@import是css2.1提出的，IE5以下浏览器不支持，现在来说已经不是问题了。

d、使用js控制dom改变样式只能使用link标签，@import不支持。（附上dom通过link标签改变样式的链接https://blog.csdn.net/u012532033/article/details/66473440）

@import的优势：
import这种方式通常会在CSS文件中使用，把多个样式表导入到一个样式表中，在页面里面只需要导入一个样式表即可。便于修改和扩展。（JavaScript DOM编程艺术第12章 12.3小结采用这种方式）

关注