站長資訊網
css外部鏈接形式有兩種：1、通過link標記將css外部樣式鏈接到HTML頁面中，link標記需要放在head標記區，語法“<link type="text/css" rel="styleSheet" href="CSS文件路徑" />”；2、在style標簽中通過“@import”規則鏈接，語法“@import url("css文件路徑");”。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
如果 CSS 樣式被放置在網頁文檔外部的文件中，則稱為外部樣式表，一個 CSS 樣式表文檔就表示一個外部樣式表。
實際上，外部樣式表也就是一個文本文件，擴展名為.css。當把CSS樣式代碼復制到一個文本文件中后，另存為.css文件，則它就是一個外部樣式表。
如下圖所示就是一個外部樣式表：
那如何將css外部樣式表鏈接到HTML文檔中？外部樣式表的有兩種方式：
1）、使用link
鏈接樣式是指在外部定義CSS樣式表并形成以.CSS為擴展名文件，然后在頁面中通過<link>鏈接標記鏈接到頁面中，而且該鏈接語句必須放在頁面的<head>標記區。
語法：
<link type="text/css" rel="styleSheet" href="CSS文件路徑" />
2）、使用@import
導入式是通過@import在<style>標簽中進行聲明的
語法：
<style type="text/css"> @import url("css文件路徑"); </style>
簡單實例：
css外部樣式表 style.css
h1{ color:red; } p{ font-size:14px; color:green; }
HTML文檔
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="styleSheet" href="style.css" /> <!-- <style> @import url("style.cs"); </style> --> </head> <body> <h1>link標簽或@import的應用</h1> <p>外部定義CSS樣式表以.CSS為擴展名文件，然后在頁面中通過link標簽或@import鏈接到頁面中。</p> </body> </html>
實現效果：
link和@import的區別：
1、從屬關系區別
@import是 CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。
2、加載順序區別
加載頁面時，link標簽引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢后被加載。
3、兼容性區別
@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標簽作為 HTML 元素，不存在兼容性問題。
4、DOM可控性區別
可以通過 JS 操作 DOM ，插入link標簽來改變樣式；由于 DOM 方法是基于文檔的，無法使用@import的方式插入樣式。
（學習視頻分享：web前端入門）
