css link @import

一朵红杏

于 2017-04-03 16:16:28 发布

阅读量1k

点赞数 2

分类专栏： sass 文章标签： css import link saas

本文链接：https://blog.youkuaiyun.com/java_goodstudy/article/details/68961253

版权

sass 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用@import导入CSS文件以及如何通过JavaScript修改页面背景颜色。探讨了@import与link标签的区别，尤其是在加载时机上的不同，以及@import在实际应用中可能带来的额外HTTP请求等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

if you use in html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    @import url("css1.css");
    </style>
</head>
<body>

    <script>

        document.querySelector('body').setAttribute('background','red');

    </script>
</body>
</html>

or in other css file

//css2.css
@import "css1.css";
//css1.css
body{
    background: green;
}

Note:
.1 In some case , @import is the same to link , but @import will load after the document render , so maybe short white time , when use @import .

.2 Use @import can make css module , but use @import “css1.css” in css2.css will cause two http request :

.3 when you use @import xx.css in sass file you after compile will get same file like @import url(‘xx.css’) but compile the css code to the file that use import.

这里写图片描述