怎樣引入外部css樣式表

引入外部css樣式表的方法：1、使用「」語句引入；2、在style標籤對中，使用「@import url("css檔案路徑");」語句引入。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

引入外部css樣式表的方法

#1、使用 標籤

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

語法：

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

2、使用使用 @import 規則

@import 規則可讓您將樣式表匯入另一張樣式表中。

語法：

<style type="text/css">
@import url("css文件路径");
</style>

和@import方法的區別

##link 屬於HTML 標籤，而@import 是CSS 提供的。
頁面被載入時，link 會同時被載入，而 @import 引用的 CSS 會等到頁面載入完再載入。
@import 只有在 IE 5 以上才能識別，而 link 是 HTML 標籤，無相容問題。
link 方式的樣式的權重高於 @import 權重。

說明：路徑

#相對路徑(Relative Path)

顧名思義：就是css檔案相對某一個參照物的位置。

上物理課的時候老師都會提到相對運動：指某一個物體對另外一個物體的相對於一個固定參照物來是相對運動的。我們走路看汽車的時候覺得汽車往後走，汽車看我們的時候是往前走，那麼相對路徑也是醬樣子的，網頁所處目錄就是我們的參照物。

像是下面這段css程式碼的引進就是一個相對路徑位址style.css檔案跟這個網頁檔案是同處一個目錄層級。

<link rel="stylesheet" href="style.css" />

絕對路徑(Absolute Path)

既然是絕對的，那就說明這個位址是唯一性，獨立性。相對本地來說，剛剛的網站test的絕對位址為F:\test，相對伺服器來說，就應該是127.0.0.1/test類似這樣的IP位址。

例：

<link rel="stylesheet" href="http://xxx.com/test/css/style.css" />

關於路徑引入

要相對路徑還是絕對路徑引入css文件，個人認為本地預覽的時候可以選擇相對路徑，專案上線的時候改成絕對路徑來引入，為什麼？有以下幾點：

1. 減少索引，絕對位址的唯一性可以確保使用者在輸入網頁的時候，瀏覽器直接去索引到那個IP位址，直接一刀致命，沒有拖沓。而相對路徑就要一步步索引目錄，這就好比在路上遇見一個心儀的妹紙，我們害羞不敢當面去談話，於是我們製造了無數的偶遇之後才有膽子上去問聯繫方式，到最後才發現妹紙早名花有主，早知如此，何必當初呢~

2. 增加外鏈，對於做SEO的人來說，我們都知道外鏈能帶來不錯的權重提高，就算是別人來抓我們的內容，假如它沒有改成自己的伺服器位址，那說明這個網站的引用位址還是我們的網址，爬蟲會透過這個圖片引用位址反爬回去，但相對路徑引用，因為位址發生變更，因此爬蟲爬回去之後找不到相應的文件，因此爬蟲的工作也即將停止。

3. 提高排名，假如是你一個乾前端的，那麼多少都會遇到某一個自己喜歡的動畫效果，HTML搞下來了，但是不想要直接把css也下下來，因此會在本地直接呼叫網路位址。當你預覽這個頁面的時候不小心點到了引入地址，會跳到相應的網站css，即使你沒有訪問其主頁，但是你還是訪問了他的域名，無意中還是增加了其訪問量。

（學習影片分享：

css影片教學

）

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