頭條創作挑戰賽#
無論是link或者是@import,兩者都是外部引用 CSS 的方式。那么這兩種方式是怎么引入外部CSS文件的呢?
#如何學習編程##前端##頭條創作挑戰賽##暑期創作大賽##編程語言#
點贊關注加收藏,每天都會更新一個JavaScript知識!?。。。。。。。?/span>
悉前端的小伙伴都知道網站的性能和網頁代碼有很大的關系,這里指網頁代碼主要是指前端代碼(html、css、js代碼),而css合理使用很大關系上影響網站頁面各種性能,今天主要給大家分析下css中@import和link使用和區別?
css中的@import和link
在css中@import 導入指定的的外部樣式表及目標媒體,css導入外部文件主要是通過link和@import實現的,它們都各自的語法結構。如果不清楚css基礎知識可翻看之前發的文章。
@import代碼示例如下:
<style type="text/css">
@import url(路徑地址/test.css);
</style>
link的代碼示例如下:
<link href="路徑地址/test.css" rel="stylesheet" type="text/css" />
css中@import和link的區別
1、屬性不同
link是html提供的標簽,不僅可以加載css文件,還能定義 RSS、rel 連接屬性等。而
@import是css中的語法規則
2、加載順序不同
頁面打開時,link引用的css文件被加載。而@import引用的CSS等頁面加載完后最后加載。
3、兼容性
@import是css2.1后提出的,而link是不存在兼容問題。
4、DOM控制性
js操作DOM,可以使用link改變樣式,無法使用@import的方式使用樣式。
使用@import和link的注意事項?
1、css中避免過多使用 @import
如果了解了@import原理,你就會明白它的性能并不高,過多使用它會延長瀏覽器渲染頁面的時間。
2、@import可以在css中引入其他樣式表利于修改和擴展。
代碼示例如下:
index.css
———————-
@import “test1.css”;
@import “test2.css”;
test1.css
———————-
p {color:blue;}
test2.css
———————-
.mystyle {color:red}
好了關于“css中的link和@import引用”先聊到這,大家有什么更好想法歡迎評論。每天學習一個知識點,每天進步一點點。每日寄語”志不立,如無舵這舟,無銜之馬,漂蕩奔逸,終亦何所底乎。”下一期咱們接著聊。
、從屬關系區別
@import是 CSS 提供的語法規則,只有導入樣式表的作用;link是HTML提供的標簽,不僅可以加載 CSS 文件,還可以定義 RSS、rel 連接屬性等。
2、加載順序區別
加載頁面時,link標簽引入的 CSS 被同時加載;@import引入的 CSS 將在頁面加載完畢后被加載。
3、兼容性區別
@import是 CSS2.1 才有的語法,故只可在 IE5+ 才能識別;link標簽作為 HTML 元素,不存在兼容性問題。
4、DOM可控性區別
可以通過 JS 操作 DOM ,插入link標簽來改變樣式;由于 DOM 方法是基于文檔的,無法使用@import的方式插入樣式。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。