在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式。
而在我们学习之初的外部样式表都是用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>
这就是两种引用方式的常见用法,可以很清晰的看出
@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。
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论