(1) 鏈接式:(外部引入.css文件) ( 用得比較多 ) <link>在html載入前就被引用 在網頁的<head></head>標簽對中用<link>引入外部樣式表,使用html規則引入外部css : <link href="./css/style.css" rel="stylesheet" ...
(1) 鏈接式:(外部引入.css文件) ( 用得比較多 ) <link>在html載入前就被引用
在網頁的<head></head>標簽對中用<link>引入外部樣式表,使用html規則引入外部css :
<link href="./css/style.css" rel="stylesheet" type="text/css"/>
導入式:(外部引入.css文件) ( 不使用 ) @import在html載入完成後才引用,並且無法在JS DOM模型中插入樣式
引入外部CSS文件,<style>標記也是寫在<head>標記中,使用的語法如下:
<style type="text/css">
@import "./css/style.css"
/*@import url(./css/style.css)*/
</style>
(2) 嵌入式 直接寫在<html>標簽下,常在<head></head>中,
優點:速度快,所有的CSS控制都是針對本頁面標簽的,直接在HTML文檔中讀取樣式;
缺點: 單個頁 面顯得臃腫,不能被其他HTML引用造成代碼量相對較多,維護麻煩
<style type="text/css">
div{border:1px #ff0 solid}
</style>
(3) 內聯式 ( 不推薦 ) 其可以用在不經常改動的位置
<div style="border:1px #ff0 solid;">內容</div>