前端深入之css篇|link和@import到底有什么区别？
写在前面
在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。
而在我们学习之初的外部样式表都是用link引入的，但是当后来我们学习的逐渐深入，发现@import也可以引入样式。那么同样是引入外部样式，这两者有什么区别呢，下面请跟随我来详细了解一下link和@import的区别吧！
区别
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" >
<style type="text/css" >
@import url("./myCss.css");
</style>
</head>
</html>
这就是两种引用方式的常见用法，可以很清晰的看出
- 1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。
- 2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。
- 3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 HTML 标签，所以不存在兼容性问题。
- 4、DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。
- 5、link方式的样式权重高于@import的权重。（如果对权重不是十分了解，可以看我之前的文章）
@import最优写法
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。
结论
@import是依赖css的，存在一定的兼容问题，并且根据浏览器渲染机制来说，他在dom树渲染完成后才会渲染，并且不能被js动态修改。
相比之下link兼容性较好，且dom元素的样式可以被js动态修改，又因为link的权重高于@import，所以 @import适用于引入公共基础样式或第三方样式，link适用于自己写的且需要动态修改的样式。
经过实际的运用，相信在你真正书写和调整样式时一定可以如鱼得水。
结语
以上就是本文章的全部内容了，如果有不正确的地方欢迎指正。
感谢您的阅读，如果感觉有用不妨点赞/转发。
前端深入系列是一个踩坑系列，是由我本人对工作和学习中所遇到的问题和踩过的坑的一个探索与总结，在此记录分享出去，同时也是对自我技能的一个反思和追问。
前端路漫，踩坑不断。
前端深入系列持续更新中……
以上2019-10-08。
前端深入之css篇|link和@import到底有什么区别？的更多相关文章
- 引用外部CSS的link和import方式的分析与比较
很多网页中的 CSS 链接与引用是这样写的: <style type="text/css" media="screen"> @import url( ...
- [转] Web前端优化之 CSS篇
原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...
- 前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...
- 调用css时，用link 和 @import url 有什么区别
加载css link与@import的区别: 其实 link 与 @import 在显示效果上还是有很大区别的,基本上来看 link 的加在会在页面显示之前全部加在完全,而 @import 会是读取完 ...
- CSS中link与import的区别
一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...
- 页面引入css用link和import的区别
假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel=&qu ...
- 前端编码规范 -- css篇
合理的避免使用ID 一般情况下ID不应该被应用于样式. ID的样式不能被复用并且每个页面中你只能使用一次ID. 使用ID唯一有效的是确定网页或整个站点中的位置. 尽管如此,你应该始终考虑使用class ...
- CSS中link和@import的使用区别
我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML ...
- link和import导入外部样式的区别
1.结构 link语法结构 <link rel="stylesheet" href="CSSurl" type="text/css" ...
随机推荐
- 2019杭电多校 hdu6659 Acesrc and Good Numbers
http://acm.hdu.edu.cn/showproblem.php?pid=6659 题意:给你d,x,让求满足f(d,n)=n的最大n(n<=x),其中f(d,n)表示数字d在从1到n ...
- HDU-DuoXiao第二场hdu 6315 Naive Operations 线段树
hdu 6315 题意:对于一个数列a,初始为0,每个a[ i ]对应一个b[i],只有在这个数字上加了b[i]次后,a[i]才会+1. 有q次操作,一种是个区间加1,一种是查询a的区间和. 思路:线 ...
- POJ-1062 昂贵的聘礼( 最短路 )
题目链接:http://poj.org/problem?id=1062 Description 年轻的探险家来到了一个印 第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用1000 ...
- CodeForces 821D Okabe and City
Okabe and City 题解: 将行和列也视为一个点. 然后从普通的点走到行/列的点的话,就代表这行/列已经被点亮了. 然后将费用为0的点建上边. 注意讨论(n,m)非亮的情况下. 代码: #i ...
- 【Offer】[18-2] 【删除链表中重复的节点】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3- ...
- Scrum团队的最佳规模？
无论你在小型创业公司工作还是在大公司的新产品线工作,当团队人数越来越多时总会达到一个临界点.尽早识别这个临界点可以让您的团队避免进入低效阶段.每个产品都是不同的,团队合作也是如此.因此,拆分团队也需要 ...
- （六十五）c#Winform自定义控件-思维导图/组织架构图（工业）
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...
- Go第三方日志库logrus
日志是程序中必不可少的一个环节,由于Go语言内置的日志库功能比较简洁,我们在实际开发中通常会选择使用第三方的日志库来进行开发.本文介绍了logrus这个日志库的基本使用. logrus介绍 Logru ...
- java多线程之ScheduleThreadPoolExecutor
ScheduledThreadPoolExecutor 介绍 ScheduledThreadPoolExecutor 是一个可以实现定时任务的 ThreadPoolExecutor(线程池).比 ...
- 玩转 SpringBoot 2 快速整合 | FreeMarker篇
FreeMarker 介绍 Apache FreeMarker™是一个模板引擎:一个Java库,用于根据模板和更改数据生成文本输出(HTML网页,电子邮件,配置文件,源代码等).模板是用FreeMar ...