如何引入外部css樣式表

今天就跟大家聊聊有關如何引入外部css樣式表，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

引入外部css樣式表的方法：1、使用“”語句引入；2、在style標簽對中，使用“@import url("css文件路徑");”語句引入。

引入外部css樣式表的方法

1、使用 <link> 標簽

<link> 標簽定義文檔與外部資源的關系。<link> 標簽最常見的用途是鏈接外部css樣式表。

語法：

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

2、使用使用 @import 規則

@import 規則允許您將樣式表導入另一張樣式表中。

語法：

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

<link>和@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樣式表有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。