檬味博客 » 问答 » 玩转CSS基础——import指令

玩转CSS基础——import指令

importurl('./index.css')/*后面书写气他样式*/ 除了?HTML?文件中使用?style?标签来使用?@import，在?CSS?文件中依旧可以使用?@import，这个时候就不需要?style?标签，而是直接使用@import即可，这样便可实现一个或者多个CSS?文件中引入别的CSS?文件。import规则还支持媒体查询，因此可以允许依赖媒体的...
玩转CSS基础——import指令
?大家好，我是法医，不是验尸的法医，而是写代码的法医，哈哈?，今天给大家带来玩转CSS基础之import指令
来看看import指令是啥？import指令是用来导入CSS样式的，这时，有的小伙伴就会问：导入样式不是有link标签了嘛，没错，link标签可以导入外部CSS样式，import仍然可以导入外部CSS样式。
import的基本用法在HTML文件中导入外部样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>@importurl("./index.css");</style></head><body></body></html>
要在HTML文件汇总直接应用@import引入外部CSS文件，需要将@import放在style标签内
在CSS文件中引入另一个CSS文件
@importurl('./index.css')/*后面书写气他样式*/
除了?HTML?文件中使用?style?标签来使用?@import，在?CSS?文件中依旧可以使用?@import，这个时候就不需要?style?标签，而是直接使用@import即可，这样便可实现一个或者多个CSS?文件中引入别的CSS?文件。
@import规则还支持媒体查询，因此可以允许依赖媒体的导入
?举个栗子：
/*只有媒体是print的时候导入printstyle.css样式表*/@import"printstyle.css"print;
/*只有媒体是screen并且视口宽度是768px的时候导入bg.css样式表*/@import"bg.css"screenand(max-width:768px);
了解了@import基本使用后，接下里看看它与link的区别
@import与link有何不同link属于HTML标签，而@import完全是CSS提供的一种方式
link标签除了可以加载CSS外，还可以做很多其它事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS
兼容性的差别
由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上才能识别，而link标签不存此问题
加载顺序的区别
比如，在index.css中使用import引用demo.css，那么只有index.css文件被下载且解析之后，浏览器才会知道还有另一个demo.css需要下载，此时才会去下载，然后开始解析并且构建rendertree
当使用JS控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的
当我们做换肤网站的时候，它其实是换一套css样式而已，这时可以通过改变link标签的href值来改变应用不同的样式，但是对于import是没办法操作的，毕竟不是标签。
另外，从性能优化的角度来说，尽量避免使用@import，因为是用@import引入CSS会影响浏览器的并行下载，使用@impor引用的CSS文件只有在引用它的那个CSS文件被下载、解析之后，浏览器才会知道还有另一个CSS需要下载，此时才会下载并且解析，随后构建rendertree等操作
多个?@import?会导致下载顺序紊乱。在?IE?中，@import?会引发资源文件的下载顺序被打乱，即排列在?@import?后面的?JS?文件先于?@import?下载，并且打乱甚至破坏?@import?自身的并行下载。
?以上就是CSS的import指令，现在你懂了嘛？欢迎大家关注此专栏，我会一直更新下去。??♀?
原文：https://juejin.cn/post/71019738620273787022024-09-04
mengvlog 阅读 10 次 更新于 2025-07-19 11:58:14 我来答关注问题0
1 个回答檬味博客专题活动
  • 猪八戒网 玩转CSS基础——import指令

    由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上才能识别，而link标签不存此问题 加载顺序的区别 比如，在index.css中使用import引用demo.css，那么只有index.css文件被下载且解析之后，浏览器才会知道还有另一个demo.css需要下载，此时才会去下载，然后开始解析并且构建rendertree ...

  • 翡希信息咨询 CSS里 @import用法

    1. 基本语法： @import用于在CSS文件中引入另一个CSS文件。其基本语法为：@import url;。这里的url可以是一个相对路径或绝对路径，指向你想要引入的CSS文件。2. 加载顺序： 使用@import时，CSS文件的加载顺序是先加载HTML，后加载CSS。这意味着在CSS文件被加载之前，浏览器可能已经开始渲染页面，这可能...

  • 翡希信息咨询 CSS 导入(CSS Import)在前端开发中的实践与优化

    CSS 导入的基本概念：CSS 导入允许将一个CSS文件导入至另一个CSS文件中，实现样式表的模块化。使用 @import 规则来完成CSS文件的导入，从而提高代码的重用性和维护性。CSS 导入的实际应用：简化复杂样式管理：通过导入多个CSS文件，将样式表按功能或模块拆分，便于管理和维护。分隔功能模块样式：例如，main...

  • 翡希信息咨询 CSS的link和import方式的区别

    link：属于XHTML标签，具有更广泛的功能。@import：完全是CSS提供的一种方式，功能相对单一。加载顺序：link：引用的CSS会在页面加载时同时被加载。@import：引用的CSS会等到页面全部被下载完再被加载，可能导致页面在加载初期没有样式。兼容性：link：具有较好的兼容性，可以在各种浏览器中正常工作。@import...

  • 阿暄生活 css里link css中link和import

    link：通常用于在HTML页面中引入外部CSS文件。@import：既可以在CSS文件中使用，将多个CSS文件合并导入到一个CSS文件中，也可以在HTML页面的标签内使用，但这种方式较为少见。不过，值得注意的是，@import在HTML页面中的使用并不如link标签普遍。加载顺序：link：在页面载入时会同时加载所引用的CSS文件，是...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部