頁面引入css用link和import的區別

標籤：ext   載入   family   讀取   一句話   完成   css   引入   lin   

  假設有一個css檔案a.css,檔案裡的內容如下：

p {   font-size: 18px;}

 

現在分別使用兩種方式引入a.css：

  1.使用html的link標籤

<link  rel="stylesheet" type="text/css" href="a.css">

  2.使用import

<style type="text/css">  @import url(a.css);</style>

  3.我們再看一下平常使用的內嵌樣式：

<style>   p {       font-size: 18px;       }</style>

  很明顯第二種和第三種方式是形如<style>css語句</style>的，也就是說其實第二種方式中的@import url(a.css)是css的語句而非html的語句。

  所以我們可以這樣在b.css檔案中使用import語句來引入a.css的內容：

@import url(a.css);

  這樣b.css就把另外一個檔案a.css的內容引入到了b.css中。

  

 其實總結就是一句話：link是html的一個標籤，而import是css的語句，他們老大不同。

 

 link與@import的區別：載入順序不一樣，link會在頁面顯示之前全部載入完成，而@import是讀取完檔案再載入，這也就導致了他們顯示上的區別,使用@import會出現閃爍，原因就是先顯示無css樣式的頁面，載入了import的樣式又會重新排版，所以導致閃爍。而link是載入完才顯示，所以不會出現閃爍的問題。

頁面引入css用link和import的區別