HTML中引用CSS的方法
阿新 • • 發佈：2019-01-22
HTML中使用CSS樣式，一共有4種方法。
1、行內嵌入式，直接在html的標籤中使用style設定樣式。這種方式沒有體現css優勢，在小網頁中使用尚可，不適合大型專案。
<head>
<body>
<div style="font-size:14px;color:#000"> 直接在html標籤中使用style設定樣式</div>
</body>
</html>3、import匯入式，將一個獨立的.css檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS檔案，<style>標記也是寫在<head>標記中。匯入式會在整個網頁裝載完後再裝載CSS檔案，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是匯入式固有的一個缺陷。<head> <style type="text/css"> <!-- .ceshi {font-size:14px; color:#FF0000;}/*這裡是設定CSS樣式*/ --> </style> </head> <body> <div class="ceshi">在head中製作css樣式，然後在body中使用</div> </body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- @import url(wcss.css);/*這裡是通過@import引用CSS的樣式內容*/ --> </style> </head> <body> <div class="ceshi">我是div css測試內容</div> </body> </html>
4、link連結式，也是將一個.css檔案引入到HTML檔案中，但它與匯入式不同的是連結式使用HTML規則引入外部CSS檔案，它在網頁的<head></head>標籤對中使用<link>標記來引入外部樣式表文件。
使用連結式時與匯入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象匯入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" href="wcss.css" type="text/css" /> </head> <body> <div class="ceshi">我是div css測試內容www.divcss5.com支援</div> </body> </html>
總結：一般來說，做網站時把樣式多寫在多個樣式表文件中，因此我們先用連結式引入一個總的CSS檔案，然後在這個CSS檔案中在使用匯入式來引入其他的CSS檔案。但如果通過JavaScrip來動態引入CSS檔案則只能使用連結式。