css文件引入方式link与@import的区别与权重问题

最新推荐文章于 2021-10-19 09:05:10 发布

辣馍

最新推荐文章于 2021-10-19 09:05:10 发布

阅读量990

点赞数 1

分类专栏： div+css布局文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/weixin_42864357/article/details/114687546

版权

div+css布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css引入方式link与import的区别

1、link属于html标签，而@import是css提供的，只能加载CSS
2、加载顺序，link在页面加载时被加载，@import在页面加载完之后再加载
3、link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
4、可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式

css引入方式可分为link引入与@import引入，下面来分析二者的权重问题

1、首先是link引入的 link.css 文件

button{
	background: green;
}

2、接下来是import引入的import.css文件

button{
	background: red;
}

3、下面测试link引入方式在前，import方式在后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" rev="stylesheet" href="./link.css" type="text/css" >
		<style type="text/css" >   
			@import url("./import.css");   
		</style>
	</head>
	<body>
		<button type="button">测试link与@import权重问题</button>
	</body> 
</html>

结果：按钮为红色，代表import.css样式覆盖了link.css
在这里插入图片描述
4、下面测试import方式在前，link方式在后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css" >   
			@import url("./import.css");   
		</style>
		<link rel="stylesheet" rev="stylesheet" href="./link.css" type="text/css" >
	</head>
	<body>
		<button type="button">测试link与@import权重问题</button>
	</body> 
</html>

结果：按钮为绿色，代表link.css样式覆盖了import.css样式
在这里插入图片描述

结论：import与link样式权重主要取决于代码加载顺序，后面样式覆盖前面样式。
注意：一般尽量避免使用import方式，且import方式引入放在最下方，用于页面美化。

辣馍

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css文件引入方式link与@import的区别与权重问题

css引入方式link与import的区别1、link属于html标签，而@import是css提供的，只能加载CSS2、加载顺序，link在页面加载时被加载，@import在页面加载完之后再加载3、link是html标签，因此没有兼容性，而@import只有IE5以上才能识别4、可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式css引入方式可分为link引入与@import引入，下面来分析二者的权重问题1、首先是l
复制链接

扫一扫