前端深入之css篇|link和@import到底有什么区别?
2024-10-06 11:35:08
写在前面
在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式。
而在我们学习之初的外部样式表都是用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。
最新文章
- Ionic2系列——在Ionic2中使用ECharts
- 第1个linux驱动___打印";hello world";
- 互联网HTTP连接等出错代码大全
- CS找工作好文章
- iOS iOS9下修改回HTTP模式进行网络请求
- jdk1.6与1.7垃圾回收
- ORACLE中主键约束跟唯一索引的区别
- git基本概念
- 切面编程AOP之KingAOP
- 【转】RCP中org.eclipse.core.runtime.CoreException
- java传值和传引用区别
- 利用Vmware 创建Linux虚拟机的方法
- Linux&#160;为linux&#160;enterprises&#160;6安装图形桌面教程
- 实例对比 hibernate, spring data jpa, mybatis 选型参考
- 生产环境部署MongoDB副本集(带keyfile安全认证以及用户权限)
- innobackupex per table
- Kettle 4.2源码分析第二讲--Kettle插件结构体系简介
- 2018.07.22哨戒炮 II(树形dp)
- 从Runoob的Django教程学到的
- Dubbo实践(二)架构
热门文章
- 洛谷P1246编码问题-排列组合,分类讨论
- ccpc网赛 hdu6705 path(队列模拟 贪心
- go从文件中读取json字符串并转换
- Codeforces Round #480 (Div. 2) A. Links and Pearls
- codeforces 245 D. Restoring Table(位运算+思维)
- CF934A A Compatible Pair
- Vue源码中compiler部分逻辑梳理(内有彩蛋)
- mybatis plus使用redis作为二级缓存
- 微服务时代之自定义archetype(模板/骨架/脚手架)
- 全网最实用的 Debug调试技巧汇总-Python大佬偷偷使用的神技