zoukankan      html  css  js  c++  java
  • 【对比分析三】CSS中 link 和@import 的区别

    1).  link 是 XHTML 标签,无兼容问题; @import 是在 CSS2.1 提出的,只有IE5以上才能识别。

    2).  语法结构不同。

      link (链接式)只能放入HTML源码中,语法为:

    1 <link rel="stylesheet" href="style.css" type="text/css"/>

      @import (导入式)语法为:

    1 <style type="text/css">
    2 
    3     @import url("style.css");
    4 
    5 </style>

    3).  使用场景不同。

      link标签除了可以加载 CSS 外,还可以做很多其它的事情,比如定义 RSS ,定义 rel 连接属性等。

      @import 看作为 css 的样式,就只能加载 CSS 了。

    4).  加载时间不同。

      页面被加载的时,link会和 HTML 的主体部分同时被加载,而@import引用的CSS会等到页面被加载完再加载。(所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。)

    5).  当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制的。

    6).  link方式的样式的权重 高于@import的权重。

  • 相关阅读:
    Redis(二)
    Redis
    Nginx
    Linux的环境配置
    深入mysql
    SpringBoot入门
    Thymeleaf入门
    Mybatis之resultMap
    Mybatis入门
    使用第三方实现微信登录
  • 原文地址:https://www.cnblogs.com/SHERO-Vae/p/5795430.html
Copyright © 2011-2022 走看看