当您在进行网站设计的时候可以通过多种方式将CSS样式应用于网站中，包括外部样式表甚至内联样式。如果您使用的是外部样式表，这是指定HTML文档外观的推荐方法，一种方法是使用@import。
@import规则允许您在文档中导入外部样式表，可以是HTML页面，也可以导入其他CSS文档。将大量样式分解为许多较小的专职文件（一个用于布局，一个用于排版，一个用于图像等）有时可以更轻松地管理这些文件及其包含的各种样式。如果您想享受这些好处，那么您需要导入这些各种文件才能使它们全部用于您的网站显示。
导入到HTML
要在HTML中使用@import规则，您需要将以下内容添加到文档的<head>标签中：<style> @import url（“/ styles / default.css”）; </ style>此代码现在将导入此样式表以在此HTML页面上使用，您可以管理该文件中的所有样式。以这种方式导入样式表的缺点是此方法不允许并行下载。页面必须先下载整个样式表，然后才能移动到页面的其余部分，包括使用此方法导入的任何其他CSS文件。这将对您的网页速度和下载性能产生负面影响。考虑到页面性能对网站成功的重要性，仅此缺点可能是您希望避免使用@import的原因。
替代方法
作为在HTML中使用@import的替代方法，您可以链接到该CSS文件，如下所示：
<link href =“/ styles / default.css”rel =“stylesheet”>
这个功能与@import非常相似，因为它允许您从一个中心位置/文件管理所有CSS，但从下载角度来看，这种方法更可取。如果您仍希望将不同类型的样式分段为单独的文件，则可以继续这样做并在主CSS文件中使用@import功能。这意味着您的外部CSS文件仍然可以单独管理，但由于它们都导入到一个主CSS中，因此性能得到了提高。
导入到CSS
使用上面的<link>代码示例将带来要在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中链接单个样式表。
如何使用@import进行媒体查询
您可以考虑做的一件事是将网站的媒体查询与响应式网站样式分开进入一个单独的文件。因为这些响应式样式在您的网站的其他样式规则旁边看起来会令人困惑，所以在不同的文件中将它们单独放在一起可能会很有吸引力。这种方法的一个问题是，由于您的@import规则必须是第一个，这意味着您的媒体查询将在您网站的其余部分之前加载。在创建考虑性能的移动优先响应式网站时，这可能是一个问题。因此，建议您不要单独划分网站的响应式样式，并使用@import将它们带入您的站点。是的，这样做似乎有好处，但缺点超过了这些好处。
我需要使用@import吗？
许多网站只是在一个文件中显示所有主要样式，并且与该文件不算太大，它是以这种方式管理的（这也是我在自己的工作中这样做的方式）。如果您发现@import很有帮助，那么它可以成为您工作流程的一部分。否则，您可以安全地构建<link>所有CSS规则的单个样式表的网页。
浏览器支持
非常非常古老的浏览器在使用这些@import规则时遇到了问题，但这些浏览器现在不太可能成为您的问题。现在，旧版Internet Explorer的生命周期截止日期已过，尤其如此。最后，如果您决定在HTML或CSS中使用@import规则，则不应该遇到旧版Web浏览器的问题，除非您有一些奇怪的需要支持令人难以置信的旧版IE。