1.结构

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

import语法结构

<style type="text/css">
@import url(CSSurl);
</style>

2.应用场景
link标签只能在html页面中用来引用css,
而import可以在css中引用其他css。
在css中直接使用
@import url(CSSurl);

3.老祖宗的差别
link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以定义RSS,定义rel连接属性等,@import就只能加载CSS。

4.加载顺序

当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。


5.兼容性

@import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识识别,而link标签无此问题。


6.使用dom控制样式时的差别

使用link标签添加的样式可以被Javascript的Dom获取以对其修改,而@import不是dom可以控制的.

link和import导入外部样式的区别的更多相关文章

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

    差别一:link 属于 XHTML 标签,而 @import 完全是 CSS 提供的 一种方式.link标签除了可以加载 CSS 外,还可以做很多事情,比如定义 RSS ,定义 rel 链接属性等.  ...

  2. link和@import引入外部样式的区别

    原文: 简书原文:https://www.jianshu.com/p/14f99062f29a 大纲 前言 1.隶属上的差别 2.加载顺序的不同 3.兼容性上的差别 4.使用DOM控制样式时的差别 5 ...

  3. link与@import导入css样式区别

    XML/HTML代码<link rel="stylesheet" rev="stylesheet" href="CSS文件" type ...

  4. link和@import导入css文件的区别

    (二者的区别其实是基础问题,但由于本人经常会忽略掉使用@import导入css文件这种方式,所以记录下来增加印象^^) 首先二者的引入方式: link:<link rel="style ...

  5. 前端深入之css篇|link和@import到底有什么区别?

    写在前面 在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式. 而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式 ...

  6. 调用css时,用link 和 @import url 有什么区别

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

  7. link和@import引入css的区别

    @import是在CSS2.1提出的,低版本的浏览器不支持.link支持良好: link引用CSS时,在页面载入时同时加载: @import需要页面网页完全载入以后加载.如果页面内容过多,会产生不好的 ...

  8. css 样式引入的方法 link 与import的区别

    <link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到 ...

  9. @import导入外部样式表与link链入外部样式表的区别

    昨天碰到同事问了一个问题,@impor导入外部样式与link链入外部样式的优先级是怎样的,为什么实验的结果是按照样式表导入后的位置来决定优先级. 今天就这个问题,度娘上找了很久,终于有个总结性的答案出 ...

随机推荐

  1. HDU2057 A + B Again

    Problem Description There must be many A + B problems in our HDOJ , now a new one is coming. Give yo ...

  2. 在ubuntu16.04中安装apache2+modsecurity以及自定义WAF规则详解

    一.Modsecurity规则语法示例 SecRule是ModSecurity主要的指令,用于创建安全规则.其基本语法如下: SecRule VARIABLES OPERATOR [ACTIONS] ...

  3. 使用MVVM减少控制器代码实战(减少56%)

    减少比例= (360(原来的行数)-159(瘦身后的行数))/360 = 56% 父类 MVC 和MVVM 前后基本不动 父类主要完成如下三个功能: 1)功能:MJRefrsh +上拉下拉没有更多数据 ...

  4. netbeans 字体发虚

    今天更新了netbeans,重启后蛋疼了,字体发虚,搜索网络后有得到如下方案: 对Archlinux,去/usr/share/netbeans/etc,里面找到netbeans.conf,给下面一行参 ...

  5. (转)java的动态代理机制详解

    原文出自:http://www.cnblogs.com/xiaoluo501395377/p/3383130.html 在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一 ...

  6. LINUX 笔记-MOUNT

    mount [-t vfstype] [-o options] device dir -o options: 主要用来描述设备或档案的挂接方式 1)loop:用来把一个文件当成硬盘分区挂上系统 2)r ...

  7. Linux系统用户管理

    一.Linux账户 广义上讲,Linux的账户包括用户账户和组账户两种. Linux系统下的用户账户有两种,普通用户和超级用户.普通用户在系统中的任务就是普通工作,管理员在系统上的任务就是对普通用户和 ...

  8. Go语言之三驾马车

    作者:唐郑望,腾讯后台开发 工程师商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处.  WeTest 导读 Go语言的三个核心设计: interface | goroutine | cha ...

  9. [http服务]

    [http服务] CentOS 6 httpd 程序环境 记录了httpd的主进程编号: v 主程序文件: /usr/sbin/httpd /usr/sbin/httpd.worker /usr/sb ...

  10. 基于 webpack 的 chrome 扩展开发探索

    起 最近利用闲暇时间在进行一款 chrome 扩展 V2EX-HELPER 的开发(如果巧遇 V 友欢迎试用),今天把它彻底改成了用 webpack 打包依赖的模式,不由得感概 webpack 的强大 ...