css 樣式引入的方法 link 與import的區別

時間 2020-07-06

標籤 css 樣式引入方法 link import 區別欄目 CSS 简体版

原文原文鏈接

<link> 元素所參考的樣式用戶能夠自由的選擇加以改變，而導入的樣式表單就自動的與剩下的樣式表融合在一塊兒了javascript

CSS與HTML文檔結合的4中方法：
1 使用<link>元素連接到外部的樣式文件
2 在<head>元素中使用"style"元素來指定
3 使用CSS "@import"標記來導入樣式表單
4 在<body>內部的元素中使用"style"屬性來定義樣式css

1 用link進行引用html

2 用import進行引用瀏覽器

第一種是直接在html頁面上進行css書寫，而第二種和第三種是採用外部引用樣式單獨提取文件。url

link和@import有什麼區別？spa

link元素
HTML和XHTML都有一個結構，它使網頁做者能夠增長於HTML文檔相關的額外信息。這些額外資源能夠是樣式化信息（CSS）、導航助手、屬於另外形式的信息（RSS）、聯繫信息等等。
@import
指定導入的外部樣式表及目標設備類型。
其實link和@import的最根本區別就是，link 是一個html 的一個標籤，而@import 是css 的一個標籤 ,
link除了調用css外還能夠有其餘做用譬如聲明頁面連接屬性，聲明目錄，rss等等，而@import就只能
調用csshtm

問題2.link合import到底那個更好？
上面說了由於上面的老大不同，因此在使用上就會有一些細節的區別，不能說整體誰好誰壞，只能說具體狀況具體分析。

1）我要用javascript進行樣式選擇；
這個時候就要用link,由於link是html元素，可用javascript去控制dom元素最後達到改變樣式的效果。
看下列代碼對象

2）我要在應用打印樣式；
打印樣式顧名思義就是打印頁面時候的樣式。這個樣式在普通瀏覽下是沒有效果的，只有在打印的時候生效。若是要爲頁面單獨引用打印樣式的話，link和@import均可以的。

link代碼

@import代碼

另外對於css來講還有一種方式@media：

@media print {
@import "print.css"
}
用@media先制定設備爲 print,而後再用@impor連接

3）我要引用多個樣式；
若是要在一個頁面上引用多個樣式組合產生效果的話，永link和@import也是均可以的。

link代碼

@import代碼

不過我的以爲，用@import引用多文件的時候更加清晰一些，另外對於多樣式還有一種link於@import的組合用法。

先用link引用一個css文件

加載css link與@import的區別：（加載順序不同）其實 link 與 @import 在顯示效果上仍是有很大區別的，基本上來看 link 的加在會在頁面顯示以前所有加在徹底，而 @import 會是讀取完文件以後加在，因此若是網速很好或很快的狀況下，會出現先開始無css定義，然後加載css定義。@import加載頁面時開始的瞬間會有閃爍（無樣式表的頁面），而後才恢復正常（加載樣式後的頁面），Link沒有這個問題。

他們從方法上是同樣的，只是在瀏覽器識別上有點差距，link在支持CSS的瀏覽器上都支持而@import只在5.0一行的版本有效，並且還能用於瀏覽器過濾也就是hack的使用，兼容一些老版本的瀏覽器。因此最好仍是使用link通用型更強，可是對於高版本的瀏覽器，也就是如今的瀏覽器來講，其實都同樣，這是個沒有太大意義的區分。