資訊專欄INFORMATION COLUMN
摘要：坑爹呢，看了一大堆，結(jié)果告訴我不要使用這也只是個建議，因為的確會帶來一些問題，所以網(wǎng)絡(luò)上會有各種抵制的文章，既然設(shè)計了，總有它的有用之處，不能過于絕對。
我們知道，css文件引入方式有兩種：
1. HTML中使用link標簽
CSS中@import
@import "style.css";
第一種方式最為常見最為主流，第二種方式則很少見到有人這么寫，因而也常被開發(fā)工程師所忽略。這篇文章就詳細解剖之。
語法@import語法有兩種：
@import "style.css";
@import url("style.css");
這兩種語法并沒什么差別。
規(guī)則MDN中這么描述@import：
The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.
注意到加粗的部分么——import規(guī)則一定要先于除了@charset的其他任何CSS規(guī)則，這句話是什么意思呢，我們看個例子：
index.html
...我是什么顏色
import.css
.hd{
color: blue;
}
測試發(fā)現(xiàn)，p的顏色并不是import.css里所定義的藍色，而是之前定義的橘黃色。打開網(wǎng)絡(luò)請求會發(fā)現(xiàn)沒有請求import.css文件，這正是因為，再次強調(diào)一遍，import規(guī)則一定要先于除了@charset的其他任何CSS規(guī)則，所以需要將index.html改成醬紫：
...我是什么顏色
這時候能看到import.css網(wǎng)絡(luò)請求，p的顏色為橘黃色，覆蓋了import.css里定義的藍色。
媒體查詢@import和link一樣，同樣可以定義媒體查詢(media queries)，我們先看看link定義的方式：
接下來是@import：
@import url("print.css") print;
@import "common.css" screen, projection;
@import url("landscape.css") screen and (orientation:landscape);
@import url("mobile.css") (max-width: 680px);
這里要注意的是，不論是link還是import方式，會下載所有css文件，然后根據(jù)媒體去應用css樣式，而不是根據(jù)媒體去選擇性下載css文件。
不要使用@import這。?？拥?，看了一大堆，結(jié)果告訴我不要使用！
這也只是個建議，因為import的確會帶來一些問題，所以網(wǎng)絡(luò)上會有各種「抵制@import」的文章，既然設(shè)計了@import，總有它的有用之處，不能過于絕對。使用@import影響頁面性能的地方主要體現(xiàn)在兩個方面：
影響瀏覽器的并行下載
多個@import導致下載順序紊亂
具體可以看看高性能網(wǎng)站設(shè)計：不要使用@import這篇文章，這里就不多說，看完后記得回來點個贊或收藏：）。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49459.html
摘要：坑爹呢，看了一大堆，結(jié)果告訴我不要使用這也只是個建議，因為的確會帶來一些問題，所以網(wǎng)絡(luò)上會有各種抵制的文章，既然設(shè)計了，總有它的有用之處，不能過于絕對。 我們知道，css文件引入方式有兩種： 1. HTML中使用link標簽 CSS中@import @import style.css; 第一種方式最為常見最為主流，第二種方式則很少見到有人這么寫，因而也常被開發(fā)工程師所...
摘要：結(jié)論就結(jié)論而言，強烈建議使用標簽，慎用方式。這樣可以避免考慮的語法規(guī)則和注意事項，避免產(chǎn)生資源文件下載順序混亂和請求過多的煩惱。區(qū)別從屬關(guān)系區(qū)別是提供的語法規(guī)則，只有導入樣式表的作用是提供的標簽，不僅可以加載文件，還可以定義連接屬性等。 我們都知道，外部引入 CSS 有2種方式，link標簽和@import。它們有何本質(zhì)區(qū)別，有何使用建議，在考察外部引入 CSS 這部分內(nèi)容時，經(jīng)常被提...
摘要：結(jié)論就結(jié)論而言，強烈建議使用標簽，慎用方式。這樣可以避免考慮的語法規(guī)則和注意事項，避免產(chǎn)生資源文件下載順序混亂和請求過多的煩惱。區(qū)別從屬關(guān)系區(qū)別是提供的語法規(guī)則，只有導入樣式表的作用是提供的標簽，不僅可以加載文件，還可以定義連接屬性等。 我們都知道，外部引入 CSS 有2種方式，link標簽和@import。它們有何本質(zhì)區(qū)別，有何使用建議，在考察外部引入 CSS 這部分內(nèi)容時，經(jīng)常被提...
摘要：在中，你可以像俄羅斯套娃那樣在規(guī)則塊中嵌套規(guī)則塊。這個過程中，用了兩步，每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規(guī)則塊一個個打開。與此類似，會命中元素和類名為的元素。這種選擇器稱為群組選擇器。1. 使用變量; sass讓人們受益的一個重要特性就是它為css引入了變量。你可以把反復使用的css屬性值 定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值?；蛘撸瑢τ趦H使用過一 次的屬...
閱讀 3110·2019-08-30 15:56
閱讀 1259·2019-08-29 15:20
閱讀 1600·2019-08-29 13:19
閱讀 1514·2019-08-29 13:10
閱讀 3412·2019-08-26 18:27
閱讀 3092·2019-08-26 11:46
閱讀 2256·2019-08-26 11:45
閱讀 3799·2019-08-26 10:12
