溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何實現外部引入css，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
外部引入css的方法：1、使用link來調用外部的css文件，標簽定義文檔與外部資源的關系；2、使用@import引用外部CSS文件。
本文操作環境：Windows7系統、css3版、Dell G3電腦
怎么引入外部css？
方法1：使用link來調用外部的css文件
在網頁的<head></head>標簽對中使用<link>標記來引入外部樣式表文件，使用html規則引入外部css。
<link> 標簽定義文檔與外部資源的關系，<link> 標簽最常見的用途是鏈接樣式表。
語法：
<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的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
關于“如何實現外部引入css”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
