zoukankan      html  css  js  c++  java
  • 页面引入css用link和import的区别

      假设有一个css文件a.css,文件里的内容如下:

    p {
       font-size: 18px;
    }

    现在分别使用两种方式引入a.css:

      1.使用html的link标签

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

      2.使用import

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

      3.我们再看一下平常使用的内嵌样式:

    <style>
       p {
           font-size: 18px;    
       }
    </style>

      很明显第二种和第三种方式是形如<style>css语句</style>的,也就是说其实第二种方式中的@import url(a.css)是css的语句而非html的语句。

      所以我们可以这样在b.css文件中使用import语句来引入a.css的内容:

    @import url(a.css);

      这样b.css就把另外一个文件a.css的内容引入到了b.css中。

      

     其实总结就是一句话:link是html的一个标签,而import是css的语句,他们老大不同。

     link与@import的区别加载顺序不一样,link会在页面显示之前全部加载完成,而@import是读取完文件再加载,这也就导致了他们显示上的区别,使用@import会出现闪烁,原因就是先显示无css样式的页面,加载了import的样式又会重新排版,所以导致闪烁。而link是加载完才显示,所以不会出现闪烁的问题。

  • 相关阅读:
    页面布局方案-上固定,下自适应
    页面布局方案-左右固定,中间自适应
    身心疲惫
    生产计划拆分说明-班组绩效匹配算法
    CSS代码片段
    常见内部函数----Python
    pyramid的第一个项目
    2015年大连国际马拉松半程经历
    高效时间管理
    《番茄工作法图解》第四章读书笔记
  • 原文地址:https://www.cnblogs.com/yonglin/p/7400196.html
Copyright © 2011-2022 走看看