每天都在学习关于CSS的新内容,而且我遇到了@import。使用它的优点和缺点是什么。
我知道您可以使用@import在一个样式表中链接所有样式表。然后将一个样式表链接到所有HTML文档,并且每个HTML文档上都没有多个CSS URL。但使用这种方法有哪些优点或缺点?
答案 0 :(得分:1)
在正常情况下,使用@import
方法加载CSS文件可能会显着增加页面加载时间,因为随后会逐个引用各个文件。在文件A下载之前,文件B不会加载。另一方面,使用<link>
标签引用的CSS可以同时下载。
虽然这似乎是一个彻头彻尾的劣势,但使用@import
方法确实带来了非常突出的优势;组织。
随着您的项目规模和复杂性的增长,维护您的CSS文件,无论多么有组织和挑剔,至少可以说是一件苦差事。 @import
方法可帮助您将大量样式表分解为更易于理解和更合理的部分。
为了说明,您通常会通过单个<link>
标记引用您的CSS文件,如下所示:
<link href="/styles/main.css" rel="stylesheet" type="text/css">
此样式表可以引用其他几个辅助样式表
@import url('/styles/navbar.css')
@import url('/styles/header.css')
@import url('/styles/typography.css')
@import url('/styles/grid.css')
这只是我头脑中的一个基本例子,但希望你能看到更有组织的系统的潜力。这也可以使其他团队成员更容易理解已声明引用样式的位置。
Blockquote 注意只需确保这些导入位于样式表的最顶层。在此之前不应该有任何声明/内容。这还包括
<-- comments -->
答案 1 :(得分:0)
在网页中包含样式表有两种方法。您可以使用LINK标记:
<link rel='stylesheet' href='a.css'>
或者您可以使用@import规则:
<style>
@import url("/styles/default.css");
</style>
我更喜欢使用LINK来简化 - 你必须记住将@import放在样式块的顶部,否则它将无法工作。事实证明,避免@import对性能也有好处。
@IMPORT和LINK之间的差异
在决定使用哪种方法来包含样式表之前,您应该了解这两种方法的用途。
链接 - 链接是在网页上包含外部样式表的第一种方法。它旨在将您的网页与样式表链接在一起。它将添加到您的HTML文档中,如下所示:
<link href="styles.css" rel="stylesheet">
为何使用链接?
使用链接样式表的首要原因是为您的客户提供备用样式表。 Firefox,Safari和Opera等浏览器支持rel =&#34;备用样式表&#34;属性以及何时有可用将允许查看者在它们之间切换。您还可以使用JavaScript切换器在IE中的样式表之间切换。出于可访问性目的,这通常与缩放布局一起使用。
使用@import的一个缺点是,如果你只有一个非常简单的@import规则,那么你的页面可能会显示一个无格式内容的闪存&#34; (FOUC)正在加载。这可能会让观众感到不快。
对此的一个简单修复是确保您的。
中至少有一个附加元素或元素@import - 导入允许您将一个样式表导入另一个样式表。这与链接方案略有不同,因为您可以在链接的样式表中导入样式表。如果在HTML文档的头部包含@import,则其编写如下:
<style type="text/css">@import url("styles.css");</style>
为什么使用@IMPORT?
许多年前,使用@import(或与之一起)使用的最常见原因是因为较旧的浏览器无法识别@import,因此您可以隐藏它们的样式。
通过导入样式表,您实际上可以将它们提供给更现代,符合标准的浏览器,同时隐藏&#34;它们来自较旧的浏览器版本。
@import方法的另一个用途是在页面上使用多个样式表,而在文档中只包含一个链接。
从标准的角度来看,链接到外部样式表或导入它没有区别。无论哪种方式都是正确的,任何一种方式都可以同样有效(在大多数情况下)。但是,您可能希望使用一个而不是另一个原因。