CSS link和@import的区别

CSS link:

  link是html标签

  加载页面的过程是异步的,不会阻塞浏览器的解析过程

=============举例==================

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/css1.css">
</head>
<body>
    <div></div>
</body>
</html>
css文件:
div {
    width: 400px;
    height: 400px;
    border: 2px solid #000;
    margin-top: 10%;
}

@import:

  CSS中的命令

  加载过程是同步的,会阻塞浏览器的解析过程

=============举例==================

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/css1.css">
</head>
<body>
    <div></div>
</body>
</html>
css1文件:
@import url(css2.css);

div {
    border: 2px solid #000;
    margin-top: 10%;
}
css2文件:
div {
    width: 400px;
    height: 400px;
}

CSS link和@import的区别

上一篇:JS 装饰器(Decorator)


下一篇:web开发遇到的坑之360浏览器缓存问题