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. Windows下安装youtube-dl(下载各大网站视频)

    youtube-dl干什么用的? 惯例,看官方介绍: youtube-dl is a command-line program to download videos from YouTube.com ...

  2. HTML5基本介绍

    HTML5简介 HTML是互联网上应用最广泛的标记语言.HTML文件就是普通文本+HTML标记,而不同的HTML标记能表示不同的效果.(简单的说HTML是超文本标记语言) HTML5草案的前身名为 W ...

  3. SqlServer数据库技巧

    1.数值转换失败提供默认值 , )) end

  4. Python3-编码问题-解决为何我的python打印总是出现乱码??

    #python3 编码问题: ############举个例子############################### import sys print(sys.getdefaultencodi ...

  5. 高级部分_委托、Lambda表达式、事件

    委托 (1)把方法当作参数来传递的话,就要用到委托: (2)委托是一个类型,这个类型可以赋值一个方法的引用. C#使用一个类分为两个阶段,首先定义这个类,告诉编译器这个类由什么字段和方法组成:然后使用 ...

  6. Java如何创建不存在的指定路径的文件?

    实际应用中,要在指定位置创建一个文件,但文件及文件之前的目录都不存在,此时可用以下方法进行创建. 以下是主要代码: File f = new File("I:" + File.se ...

  7. Java第二次作业第一题

    编写图形界面程序,在窗体中设置菜单栏,在菜单栏上添加"file"菜单,在文件菜单中添加"new"和"quit"两个菜单项,其中"q ...

  8. Spring入门(十四):Spring MVC控制器的2种测试方法

    作为一名研发人员,不管你愿不愿意对自己的代码进行测试,都得承认测试对于研发质量保证的重要性,这也就是为什么每个公司的技术部都需要质量控制部的原因,因为越早的发现代码的bug,成本越低,比如说,Dev环 ...

  9. 第八届蓝桥杯java b组第二题

    标题:纸牌三角形 A,2,3,4,5,6,7,8,9 共9张纸牌排成一个正三角形(A按1计算).要求每个边的和相等.        下图就是一种排法(如有对齐问题,参看p1.png). A       ...

  10. asp.net core3.0 mvc 用 autofac

    好久没有写文章了,最近在用.net core3.0,一些开发中问题顺便记录: 1.首先nuget引入 Autofac Autofac.Extensions.DependencyInjection 2. ...