在html中,引入css的方法主要有行內式、內嵌式、導入式和鏈接式4種
1。行內式
即在標記的style屬性中設定css樣式,這種方式本質上沒體現出css的優勢,因此不推薦使用。
2。嵌入式
在對頁面中各種元素的設置集中寫在<head>和</head>之間的,對於單個頁面來說,這種方式很方便
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
這種方法的使用情況要少的多,最長見得就是訪問量大的門戶網站。或者訪問量較大的企業網站的首頁。與第一種方法比起來,優點突出,弊端也明顯。優點:速度快,所有的CSS控制都是針對本頁面標簽的,沒有多余的CSS命令;再者不用外鏈CSS文件。直接在HTML文檔中讀取樣式。缺點就是改版麻煩些,單個頁面顯得臃腫,CSS不能被其他HTML引用造成代碼量相對較多,維護也麻煩些。 但是采用這種方法的公司大多有錢,對他們來說用戶量是關鍵,他們不缺人進行復雜的維護工作。
3。導入式
導入式格式如下:
<style type="text/css">
@import "mystyle.css";
</style>
4。連接式
這種方法可以說是現在占統治地位的引入方法。如同IE與瀏覽器。這也是最能體現CSS特點的方法;最能體現DIV+CSS中的內容與顯示分離的思想,也最易改版維護,代碼看起來也是最美觀的一種。
格式如下:
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
采用后兩種方式后的顯示效果略有區別,區別如下:
1。連接式:會在裝載頁面主體部分之前裝載css文件,這樣顯示出來的網頁從一開始就是帶有樣式效果的,
2 導入式:會在整個頁面裝載完成后再裝載CSS文件,對於有的瀏覽器來說,在一些情況下,如果網頁文件的體積比較大,則會出現先顯示無樣式的頁面,閃爍一下之后再出現設置樣式后的效果,從瀏覽者的感受來說,這是導入式的一個缺陷。
對於一些比較大的網站,為了便於維護,可能會希望把所有的css樣式分類別放到幾個CSS文件中,這樣如果使用連接式引入,就需要幾個語句分別導入CSS文件
如果要調整CSS文件的分類,就需要同時調整HTML文件,這對於維護工作來說,是一個缺陷,如果使用導入式,則可以只引進一個總的CSS文件,在這個文件中再導入其他獨立CSS文件;而連接則不具備這個特性。
因此給大家的建議是:如果僅需要引入一個CSS文件,則使用連接方式,如果需要引入多個CSS文件,則首先用連接方式引入一個“目錄”CSS文件,這個“目錄”
CSS文件中再使用導入式引入其他CSS文件。
如果希望用javascript來動態決定引入哪個css文件,則必須使用連接式才能實現。
PS:關於link和@import的區別
問題1.到底link和@import有什么區別?
我們先來看看他們的定義
Quote link元素
HTML和XHTML都有一個結構,它使網頁作者可以增加於HTML文檔相關的額外信息。這些額外資源可以是樣式化信息(CSS)、導航助手、屬於另外形式的信息(RSS)、聯系信息等等。Quote @import
指定導入的外部樣式表及目標設備類型。其實link和@import的最根本區別就是,link是一個html的一個標簽,而@import是css的一個標簽,
link除了調用css外還可以有其他作用譬如聲明頁面鏈接屬性,聲明目錄,rss等等,而@import就只能
調用css。如果單獨從外部引用css來說,他們的作用是基本一樣,只不過上面的老大不一樣而已。:)
問題2.link合import到底那個更好?
上面說了因為上面的老大不一樣,所以在使用上就會有一些細節的區別,不能說總體誰好誰壞,
只能說具體情況具體分析。
1)我要用javascript進行樣式選擇;
這個時候就要用link,因為link是html元素,可用javascript去控制dom元素最后達到改變樣式的效果。
2)應用打印樣式;
打印樣式顧名思義就是打印頁面時候的樣式。
這個樣式在普通瀏覽下是沒有效果的,只有在打印的時候生效。
如果要為頁面單獨引用打印樣式的話,link和@import都可以的。
3)引用多個樣式;
如果要在一個頁面上引用多個樣式組合產生效果的話,link和@import也是都可以的。