@import和link的区别

不念不忘少年蓝@ 2022-05-16 13:27 199阅读 0赞

使用媒体查询进行响应式布局，有三种实现方法：

1.  使用写在style中的@media；
2.  在style中使用@import关键字导入样式表；
3.  使用link标签导入样式表；

问题：其中，在使用@import导入样式表会出现样式表中的样式完全没有产生效果的现象，由于水平有限，理解不深，下边就对这一现象进行简单的分析，以此来学习@import和link

**下面是正确的产生预期效果的代码**

<div id="container">
        <div id="s1"></div>
        <div id="s2"></div>
        <div id="s3"></div>
        <div id="s4"></div>
    </div>

/*css样式代码*/
    
    
            @import url("../../css/style1.css") all and (min-width: 1024px);
            @import url("../../css/style2.css") all and (max-width: 1024px) and (min-width: 900px);
    
            #container {
                width: 80%;
                margin: 0 auto;
                height: 500px;
                background-color: #F6AF55;
            }

/*外部样式表style1.css*/
    #s1,#s2,#s3,#s4{
        width: 24%;
        height: 100px;
        background-color: black;
        float: left;
        margin-left:1%;
        margin-top: 20px;
    }

运行效果：  
![这里写图片描述][70]

/*外部样式表style2.css*/
    #s1,#s2,#s3,#s4{
        width: 30%;
        height: 100px;
        background-color: red;
        float: left;
        margin-left:1%;
        margin-top: 20px;
    }

运行效果：  
![这里写图片描述][70 1]

**导致无法出现正常效果的错误代码：**

/*css样式代码*/
              #container {
                width: 80%;
                margin: 0 auto;
                height: 500px;
                background-color: #F6AF55;
            }
            @import url("../../css/style1.css") all and (min-width: 1024px);
            @import url("../../css/style2.css") all and (max-width: 1024px) and (min-width: 900px);

原因：由于@import的特殊性，所以他放的位置只能是在style的最前面，如果放在后边，他将会被忽略。

--------------------

@import和link的几点简单的区别：  
1，从属关系上：@import是css提供的语法规则，他只有导入样式表的作用；  
而link标签是HTML标签它的功能不止有引入样式。  
2，加载顺序上：@import是只有在页面加载完毕之后才能够引入样式；而link标签的  
加载是可以在页面加载的过程中一并进行加载的，这个也是造成了目前提倡使用link而不提倡使用@import的原因。效率高！  
3，兼容性上：@import是在css2.1之后才具有的属性，只有在IE5+之后才会被兼容使用，但是link是一个HTML标签，所以他不存在兼容性问题。但是随着时间的发展，IE5之前的浏览器将会被逐一的取缔，所以现在基本上是无须担心兼容性问题。  
4，DOM的可控性：@import由于只是一个css语法规则，所以在使用js进行DOM操作的时候，是不能操纵@import来进行样式的改变的。可以通过操纵link来进行改变样式。

关于@import的注意点：  
1：@import规则一定要先于除了@charset的其他任何的css规则。即如果想要在style中再添加另外的css样式时，一定要记住写在@import的后边。  
2：从其他博客中借鉴的关于@import的最兼容的写法是：  
@import url(style.css)和@import url(“style.css”);这两种方法的兼容性最高，  
3 ：目前更加追求的是高性能的网站设计，所以样式表的并行载入也应当考虑进来，所以为了能够使网页的加载速度更快，需要使用link来代替@import。这一点在一篇技术博客中他使用了一些http瀑布状图表来详细的描述@import的特点【[https://www.qianduan.net/high-performance-web-site-do-not-use-import/】][https_www.qianduan.net_high-performance-web-site-do-not-use-import]  
4：不建议使用@import！！！；

--------------------

最后的话：  
人这一辈子，从幼稚到成熟，不知道要辜负多少人，流下多少眼泪。而自己也终究会为这份幼稚付出代价。 对自己好一点，也对身边的人温柔一点。

[70]: /images/20220516/652058962d5d4a1798dd856f38120790.png
[70 1]: /images/20220516/dd24d082dc514165b3f8208d0bb99453.png
[https_www.qianduan.net_high-performance-web-site-do-not-use-import]: https://www.qianduan.net/high-performance-web-site-do-not-use-import/%E3%80%91