• @import指令与link的区别及二者的使用注意事项


    首先,二者都是从外部引入css文件的方式,其中@import语句需要放在css文件或者style标签中,且必须放在开头部分!

    <link rel='stylesheet' href='a.css'>
    Or you can use the @import rule:
    
    <style>
    @import url('a.css');
    </style>

    @import VS  Link ,二者的区别

    1. link属于HTML标签,而@import完全是CSS提供的一种方式;
    2. 加载顺序的差别。比如,在a.css中使用import引用b.css, 只有当使用当使用import命令的宿主css文件a.css被 被下载、解析之后,浏览器才会知道还有另外一个b.css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作.
    3. 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
    4. 当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的

    综上:

    编码规范建议不要使用 @import

    与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:

    • 使用多个 <link> 元素
    • 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
    • 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

    参考文章:

    http://codeguide.bootcss.com

  • 相关阅读:
    用mapreduce 处理气象数据集
    熟悉常用的HBase操作,编写MapReduce作业
    爬虫大作业
    第三章 熟悉常用的HDFS操作
    数据结构化与保存
    获取全部校园新闻
    爬取校园新闻首页的新闻的详情,使用正则表达式,函数抽离
    网络爬虫基础练习
    Hadoop综合大作业
    理解MapReduce
  • 原文地址:https://www.cnblogs.com/feilu2016/p/6866655.html
Copyright © 2020-2023  润新知