写在前面

在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。

而在我们学习之初的外部样式表都是用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到底有什么区别？的更多相关文章

  1. 引用外部CSS的link和import方式的分析与比较

    很多网页中的 CSS 链接与引用是这样写的: <style type="text/css" media="screen"> @import url( ...

  2. [转] Web前端优化之 CSS篇

    原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...

  3. 前端开发之css篇

    一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...

  4. 调用css时，用link 和 @import url 有什么区别

    加载css link与@import的区别: 其实 link 与 @import 在显示效果上还是有很大区别的,基本上来看 link 的加在会在页面显示之前全部加在完全,而 @import 会是读取完 ...

  5. CSS中link与import的区别

    一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...

  6. 页面引入css用link和import的区别

    假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel=&qu ...

  7. 前端编码规范 -- css篇

    合理的避免使用ID 一般情况下ID不应该被应用于样式. ID的样式不能被复用并且每个页面中你只能使用一次ID. 使用ID唯一有效的是确定网页或整个站点中的位置. 尽管如此,你应该始终考虑使用class ...

  8. CSS中link和@import的使用区别

    我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML ...

  9. link和import导入外部样式的区别

    1.结构 link语法结构 <link rel="stylesheet" href="CSSurl" type="text/css" ...

随机推荐

  1. 提升RabbitMQ消费速度的一些实践

    RabbitMQ是一个开源的消息中间件,自带管理界面友好.开发语言支持广泛.没有对其它中间件的依赖,而且社区非常活跃,特别适合中小型企业拿来就用.这篇文章主要探讨提升RabbitMQ消费速度的一些方法 ...

  2. CF #535 (Div. 3) E2 Array and Segments (Hard version) 利用线段树进行区间转移

    传送门 题意:    有m个区间,n个a[ i ] , 选择若干个区间,使得整个数组中的最大值和最小值的差值最小.n<=1e5,m<=300; 思路: 可以知道每个i,如果一个区间包含这个 ...

  3. HDU - 4305 - Lightning 生成树计数 + 叉积判断三点共线

    HDU - 4305 题意: 比较裸的一道生成树计数问题,构造Krichhoof矩阵,求解行列式即可.但是这道题还有一个限制,就是给定的坐标中,两点连线中不能有其他的点,否则这两点就不能连接.枚举点, ...

  4. 什么是Werkzeug

    上一节介绍了什么是WSGI,这一节我们看看Werkzeug 按照官方的说法,Werkzeug(源自德语,工具的意思)是一个WSGI工具库,它开始于一个适用于WSGI的多样化的工具集,后来发展成了现在非 ...

  5. Python---网络爬虫初识

    1. 网络爬虫介绍 来自wiki的介绍: 网络爬虫(英语:web crawler),也叫网上蜘蛛(spider),是一种用来自动浏览万维网的网络机器人. 但是我们在写网络爬虫时还要注意遵守网络规则,这 ...

  6. SVN分支与主干合并

    1.主干合并到分支 1在本地trunk中先update一下,有冲突的解决冲突,保证trunk和repository已经完全同步, 2.在/branches /MyProject上右键,依次选择”Tor ...

  7. 【入门】广电行业DNS、DHCP解决方案详解（三）——DNS部署架构及案

    [入门]广电行业DNS.DHCP解决方案详解(三)——DNS部署架构及案 DNS系统部署架构 宽带业务DNS架构 互动业务DNS架构 案例介绍 案例一 案例二 本篇我们将先介绍DNS系统部署架构体系, ...

  8. 阿里云 windows frp 远程桌面

    环境: 阿里云服务器 server 2008 ,想要被远程访问的终端(本机)是win7 x64 目的:实现在别的地方(家里,出差在外) 用 远程桌面 访问 位于公司内部的电脑 frp 介绍:https ...

  9. 005 Python开发环境配置

    目录 一.概述 二.Python语言概述 2.1 Python语言的诞生 2.2 Monty Python组合 三.Python语言系统开发环境配置 四.Python程序编写与运行 4.1 Pytho ...

  10. ubuntu16.04设置bind9.10.3的chroot运行

    重点:1)系统是ubuntu的16.04 bind9.10.3 2)确保你的系统是没问题的,我之前的16.04有问题,在虚拟机上怎么都操作都不行, 在/var/log/syslog可以看到:could ...