基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…

<link rel="stylesheet" type="text/css" href="" />

文件的开头?


当前回答

使用link方法,样式表可以并行加载(更快更好),而且几乎所有浏览器都支持link

import加载任何额外的css文件一个接一个(较慢),并可以给你Flash的无风格的内容

其他回答

在头部添加css样式表与使用导入功能并没有太大区别。使用@import通常用于链接样式表,这样可以轻松地扩展样式表。它可以用来轻松地交换不同的颜色布局,例如结合一些一般的css定义。我认为主要的优势/目的是可扩展性。

我也同意xbonez的评论,因为可移植性和可维护性是额外的好处。

我认为这里的关键是你为什么要编写多个CSS样式表的两个原因。

You write multiple sheets because the different pages of your website require different CSS definitions. Or at least not all of them require all the CSS definitions one other pages require. So you split up the CSS files in order to optimize what sheets are load on the different pages and avoid loading too many CSS definitions. The second reason that comes to mind is that your CSS is getting that large that is becomes clumsy to handle and in order to make it easier to maintain the large CSS file you split them up into multiple CSS files.

第一个原因是附加的<link>标记将应用,因为这允许您为不同的页面加载不同的CSS文件集。

对于第二个原因,@import语句似乎是最方便的,因为您可以获得多个CSS文件,但加载的文件总是相同的。

从装载时间的角度来看并没有什么不同。浏览器必须检查和下载分离的CSS文件,无论它们是如何实现的。

有时你必须使用@import而不是内联。如果你正在开发一个复杂的应用程序,它有32个或更多的css文件,而且你必须支持IE9,那么你别无选择。IE9忽略前31个之后的任何css文件,这包括内联css。但是,每个表可以导入31个其他表。

@Nebo在伊兹纳德米索格古尔

下面是使用@import的正确方法

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

来源:https://developer.mozilla.org/en-US/docs/Web/CSS/@import

我使用@import的一个地方是当我处理一个页面的两个版本时,英语和法语。我将使用main.css用英文构建我的页面。在构建法语版本时,我将链接到一个法语样式表(main_fr.css)。在法语样式表的顶部,我将导入main.css,然后为法语版本中需要不同的部分重新定义特定的规则。