脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

深入理解CSS中的@import

segmentfault   发布时间：2015-07-14 16:18:48   作者：佚名   我要评论
这篇文章主要介绍了CSS中的@import,是CSS入门学习中的基础知识,需要的朋友可以参考下

我们知道，css文件引入方式有两种：
1. HTML中使用link标签

XML/HTML Code复制内容到剪贴板
  1. <link rel="stylesheet" href="style.css" />  

2.CSS中@import

CSS Code复制内容到剪贴板
  1. @import "style.css";  

第一种方式最为常见最为主流，第二种方式则很少见到有人这么写，因而也常被开发工程师所忽略。这篇文章就详细解剖之。
语法

@import语法有两种：

CSS Code复制内容到剪贴板
  1. @import "style.css";   
  2. @import url("style.css");  

这两种语法并没什么差别。
规则
import规则一定要先于除了@charset的其他任何CSS规则，这句话是什么意思呢，我们看个例子：

index.html

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2.   .hd{   
  3.     color: orange;   
  4.   }   
  5.   @import "import.css";   
  6. </style>   
  7. ...   
  8. <p class="hd">我是什么颜色</p>   
  9.   
  10. import.css   
  11.   
  12.   .hd{   
  13.     color: blue;   
  14.   }  

测试发现，p的颜色并不是import.css里所定义的蓝色，而是之前定义的橘黄色。打开网络请求会发现没有请求import.css文件，这正是因为，再次强调一遍，import规则一定要先于除了@charset的其他任何CSS规则，所以需要将index.html改成酱紫：

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2.   @import "import.css";   
  3.   .hd{   
  4.     color: orange;   
  5.   }   
  6. </style>   
  7. ...   
  8. <p class="hd">我是什么颜色</p>  

这时候能看到import.css网络请求，p的颜色为橘黄色，覆盖了import.css里定义的蓝色。
媒体查询

@import和link一样，同样可以定义媒体查询(media queries)，我们先看看link定义的方式：

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" type="text/css" href="print.css" media="print"/>  

接下来是@import：

CSS Code复制内容到剪贴板
  1. @import url("print.css") print;   
  2. @import "common.css" screen, projection;   
  3. @import url('landscape.css') screen and (orientation:landscape);   
  4. @import url('mobile.css') (max-width: 680px);  

这里要注意的是，不论是link还是import方式，会下载所有css文件，然后根据媒体去应用css样式，而不是根据媒体去选择性下载css文件。
不要使用@import

这。。坑爹呢，看了一大堆，结果告诉我不要使用！
这也只是个建议，因为import的确会带来一些问题，所以网络上会有各种「抵制@import」的文章，既然设计了@import，总有它的有用之处，不能过于绝对。使用@import影响页面性能的地方主要体现在两个方面：

    影响浏览器的并行下载
    多个@import导致下载顺序紊乱

相关文章

  • CSS中link和@import的区别说明

    link与@import这两种方式都是为了加载CSS文件,但还是存在着细微的差别。下面脚本之家小编给大家介绍CSS中link和@import的区别说明，感兴趣的朋友一起看下吧
    2016-08-12

  • 浅谈CSS 权值 层叠 重要性(!important)

    下面小编就为大家带来一篇浅谈CSS 权值 层叠 重要性(!important)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-05

  • css中提升优先级属性!important的用法总结

    !important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.!important提升优先级，下面对它的用法做下总结
    2014-08-08

  • 加了important标记css样式的jQuery写法

    这篇文章主要介绍了加了important标记css样式的jQuery写法，需要的朋友可以参考下
    2014-07-16

  • 从可维护性角度考虑css的!important规则的可用性

    使用!important对于性能并没有什么负面影响。但是从可维护性角度考虑还是少用这个规则。不过这个规则在IE6中有bug
    2014-06-05

  • css @import url加载样式应用深入分析

    一直以来写CSS的时候都没有过多的考虑使用@import的方式,最近又看到有朋友在讨论关于@import的一些好坏，以及要不要使用@import的方式加载样式,需要的朋友可以了解下
    2012-12-12

  • css中link和@import的区别分析详解

    本文章详细的介绍了关于link和@import的区别，有需要了解的朋友可以参考一下本文章
    2012-03-31

  • css外部样式加载Link与import的区别

    我们引用css文件通常有两种方式:link,@import 这两天整理了一下这两种用法的区别，加深认识
    2010-06-17

  • css important终级讲解

    很多人，包括很多网站（我所见过的所有网站，包括国内著名的‘网页设计师’网站），都说important是不被IE所支持和认识的，可是真的是这样吗？看了下边的两个例子，也许你
    2010-01-05

  • Webpack 中 css import 使用 alias 相对路径的方法

    在 Vue 项目中，我们通常使用 vue-webpack 脚手架生成工程模板，然后配置 @ 为项目根目录下放资源和源码的 /src 目录的别名。这篇文章给大家介绍Webpack 中 css import 使
    2018-07-24

最新评论

关注微信公众号

扫一扫