css @import url加載樣式應用深入分析

2024-07-11 08:29:22

字體：大中小

來源：轉載

供稿：網友

一直以來寫CSS的時候都沒有過多的考慮使用@import的方式，最近又看到有朋友在討論關于@import的一些好壞，以及要不要使用@import的方式加載樣式。其實對于這個問題在很早以前網絡上就有相關的資料做了介紹這篇《don’t use @import》，英文的哦 (^。^)y-~~ ，不過不用擔心，前端觀察站點上有中文的翻譯《高性能網站設計：不要使用@import》，同時在藍色理想論壇上也有相關的討論《@import 調用樣式表的優勢是什么呢？》，這個帖子的討論是在2010年3月份的，大家可以看看。

為什么大家會關注這個@import呢，或許是因為它也是可以讓頁面加載樣式，而且XHTML標簽中<link />標簽也是把我們的外部樣式加載到頁面中，于是就有朋友得到“不知道如何選擇”的選擇性綜合癥了。( # ▽ # )
咱也不是啥權威機構，更不是啥權威人士，但手中有權威指南和CSS手冊，翻開查閱，發現這兩樣法寶上面提到的內容大致是相同的，簡單概括一下：
@import像link一樣，鏈接一個外部樣式表到文檔；
@import會影響到一些低端的瀏覽器（這個低端相信大家都懂，比如IE4，呃，不知道現在還有人在用這個沒 -_”）；
@import必須是在<style>標簽內，或者一個CSS文件中，并且是要在樣式定義之前使用；
導入的外部樣式定義會被文檔中的定義覆蓋（這個也就是加載順序的東西了）；
可以在加載樣式的同時定義為哪些設備顯示，這個跟link方式是一樣的；
這么一點概括內容如果有遺漏的大家繼續補充一下哈。 < (￣︶￣)>
我的廢話似乎多了一點，入正題，先看一下平時大家對于@import方式聊得最多的一個話題，加載順序。既然有加載順序，那么就肯定會有demo啦，主要的文件和代碼如下所示：

復制代碼

代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>詭異的@import</title>
<link rel="stylesheet" href="link_a.css" media="screen" />
<style type="text/css">
@import url(import_b.css);
</style>
<link rel="stylesheet" href="link_b.css" media="screen" />
</head>
<body>
<p class="linxz">ctrip.com linxz</p>
</body>
</html>

link_a.css

復制代碼

代碼如下:
@charset "utf-8";
@import url(import_a.css);/*===== 紅色 =====*/.linxz {color:#FF0000;}

import_a.css

復制代碼

代碼如下:

上一篇：框架邊框與頁面內容的垂直邊距marginheight

下一篇：css 中的background:transparent到底是什么意思有什么作用