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;
}