link和@import之间的区别

link和@import都可以导入css样式，但是他们之间有什么区别？
区别：
1.link不仅可以导入样式表，还可以导入其他如如favicon，但@import只能导入样式表
2.link是XHTML语法，不存在兼容问题，但是@import是在css2.1才提出，在IE5+后才支持，所以对低版本的浏览器不兼容
3.可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
4.link是在页面加载的的同时一起加载的，@import是页面加载完毕后才加载的
5.link引入的样式权重大于@import引入的样式（有争议）

关于5，link的权重比@import的大，说法应该是不正确的（如果有其他看法欢迎评论留言）。
我写了个很简单的demo

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/link样式表.css"><style>@import url(./css/@import的样式表.css);</style></head>
<body><div class="outer"><div class="inner"><p style="color: #fff;">我是行内样式</p><p>我是最普通的p标签</p><p>我是加了选择器的p标签</p></div></div>
</body>
</html>

@import的样式表

.outer{background: blue;
}
.inner{background: red;
}

link样式表

*{padding: 0;margin: 0;color: #000 !important;
}
.outer{width: 200px;height: 200px;background: red;margin: 0 auto;
}
.inner{width: 100px;height: 100px;background: blue;margin: 0 auto;
}
.inner>p{color: #666;
}

当把link放在import之前

当把link放在@import后

放的位置不一样导致了两个div的颜色发生改变，相同权重下，在后面写的同名样式覆盖掉了前面写的同名样式，所以并没有存在link的权重会比@import的大

link和@import之间的区别相关推荐

[html] 页面导入样式时，使用link和@import有什么区别？
[html] 页面导入样式时,使用link和@import有什么区别? 区别: 1.link是HTML标签,@import是css提供的. 2.link引入的样式页面加载时同时加载,@import引入 ...
前端学习（46）：页面导入样式时，使用link和@import有什么区别？
用法 import的写法 <style type="text/css"> @import url("a.css"): < ...
页面导入样式时，使用link和@import有什么区别？
用法区别:  <head><link rel="stylesheet" href=""> &l ...
UI设计师必知：link和@import引用css文件方法的区别
<link>元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法: 1 使用<link>元素链接到 ...
添加css的方式：link与@import区别
如何在html中添加css? 在html中设置css共有三种方式,分别是: 行内式内嵌式导入式-link 导入式-@import 1.行内式.即在html标签中的style属性中设置css,值得注 ...
link和import的区别,src和href的区别，css hark 以及HTML5及css3的新增特性
link和import的区别 link是标签浏览器会在一开始就渲染样式而import是引入会在最后引入 link是XHTML标签,无兼容问题:@import是在CSS2提出的,低版本的浏览器不支持 l ...
herf、src和link与@import的区别
前言我们在开发页面的时候,有时候需要需要引用一些外部的资源,经常分不清一些链接,下面我们就来谈谈它们之间到底分别是什么,这样使用的时候就做到心中有数. 一.link和@import的区别两者都是外 ...
网页编程html link,Web--CSS控制页面（link与import方式区别）详解
先了解: [1] "Table"和"DIV"这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面 ...
外部引用CSS中 link与@import的区别
这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import. 本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 差别1:老祖宗的差别.link ...

link和@import之间的区别

link和@import之间的区别相关推荐

最新文章

热门文章