国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

了解CSS中的@import

FrancisSoung / 1927人閱讀

摘要:坑爹呢,看了一大堆,結果告訴我不要使用這也只是個建議,因為的確會帶來一些問題,所以網絡上會有各種抵制的文章,既然設計了,總有它的有用之處,不能過于絕對。

我們知道,css文件引入方式有兩種:
1. HTML中使用link標簽


CSS中@import

@import "style.css";

第一種方式最為常見最為主流,第二種方式則很少見到有人這么寫,因而也常被開發工程師所忽略。這篇文章就詳細解剖之。

語法

@import語法有兩種:

@import "style.css";
@import url("style.css");

這兩種語法并沒什么差別。

規則

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規則一定要先于除了@charset的其他任何CSS規則,這句話是什么意思呢,我們看個例子:

index.html


...

我是什么顏色

import.css

  .hd{
    color: blue;
  }

測試發現,p的顏色并不是import.css里所定義的藍色,而是之前定義的橘黃色。打開網絡請求會發現沒有請求import.css文件,這正是因為,再次強調一遍,import規則一定要先于除了@charset的其他任何CSS規則,所以需要將index.html改成醬紫:


...

我是什么顏色

這時候能看到import.css網絡請求,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文件,然后根據媒體去應用css樣式,而不是根據媒體去選擇性下載css文件。

不要使用@import

這。??拥兀戳艘淮蠖?,結果告訴我不要使用!
這也只是個建議,因為import的確會帶來一些問題,所以網絡上會有各種「抵制@import」的文章,既然設計了@import,總有它的有用之處,不能過于絕對。使用@import影響頁面性能的地方主要體現在兩個方面:

影響瀏覽器的并行下載

多個@import導致下載順序紊亂

具體可以看看高性能網站設計:不要使用@import這篇文章,這里就不多說,看完后記得回來點個贊或收藏:)。

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

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

相關文章

  • 了解CSS中的@import

    摘要:坑爹呢,看了一大堆,結果告訴我不要使用這也只是個建議,因為的確會帶來一些問題,所以網絡上會有各種抵制的文章,既然設計了,總有它的有用之處,不能過于絕對。 我們知道,css文件引入方式有兩種: 1. HTML中使用link標簽 CSS中@import @import style.css; 第一種方式最為常見最為主流,第二種方式則很少見到有人這么寫,因而也常被開發工程師所...

    luxixing 評論0 收藏0
  • link和@import的區別淺析

    摘要:結論就結論而言,強烈建議使用標簽,慎用方式。這樣可以避免考慮的語法規則和注意事項,避免產生資源文件下載順序混亂和請求過多的煩惱。區別從屬關系區別是提供的語法規則,只有導入樣式表的作用是提供的標簽,不僅可以加載文件,還可以定義連接屬性等。 我們都知道,外部引入 CSS 有2種方式,link標簽和@import。它們有何本質區別,有何使用建議,在考察外部引入 CSS 這部分內容時,經常被提...

    YFan 評論0 收藏0
  • link和@import的區別淺析

    摘要:結論就結論而言,強烈建議使用標簽,慎用方式。這樣可以避免考慮的語法規則和注意事項,避免產生資源文件下載順序混亂和請求過多的煩惱。區別從屬關系區別是提供的語法規則,只有導入樣式表的作用是提供的標簽,不僅可以加載文件,還可以定義連接屬性等。 我們都知道,外部引入 CSS 有2種方式,link標簽和@import。它們有何本質區別,有何使用建議,在考察外部引入 CSS 這部分內容時,經常被提...

    cgh1999520 評論0 收藏0
  • Sass快速入門學習筆記

    摘要:在中,你可以像俄羅斯套娃那樣在規則塊中嵌套規則塊。這個過程中,用了兩步,每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規則塊一個個打開。與此類似,會命中元素和類名為的元素。這種選擇器稱為群組選擇器。1. 使用變量; sass讓人們受益的一個重要特性就是它為css引入了變量。你可以把反復使用的css屬性值 定義成變量,然后通過變量名來引用它們,而無需重復書寫這一屬性值?;蛘?,對于僅使用過一 次的屬...

    appetizerio 評論0 收藏0

發表評論

0條評論

FrancisSoung

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<