CSS引入方式、（打脸／被打脸）link和@import的区别

2017-07-31 本文已影响0人 _Dot912

三种引入方式：

1、内联样式：直接写在元素开始标签的style属性中，如
<div style="background:red;height:100px;"></div>
2、内部样式表：放在head元素内的style标签中，如

<head>
<style type="text/css">
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

3、外部样式表：扩展名为.css的文件,文件中不能包含任何html标签，外部样式表的引入又分为两种情况：

放置于head元素内的link标签中，如：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

放置于head元素内的style标签中或直接写入样式表中，如：

<style>
  @import url("1.css");
  @import "2.css";
</style>

link和@import的三点区别：

link是一个html标签，除了可以加载css文件外还可以做很多其他的事情，如定义rel链接属性等。而@import是css提供的一种方式，只能用来加载css文件。
IE5之前的浏览器不支持@import，link没有这个问题。
link支持使用js控制DOM改变样式，@import不行。

查阅很多资料，显示出二者还有第4种差别：

加载顺序的差别。link 和页面本体是会同时加载的，而 @import 得等到页面加载完成再加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）。

亲测结果：
无论是@import定义的还是link引入的外部样式表，浏览器（chrome）都会按照从上往下的规则解析。所以第四点区别是不正确的。

测试代码如下：

demo1.css 其中插入了一个本地图片pikachu.png

h2{
    color:red;
    background: green;
}
body{
    background-image: url('./pikachu.png');
}

demo2.css

h2{
    color:black;
}

script.js

for(var i=0;i<10000;i++){
    console.log(12);
}

demo1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @charset "utf-8";
        @import './demo2.css';
    </style>
    <script src="./script.js"></script>
    <link rel="stylesheet" type="text/css" href="./demo1.css" />

</head>

<body>
    <h2>hello dolby</h2>
</body>

</html>

在浏览器打开网页，打开开发者工具，切换到Network状态，选择常规网速regular 2G，结果如下：