導入CSS文件主要有兩種方式:
鏈接式(link)
代碼如下
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
導入式(@impot)
<style type=”text/css”>
@import url(“style.css”);
</style>
以上是這兩種方式的語法區別。同時,瀏覽器處理這兩種方式也有所區別:
使用link方式,瀏覽器會先裝載完CSS文件再裝載HTML的主體部分,所以顯示出來的頁面從開始就是帶樣式效果的。
而采用@import方式,瀏覽器則會先裝載完整個HTML文件后再裝載CSS文件。
為什么會這樣呢,究其根本:
link屬于XHTML標簽(功能不局限于導入CSS),而@import則是CSS提供的一種規則(CSS2.1以后,要考慮兼容)。
從用戶體驗上來說,前者會更友好一些,特別是當網頁文件比較大而網速比較慢的時候,后者頁面就會出現明顯的閃爍(開始會沒有樣式效果,當CSS加載完成后,忽然呈現出樣式效果)。
另外,當使用Javascript控制DOM去改變樣式的時候,只能使用link方式,因為@import眼里只有CSS,不是DOM可以控制的。
一個例子:
<html>
<head>
<title>css demo</title>
<link rel=stylesheet type=”text/css” href=”css/name.css” title=”cool”>
<style>
@import url(css/name2.css);
H1 {color:red}
<style>
</head>
<body>
<H1>CSS demo by JET</H1>
<p style=”color:blue”>good luck.
</body>
</html>
1 用link進行引用
<link rel=”stylesheet” type=”text/css” href=”my.css”>
2 用import進行引用
<style type=”text/css”>
@import url(my.css);
</style>
第一種是直接在html頁面上進行css書寫,而第二種和第三種是采用外部引用樣式單獨提取文件。
@import
指定導入的外部樣式表及目標設備類型。
其實link和@import的最根本區別就是,link是一個html的一個標簽,而@import是css的一個標簽,
link除了調用css外還可以有其他作用譬如聲明頁面鏈接屬性,聲明目錄,rss等等,而@import就只能
調用css。如果單獨從外部引用css來說,他們的作用是基本一樣,只不過上面的老大不一樣而已。:)
@import代碼
<style type=”text/css”>
@import url(foo.css) print;
</style>
另外對于css來說還有一種方式@media:
@media print {
@import “print.css”
}
用@media先制定設備為 print,然后再用@impor鏈接
附CSS與HTML文檔結合的4中方法:
1 使用<link>元素鏈接到外部的樣式文件
新聞熱點
疑難解答