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