zoukankan      html  css  js  c++  java
  • link 与 @import 区别

    规范

    • @import 是 CSS 提供的语法规则,只能用于导入样式表。
    • link 是 HTML 标签,不仅可以加载 CSS 资源,还可以用于引入网站图标等。
    <link rel="stylesheet" type="text/css" href="index.css" />
    <link rel="icon" href="favicon.ico" />
    

    加载顺序

    加载页面时,link 标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完成后下载。

    关于这一点,只在 Chrome 中测试了某一种特定情况,不一定是可以验证此条的直接证据。如果有同学了解的话,请不吝分享出来。

    index.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title>demo</title>
            <link rel="icon" href="favicon.ico" />
            <link rel="stylesheet" type="text/css" href="index.css" />
        </head>
        <body>
            <div class="main">
                <p class="red">这是一段红色的文字</p>
                <p class="yellow">这是一段黄色的文字</p>
                <p class="blue">这是一段蓝色的文字</p>
            </div>
            <script src="index.js" type="text/javascript" charset="utf-8"></script>
        </body>
    </html>
    

    index.css

    @import url("extra.css");
    
    .red {
        color: red;
    }
    
    .yellow {
        color: yellow;
    }
    
    .blue {
        color: blue;
    }
    

    index.js

    console.log('index');
    

    浏览器控制台信息

    从上图可以得知,extra.css 是最后加载的。

    兼容性

    @import 是 CSS 2.1 的规范,IE5+ 才被支持;link 标签不存在兼容性问题。

    动态插入

    DOM 方法是基于文档的,可以通过 JavaScript 操作插入 link 标签来改变样式,但无法使用 @import 的方式插入样式。

  • 相关阅读:
    form表单里submit的提交,如何不让其阻止ajax的调用
    前端模拟后台json 调接口
    纯前端实现搜索功能、模糊查询
    js如何获取select下拉框的value以及文本内容 并赋值
    清除表单input输入框内数据
    js动态生成的dom mouseover事件无效
    jq获取当前日期xxxx-xx-xx格式
    获取自定义属性、 data-* 的值
    媒体查询不起作用
    shell_判断语句If
  • 原文地址:https://www.cnblogs.com/xiaoyucoding/p/12510923.html
Copyright © 2011-2022 走看看