深层次了解CSS中的@import

2021-03-05 17:15 jianzhan

大家了解,css文档引进方法有两种:
1. HTML中应用link标识

XML/HTML Code拷贝內容到剪贴板
  1. <link rel="stylesheet" href="style.css" />  

2.CSS中@import

CSS Code拷贝內容到剪贴板
  1. @import "style.css";  

第1种方法最为普遍最为流行,第2种方法则非常少见到有人这么写,因此也常被开发设计工程项目师所忽视。这篇文章内容就详尽解剖学之。
英语的语法

@import英语的语法有两种:

CSS Code拷贝內容到剪贴板
  1. @import "style.css";   
  2. @import url("style.css");  

这两种英语的语法并没甚么区别。
标准
import标准1定要先于除@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.     colorblue;   
  14.   }  

检测发现,p的色调其实不是import.css里所界定的蓝色,而是以前界定的橘黄色。开启互联网恳求会发现沒有恳求import.css文档,这更是由于,再度强调1遍,import标准1定要先于除@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和link1样,一样能够界定新闻媒体查寻(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" screenprojection;   
  3. @import url('landscape.css'screen and (orientation:landscape);   
  4. @import url('mobile.css') (max-width680px);  

这里要留意的是,无论是link還是import方法,会免费下载全部css文档,随后依据新闻媒体去运用css款式,而并不是依据新闻媒体去挑选性免费下载css文档。
不必应用@import

这。。坑爹呢,看了1大堆,結果告知我不必应用!
这也只是个提议,由于import确实会带来1些难题,因此互联网上会有各种各样「遏制@import」的文章内容,既然设计方案了@import,总有它的有效的地方,不可以过度肯定。应用@import危害网页页面特性的地区关键反映在两个层面:

    危害访问器的并行处理免费下载
    好几个@import致使免费下载次序混乱