有多种方法可以将CSS样式应用于网页，包括外部样式表或甚至内联样式 。 如果您使用的是外部样式表，这是推荐HTML文档外观的推荐方法，则一种方法是使用@import。
@import规则允许您在文档中使用重要的外部样式表 - 可以将其放入HTML页面，甚至可以放入其他CSS文档中。 将许多样式分成许多小而集中的文件（一个用于布局，一个用于排版 ，一个用于图像等）有时可以更容易地管理这些文件以及它们包含的各种样式。 如果你想享受这种好处，那么导入这些不同的文件就是你需要做的，以使它们都能够用于你的网页显示。
导入到HTML中
要在HTML中使用@import规则，您需要将以下内容添加到文档的
中：：
<风格>
@import url（“/ styles / default.css”）;
此代码现在将导入此样式表以用于此HTML页面，并且您可以管理该文件中的所有样式。 这种重要样式表的缺点是这种方法不允许并行下载。 该页面必须下载整个样式表，然后才能移动到页面的其余部分，包括使用此方法导入的任何其他CSS文件。这会对页面的速度和下载性能产生负面影响。 考虑到网页性能对今天的网站成功有多重要，仅此缺点可能就是您希望避免使用@import的原因。
替代方法
作为在HTML中使用@import的替代方法，您可以像这样链接到该CSS文件：
这与@import功能非常类似，它允许您从一个中央位置/文件管理所有CSS，但从下载角度来看，此方法更可取。 如果您仍想将不同类型的样式分割成单独的文件，您可以继续这样做，并在主CSS文件中使用@import功能。 这意味着您的外部CSS文件仍然可以单独管理，但是由于它们全部导入到一个主CSS中，所以性能得到了改善。
导入到CSS中
使用上面的代码示例将使您的HTML页面上使用“default.css”文件。 在该CSS文件中，您将拥有各种页面样式。 您可以在该页面上详细说明所有这些样式，或者可以使用@import将它们分开以便于管理。 我们再次说，我们正在使用4个独立的CSS文件 - 一个用于布局，一个用于印刷术，另一个用于图像。 第四个文件是我们的“主”文件，这是我们页面链接的文件（对于这个例子，这是“default.css”）。 在主CSS文件的最顶端，我们可以添加如下所示的规则：
@import url（'/ styles / layout.css'）;
@import url（'/ styles / type.css'）;
@import url（'/ styles / images.css'）;
请注意，这些规则必须位于CSS文件中的所有其他内容之前，以便它们能够正常工作。 这些导入规则之前，您不能有任何其他CSS样式！
在这些导入规则的下面，您可以在默认表单中添加任何其他想要的CSS样式。 当加载主CSS文件时，它将首先导入这些单独的文件，并将它们的样式添加到样式表的最顶部。 然后，它会将所有其他样式放在这些导入的样式下，创建Web浏览器用来显示网站的完整CSS文件。 您可以获得管理更小，更集中的文件的好处，同时还可以在该HTML中链接单个样式表。
对媒体查询使用＆＃64;导入
有一件事你可能会考虑将你网站的媒体查询分类为一个单独的文件。 由于这些响应式样式可能会与您网站的其他样式规则一起看到时产生混淆，因此在不同的文件中单独使用它们可能会很有吸引力。 这种方法的一个问题是，由于您的@import规则必须是第一个，这意味着您的媒体查询将在网站的其他样式之前加载。 在创建考虑到性能的移动优先响应网站时，这可能是一个问题。出于这个原因，建议您不要将网站的响应式样式单独分开，并使用@import将它们带入您的网站。 是的，这样做似乎有好处，但缺点超过了这些好处。
我需要使用＆＃64;导入吗？
你不可以。 许多网站只是在一个文件中显示所有主要样式，并且与该文件一样大，它就是这样管理的（这是我在自己的工作中做的）。 如果您发现@import有帮助，那么它可以成为您工作流程的一部分。 否则，您可以安全地构建包含所有CSS规则的单个样式表的网页。
浏览器支持
这些非常老的浏览器在这些@import规则中遇到了一些问题，但现在这些浏览器对您来说可能不是问题。 现在，旧版Internet Explorer的截止日期已过，这一点尤其正确。 最终，如果您决定在HTML或CSS中使用@import规则，那么除非您有一些奇怪的需要支持令人难以置信的旧版IE，否则您不应该遇到旧版Web浏览器的问题。
Jennifer Krynin的原创文章。 由Jeremy Girard编辑。