码迷,mamicode.com
首页 > Web开发 > 详细

CSS link和@import的区别

时间:2021-04-26 13:00:00      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:width   htm   同步   rgb   charset   过程   div   port   区别   

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的区别

标签:width   htm   同步   rgb   charset   过程   div   port   区别   

原文地址:https://www.cnblogs.com/Friday1/p/14696884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!