3. 外部樣式表

外部樣式表是最常見也是最推薦的引用 CSS 的方式，您只需要將 CSS 樣式定義在一個 .css 格式的文件中，然后使用 HTML 的<link>標簽將這個 .css 格式的樣式文件應用到 HTML 文檔中。

下面通過具體的示例來演示外部樣式表的使用。首先，需要定義一個 .css 格式的樣式文件（例如 style.css），如下所示：

然后我們在 HTML 文檔中引入這個 style.css 文件，如下所示：

運行效果如下圖所示：

因為 CSS 樣式定義在單獨的 .css 格式的文件中，所以可以在多個頁面之間引用，若要修改網頁的樣式，只需要修改這個 CSS 樣式文件即可，很方便。

4. 導入樣式表

您同樣可以使用@import來引用外部樣式表，這一點與使用<link>標簽比較相似。使用@import引用外部樣式表的語法格式如下：

@import "URL";

或者

@import url("URL");

其中 URL 為外部樣式表的存放路徑。

假如還使用上面定義的 style.css 樣式表，通過@import將其引用到 HTML 文檔的代碼如下：

運行效果如下圖所示：

在使用@import引用 CSS 時有以下幾點需要注意：

在 HTML 文檔中使用@import時，@import需要定義在<style>標簽中。如果<style>標簽中還有其它的 CSS 樣式，那么@import就必須定義在所有樣式的最前面；

@import同樣可以在 .css 格式的文件中使用，但同樣需要定義在所有樣式的前面；

@import是在 CSS2.1 中新增的功能，所以一些低版本的瀏覽器可能會不支持；

在頁面加載時，使用<link>標簽引用的樣式文件會隨頁面同時加載，而使用@import引用的樣式文件會等待頁面加載完成后再加載。如果@import引用的樣式文件過大、加載時間過長的話，在頁面加載完成后就會出現沒有樣式的情況，影響用戶體驗。

點擊知道更多編程知識

文章來源于網絡