[email protected]

当前位置 : 首页 > 网页制作 > CSS > [email protected]

[email protected]

来源: 作者: 时间:2015-10-30 09:30
[email protected],是CSS入门学习中的基础知识,需要的朋友可以参考下
[email protected],是CSS入门学习中的基础知识,需要的朋友可以参考下

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

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

[email protected]

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

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

@import语法有两种:

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

这两种语法并没什么差别。
规则
[email protected],这句话是什么意思呢,我们看个例子:

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文件,这正是因为,再次强调一遍,[email protected],所以需要将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"/>  

[email protected]

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文件。
[email protected]

这。。坑爹呢,看了一大堆,结果告诉我不要使用!
这也只是个建议,因为import的确会带来一些问题,[email protected][email protected],总有它的有用之处,[email protected]体现在两个方面:

    影响浏览器的并行下载
    [email protected]

Tag:
网友评论

<