link语法结构:

  <link href="url" rel="stylesheet" type="text/css">

@import语法结构:

@import url 多用于css文件中,把多个样式表导入到一个样式表中,在页面里面只需要导入一个样式表即可,便于修改和扩展

1.在html中

  <style>

    @import url

  </style>

2.在css中

@import url

link 和 @import 的区别:

1.语法结构的不同

2.本质不同

属于标签,只能放入html源码里进行使用,而@import可以看作为css样式,可以引入css样式(属于html标签,而@import是css提供的)

3.页面加载

页面加载时,会被同时被加载,而@import引用的css会等到页面被加载完的时候再加载

4.兼容性。

@import只有在IE5以上才能被识别,而是html标签,无兼容问题

5.优先级

不管是还是@import ,优先级按加载顺序为参考,后加载的优先级高

6.可控性

使用js控制dom改变样式只能使用标签

为什么要避免使用css @import

在web前端优化的建议中,不建议使用css @import 因为这种方式加载css相当于把css放在了底部,因此@import会在网页加载中增加延迟

至于为什么会增加延迟是因为使用@import引用的文件只有字引用它的那个css文件被下载、解析后,浏览器才会知道还有另一个css需要下载,这时才会去进行想在,然后再解析、构建render tree等一系列操作。因此css @import引起的css解析延迟会加长页面留白期,所以要尽量避免css @import,采用标签的方式引入

link 和 @import 的区别是什么?的更多相关文章

  1. CSS引入的方式有哪些? link和@import的区别是?转载

    CSS引入的方式有哪些? link和@import的区别是? HTML 中引入 CSS 的方式 有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS ...

  2. CSS引入的方式有哪些? link和@import的区别是?

    CSS引入的方式包括内联 内嵌 外链 导入 link和@import的区别是 : ①link属于XHTML标签,除了加载CSS外,还能 用于定义RSS, 定义rel连接属性等作用:而@import是C ...

  3. CSS中link和@import的区别是:

    Link属于html标签,而@import是CSS中提供的 在页面加载的时候,link会同时被加载,而@import引用的CSS会在页面加载完成后才会加载引用的CSS @import只有在ie5以上才 ...

  4. link和@import的区别是什么 ?

    1.link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务:@import属于CSS范畴,只能加载CSS. 2.link引入CSS是,在页面载入时间同时加载:@import页面网页完全 ...

  5. css 引入的方式有哪些, link和@import的区别是什么

    有四种形式: 1.链入外部样式表,就是把样式表保存为一个样式表文件,然后在页面中用<link rel = "stylesheet" type="text/css&q ...

  6. link与@import的区别

    我们都知道link与@import都可以引入css样式表,那么这两种的区别是什么呢?先说说它们各自的链接方式,然后说说它们的区别~~~ link链入的方式: <link rel="st ...

  7. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  8. link和Import区别

    本篇文章重点: link引用CSS时,在页面载入时同时加载: import需要页面完全载入后加载: link支持使用javascript控制DOM去改变样式,而Import不支持 下面待我娓娓道来: ...

  9. 添加css的方式:link与@import区别

    如何在html中添加css? 在html中设置css共有三种方式,分别是: 行内式 内嵌式 导入式-link 导入式-@import 1.行内式.即在html标签中的style属性中设置css,值得注 ...

随机推荐

  1. 【Offer】[55-2] 【平衡二叉树】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一棵二叉树的根节点,判断该树是不是平衡二叉树.如果某二叉树中任意节点的左.右子树的深度相差不超过1,那么它就是一棵平衡二叉树.例如, ...

  2. SpringBoot系列__02HelloWorld探究

    在前文中,我们创建了一个简单的hello world,现在,利用这个简单的程序,来简单分析一下SpringBoot的启动过程. 如果你是使用过SSM框架的人,尤其是4.0之前的版本,相信你使用过xml ...

  3. 第 15 篇:优化博客功能的细节,提升使用体验—— HelloDjango 系列教程

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 在之前的系列教程中,我们已经实现了:文章的发布.展示.评论等功能,可能认真的小伙伴已经 ...

  4. 时间复杂度big-O、Big-Omega和big-Theta

    我们有三种曲线:   A curve that we know is "above" the running time function when n is large. ( Bi ...

  5. KafkaProducer源码分析

    Kafka常用术语 Broker:Kafka的服务端即Kafka实例,Kafka集群由一个或多个Broker组成,主要负责接收和处理客户端的请求 Topic:主题,Kafka承载消息的逻辑容器,每条发 ...

  6. java.lang.UnsupportedClassVersionError:JDK版本不一致报错

    交代一下背景:公司运行的一个上线项目,打了个补丁发给客户后,反馈说运行不了.把源码拿回来场景重现.贴上报错信息: 08-15 14:13:29 ERROR doPost(jcm.framework.r ...

  7. elk安装和使用

    elk安装和使用 使用的版本都是5.2.0 elasticsearch-5.2.0安装 在官网 下载 elasticsearch tar包 解压安装 tar zxf elasticsearch-5.2 ...

  8. Net基础篇_学习笔记_第九天_数组_冒泡排序(面试常见题目)

    冒泡排序: 将一个数组中的元素按照从大到小或从小到大的顺序进行排列. for循环的嵌套---专项课题 int[] nums={9,8,7,6,5,4,3,2,1,0}; 0 1 2 3 4 5 6 7 ...

  9. STL中的unique和unique_copy函数

    一.unique函数 这个函数的功能就是删除相邻的重复元素,然后重新排列输入范围内的元素,并返回一个最后一个无重复值的迭代器(并不改变容器长度). 例如: vector<); ; i < ...

  10. Linux 笔记 - 第十三章 Linux 系统日常管理之(二)Linux 防火墙和任务计划

    博客地址:http://www.moonxy.com 一.前言 Linux 下的的防火墙功能是非常丰富的,作为 Linux 系统工程师有必要了解一下.防火墙一般分为硬件防火墙和软件防火墙.但是,不管是 ...