整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          詳解CSS中link和@import區別

          頭條創作挑戰賽#

          無論是link或者是@import兩者都是外部引用 CSS 的方式。那么這兩種方式是怎么引入外部CSS文件的呢?

          link

          1. HTML文件的head標簽中使用link標簽引用CSS文件,其中,rel屬性指定引用的是一個樣式表文件,href屬性指定文件的路徑和文件名。

          @import

          1. HTML文件中使用@import規則引用CSS文件

          區別

          1. link XHTML 標簽,除了加載 CSS 外,還可以定義 RSS 等其他事務;而@import 屬于 CSS 范疇,只能加載 CSS。
          2. link 引用 CSS 時,在頁面載入時同時加載;@import 需要頁面網頁完全載入以后加載。
          3. linkXHTML 標簽,無兼容問題;@import 是在 CSS2.1 提出的,低版本的瀏覽器不支持。可能會存在兼容問題。
          4. link 支持使用 Javascript 控制 DOM 去改變樣式;而@import 不支持。


          #如何學習編程##前端##頭條創作挑戰賽##暑期創作大賽##編程語言#

          點贊關注加收藏,每天都會更新一個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的方式插入樣式。


          主站蜘蛛池模板: 激情啪啪精品一区二区| 亚洲AV无码一区二区三区人| 国产精品一区在线播放| 无码夜色一区二区三区| 视频一区视频二区在线观看| 精品日韩亚洲AV无码一区二区三区| 在线视频亚洲一区| 中文字幕一区二区三区久久网站 | 精品一区二区三区在线观看| 一区二区在线电影| 中文字幕日本精品一区二区三区| 日韩AV片无码一区二区不卡| 蜜臀AV一区二区| 精品福利一区二区三| 日韩一区二区三区在线观看| 精品人妻无码一区二区三区蜜桃一| 日本不卡在线一区二区三区视频| 精品无码中出一区二区| 国产成人久久精品区一区二区 | 国产麻豆精品一区二区三区v视界| 国产福利无码一区在线| 亚洲天堂一区二区三区| 国产一区二区三区高清视频| 精品无码国产一区二区三区麻豆| 亚洲AV无码一区二区三区人| 日本高清不卡一区| 国产自产在线视频一区| 伦理一区二区三区| 中文字幕在线播放一区| 亚洲爽爽一区二区三区| 午夜肉伦伦影院久久精品免费看国产一区二区三区| 国产精品香蕉在线一区| 国产韩国精品一区二区三区久久| 亚洲国产精品一区二区久久| 看电影来5566一区.二区| 中文字幕人妻丝袜乱一区三区 | 久久精品午夜一区二区福利 | 国产剧情一区二区| 成人一区专区在线观看| 成人毛片无码一区二区| 日本精品无码一区二区三区久久久 |