檬味博客 » 问答 » 玩转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 阅读 34 次 更新于 2025-09-09 11:57:08 我来答关注问题0
1 个回答檬味博客专题活动
  • 猪八戒网 玩转CSS基础——import指令

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

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

    一、CSS 导入的基本概念 CSS 导入允许我们将一个 CSS 文件导入到另一个 CSS 文件中，这一功能通过 @import 规则实现。例如，在 main.css 文件中，我们可以使用 @import 规则来导入 utils.css 文件，从而将样式表模块化，提高代码的可重用性和可维护性。二、CSS 导入的实践应用 在实际开发中，CSS ...

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

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

  • 回忆526 CSS中!important 作用

    1、这个属性可以让浏览器优选执行这个语句，加上!importanrt可以覆盖父级的样式。具体的效果可以用一个案例演示，首先新建一个html文件，先新建一个外围div，在在里面设置两个子div，给父div设置class属性parent，第二个子div增加import的class属性：2、然后在上方的style中设置样式，给div设置宽度和高度，...

  • jstzgxr css中link和import的区别

    1. 老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。2. 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@...

其他CSS类似问题

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

CSS相关话题

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