CSS當中link與@import指令的區別

Wildcard 發布于2019-08-30 13:08 / 1364人閱讀

摘要：由于工作中一直使用標簽引入外部文件，也沒有專門了解過指令的使用方式及其與標簽的區別。首先，和的作用是相同的，都是用來引入外部代碼，只是二者服務的對象不同標簽為當前的頁面服務，而只為服務。

在平時的前端開發工作中，我們使用HTML頁面引入CSS的方式主要有三種：一種是使用行內樣式，直接給標簽添加style屬性值；一種是使用內部樣式，在頁面中寫style標簽；還有一種則是使用外部樣式，從外部引入CSS文件。

那么使用外部樣式又分為兩種CSS引入方式：link標簽和@import指令。

由于工作中一直使用link標簽引入外部CSS文件，也沒有專門了解過@import指令的使用方式及其與link標簽的區別。于是抽空專門看了看網上的一些技術文章，也順便翻了翻《CSS權威指南》，對這方面的知識進行了一個學習。

首先，link和@import的作用是相同的，都是用來引入外部CSS代碼，只是二者服務的對象不同：link標簽為當前的頁面服務，而@import只為CSS服務。

其次，它們也有一些本質上的差別：

區別1：link屬于HTML標簽，除了引入CSS文件以外還可以做很多其他的事情，比如定義RSS、shortcut icon等；而@import只能用于加載CSS。

區別2：link引用CSS時，在頁面加載時同步加載；而@import在頁面加載完后才開始對對應CSS進行加載。

區別3：link是HTML標簽，所有瀏覽器都支持；@import是CSS 2.1才提出來的使用方式，一些老的瀏覽器不支持。

區別4：link標簽可以使用JavaScript控制DOM去改變樣式；而@import不支持。

以上就是參照網上一些文章整理出來的link與@import的區別。雖然平時工作當中基本都用link標簽了，但是感覺也有必要多學習一點類似于這樣的基礎知識。

云服務器 GPU云服務器 css與html的區別 html與css的區別 html與css區別 MAC?與?PHY?的link問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115327.html

前端面試題總結——VUE（持續更新中）

摘要：前端面試題總結持續更新中是哪個組件的屬性模塊的組件。都提供合理的鉤子函數，可以讓開發者定制化地去處理需求。前端面試題總結——VUE（持續更新中） 1.active-class是哪個組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？在 VueRouter 的參數中使用 children 配置，這樣就可以很好的實現路由嵌套。 //引入兩個組件 ...

SimonMa 2019-08-22 16:08 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

pumpkin9 2019-08-23 17:12 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

Carson 2019-07-31 10:21 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

muzhuyu 2019-07-01 12:43 評論0 收藏0