我們都知道HTML和CSS是作用不相同的兩種語言,但是它們對一個網頁能夠同時產生作用,網頁(webPage)= 內容(html) + 表現(css) + 行為(javascript)。因此需要把CSS引入HTML一起使用。要想在瀏覽器中顯示出預期的CSS樣式表效果,就要讓瀏覽器識別并正確調用CSS。當瀏覽器讀取樣式表時,要依照文本格式來讀,而且當CSS樣式表放在不同的地方,所產生的作用范圍也是不同的。在HTML中,主要用四種方法引入CSS:行內式、內嵌式、導入式和鏈接式。
(1)行內式
<p style=”color:red”>網頁中css的導入方式</p>
即在標記的style屬性中設定CSS樣式,這種方式本質上沒體現出CSS的優勢,因此不推薦使用。
(2)嵌入式
<style type=”text/css”>
P{ color:red }
</style>
在對頁面中各種元素的設置集中寫在<head>和</head>之間的,對于單個頁面來說,這種方式很方便。但是這種方法的使用情況要少的多,最長見得就是訪問量大的門戶網站。或者訪問量較大的企業網站的首頁。與第一種方法比起來,優點突出,弊端也明顯。優點:速度快,所有的CSS控制都是針對本頁面標簽的,沒有多余的CSS命令;再者不用外鏈CSS文件。直接在HTML文檔中讀取樣式。缺點就是改版麻煩些,單個頁面顯得臃腫,CSS不能被其他HTML引用造成代碼量相對較多,維護也麻煩些。但是采用這種方法的公司大多有錢,對他們來說用戶量是關鍵,他們不缺人進行復雜的維護工作。
(3)導入式
<!-- 導入外部樣式:在內部樣式表的<style></style>標記之間導入一個外部樣式表,導入時用@import。 -->
<style type="text/css">
@import "jisuan.css";
</style>
(4)鏈接式
<link href="jisuan.css" rel=”stylesheet” type=”text/css” />
導入式和鏈接式差不多,都是從外部引入CSS文件。但是鏈接式對于客戶端用戶瀏覽網站時,效果會好些。鏈接式可以說是現在占統治地位的引入方法。如同IE與瀏覽器。這也是最能體現CSS特點的方法;最能體現DIV+CSS中的內容與顯示分離的思想,也最易改版維護,代碼看起來也是最美觀的一種。
如果希望用javascript來動態決定引入哪個css文件,則必須使用連接式才能實現。大多數的網站還是比較喜歡使用鏈接的方式引用外部CSS的。
2、鏈接式:會在裝載頁面主體部分之前裝載css文件,這樣顯示出來的網頁從一開始就是帶有樣式效果的。
對于一些比較大的網站,為了便于維護,可能會希望把所有的css樣式分類別放到幾個CSS文件中,這樣如果使用連接式引入,就需要幾個語句分別導入CSS文件。如果要調整CSS文件的分類,就需要同時調整HTML文件,這對于維護工作來說,是一個缺陷,如果使用導入式,則可以只引進一個總的CSS文件,在這個文件中再導入其他獨立CSS文件;而鏈接式則不具備這個特性。
因此給大家的建議是:如果僅需要引入一個CSS文件,則使用鏈接方式,如果需要引入多個CSS文件,則首先用鏈接方式引入一個“目錄”CSS文件,這個“目錄”CSS文件中再使用導入式引入其他CSS文件。
Quote @import的定義
指定導入的外部樣式表及目標設備類型。其實link和@import的最根本區別就是,link是一個html的一個標簽,而@import是css的一個標簽,link除了調用css外還可以有其他作用譬如聲明頁面鏈接屬性,聲明目錄,rss等等,而@import就只能調用css。如果單獨從外部引用css來說,他們的作用是基本一樣,只不過上面的老大不一樣而已。