怎麼外部引入css

外部引入css的方法：1、使用link來呼叫外部的css文件，標籤定義文件與外部資源的關係；2、使用@import引用外部CSS檔案。

本文操作環境：Windows7系統、css3版、Dell G3電腦

怎麼引進外部css？

方法1：使用link來呼叫外部的css檔案

#在網頁的93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1標籤對中使用54221f165301041700dfeb0f4ab9fd7c標記來引入外部樣式表文件，使用html規則引入外部css。

2cdf5bf648cf2f33323966d7f58a7f3f 標籤定義文件與外部資源的關係，2cdf5bf648cf2f33323966d7f58a7f3f 標籤最常見的用途是連結樣式表。

語法：

<link rel="stylesheet" href="css文件路径" type="text/css" />

連結外部css樣式時候link標籤的內容結構解釋：

href：為外部資源位址，這裡是css的位址

rel：定義目前文件與被連結文件之間的關係,這裡是外部css樣式表即stylesheet

#type：規定被連結文件的MIME 類別,這裡是值為text/css

說明：

這種方法會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁。

方法2：使用@import引用外部CSS檔案

CSS @import規則，用於從其他樣式表匯入樣式規則。這些規則必須先於所有其他類型的規則，@import不能在條件組的規則中使用。

@import規則語法

@import url("文件路径");

說明：

這種方法會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的缺陷。

兩種呼叫外部css樣式方法的區別：

@import是CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標籤，不僅可以載入CSS 文件，還可以定義RSS、rel 連線屬性等。

載入頁面時，link標籤引入的 CSS 被同時載入；@import引入的 CSS 將在頁面載入完畢後被載入。

@import是 CSS2.1 才有的語法，故只有在 IE5 才能辨識；link標籤作為 HTML 元素，不存在相容性問題。

可以透過 JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於文件的，無法使用@import的方式插入樣式。

link引入的樣式權重大於@import引入的樣式。

推薦學習：《css影片教學》

以上是怎麼外部引入css的詳細內容。更多資訊請關注PHP中文網其他相關文章！