页面导入样式时,使用link和@import有什么区别?


1. 区别

  1. link是XHTML标签,它不仅可以引入css文件,还可以引入网站图标或者设置媒体查询。
    @import是CSS提供的语法规则,只能用来加载css。@import一定要写在除@charset外的其他任何 CSS 规则之前,如果置于其它位置将会被浏览器忽略。而且,在@import之后如果存在其它样式,则@import之后的分号是必须书写,不可省略的。
//引入css
<link href="main.css" rel="stylesheet">
//引入图标
<link rel="icon" href="favicon.ico">
//设置媒体查询
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
  1. link引入css文件,页面载入同时载入css文件,@import在页面完全载入之后载入css文件,在网络较慢情况下一开始会没有css样式。
  2. link在浏览器中没有兼容问题。@import在css2.1中提出,低版本浏览器会不支持。
  3. link中的css可以被javascript获取进而控制DOM,而@import不支持。

2. css引入方式

2.1 内联样式

直接将样式写在标签上。只对当前标签有效。

<div style="height:100px;width:100px"></div>
2.2 嵌入样式

在<head>添加<style>,编写css。只对当前页面有效。

<head>
    <style>
        p{
            color:red;
        }
    </style>
</head>
2.3 链接样式

使用link标签中引入css。

<link rel="stylesheet" type="text/css" href="style.css"></link>
2.4 导入样式

使用@import导入css

<style>
    @import url(style.css);
<style>

或者在css文件中使用

@charset "utf-8";
@import url(style.css);
*{ margin:0; padding:0;}

声明:coder-syl|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 页面导入样式时,使用link和@import有什么区别?


Carpe Diem and Do what I like