@import和link的区别

时间:2024-12-08 19:02:56

@import和link的区别

1、link语法结构
    <link href="CSSurl路径" rel="stylesheet" type="text/css" />
    此标签是引入CSS文件link标签,只要设置好路径即可。

2、@import语法结构
    @import + 空格+ url(CSS文件路径地址);
    1)、在html中
        <style type="text/css">
        @import url(CSS文件路径地址);
        </style>
    2)、在css中
        直接使用
        @import url(CSS文件路径地址);
3、link与@import区别与选择
    首页link和import语法结构不同,前者<link>是html标签,只能放入html源代码中使用,后者可看作为css样式,作用是引入css样式功能。
    @import的优势

import这种方式通常会在CSS文件中使用,即是导入样式表。这样做的好处是,把多个样式表导入到一个样式表中,在页面里面只需要导入一个样式表即可。

@import的弊端

分歧1:兼容性的差异。由于@import是CSS2.1提议的因而老的阅读器不支持,@import只有在IE5以上的才力辨认,而link标签无此题目。

分歧2:应用dom控制样式时的差异。当应用javascript控制dom去转变样式的时间,只能应用link标签,由于@import不是dom可以控制的。

分歧3:老祖宗的差异。link属于XHTML标签,而@import完备是CSS提供的一种格式。

  注意:@import必须出现在style元素中,且要放在其他css规则之前,否则将根本不起作用!

link标签除了可以加载CSS外,还可以做许多别的的事故,例如界说RSS,界说rel连结属性等,@import就只能加载CSS了。