有多種方法可以將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編輯。