引入CSS文件的@import与link的权重分析

我很少在CSS用到@import这个标签，最近看到一句话“~~link方式的样式的权重高于@import的权重~~”，感觉不太对，@import只是一个引入外部文件而已，怎么会有高于link的权重呢？于是我比较懒，直接在一个静态页面里面测试了一下，分别把@import的样式放置在link的前面和后面测试，结果发现前面的被后面的link所覆盖，也就是说这个说法是错误的。

因而得出结论（只考虑html中样式文件的优先级）：

当@import与内联样式一起时，内联样式>导入样式
除了第一种情况，其它时候以样式加载顺序为参考，后加载的优先级越高（最近优先原则）

最后，其实这种@import文件导入的方式已经很少用了，个人建议用link方式。

原因是link载入时是和HTML的载入同步加载的，而@import则是在页面内容载入完成之后再引用的。如果网速慢的话，可能会导致页面的样式混乱。

另外使用@import时要注意添加地方，在CSS手册中提到：

该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
IE使用@import无法引入超过35条的样式表。

转载于:https://www.cnblogs.com/gyjWEB/p/4581591.html

引入CSS文件的@import与link的权重分析相关推荐

前端面试之---link 引入css文件和@import引入css文件的区别
css引入方式link与import的区别 1.link属于html标签,而@import是css提供的,只能加载CSS 2.加载顺序,link在页面加载时被加载,@import在页面加载完之后再加载 ...
html文件中用import,@import引入CSS文件
@import url (url) sMedia ; 注明: url : 运用相对于或相对地点指定导入的内部花色表文件.至关于link引入CSS文件.(理解link与@import判袂和如何决意) c ...
import引css,@import引入CSS文件的方法
@import引入CSS文件的方法发布时间:2020-09-26 13:58:39 来源:亿速云阅读:61 作者:小新小编给大家分享一下@import引入CSS文件的方法,相信大部分人都还不怎么 ...
link标签引入.css文件（目的）：适配不同屏幕
link标签引入.css文件(目的):适配不同屏幕本文 · 参考博客:https://blog.csdn.net/nianzhi1202/article/details/52464078 附 · 参 ...
HTML中引入CSS文件的几种方法
概况来说有以下四种: 1.行内式:也称内联式,在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势: 2.嵌入式:将CSS样式集中写在网页的<head></head ...
html如何引入css文件？HTML引入外部css文件的四种方法
在学习前端的时候,我们应该知道css给html标记添加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容.既然css是用来给html添加各种样式的,那么,html中如何引入外部的css文呢?本篇 ...
html怎么引入本地css文件路径,html如何引入css文件
引入方法:1.使用link标签引入,语法"":2.在stylet标签中,使用"@import"规则引入,语法"@import url(css文件地址) ...
web项目html引入css文件路径,详解Webpack和Webpack-simple中如何引入CSS文件_旧店_前端开发者...
博主最近研究首先说一下如何在webpack中引入之后在App.vue文件中在style标签项目写入你想要引入的样式: 本例引入的样式是一个名为nam.css的文件,该文件只是让页面变蓝,之后运行即 ...
html引入css文件和js文件方式
<link rel="stylesheet" href="../theme/default/style.css" type="text/css& ...

引入CSS文件的@import与link的权重分析

引入CSS文件的@import与link的权重分析相关推荐

最新文章

热门文章