欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

web前端入門到實(shí)戰(zhàn)：@import和link引入樣式的區(qū)別

關(guān)于@import和link引入樣式的區(qū)別網(wǎng)上有很多種說法。大致有如下幾種，不過這其中會(huì)有我存疑的地方，我們可以一起來探討一下。

“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 創(chuàng)新互聯(lián)建站是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！

區(qū)別

1.從屬關(guān)系區(qū)別

@import是 CSS 提供的語法規(guī)則，只有導(dǎo)入樣式表的作用；link是HTML提供的標(biāo)簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。

2.加載順序區(qū)別

加載頁面時(shí)，link標(biāo)簽引入的 CSS 被同時(shí)加載； @import 引入的 CSS 將在頁面加載完畢后被加載。

3.兼容性區(qū)別

@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識(shí)別；link標(biāo)簽作為 HTML 元素，不存在兼容性問題。

4.DOM可控性區(qū)別

可以通過 JS 操作 DOM ，插入link標(biāo)簽來改變樣式；由于DOM方法是基于文檔的，無法使用 @import 的方式插入樣式。

5.權(quán)重區(qū)別

link引入的樣式權(quán)重大于@import引入的樣式。（？？？）

我們?cè)诰W(wǎng)上搜索關(guān)于這兩者的區(qū)別的時(shí)候通常會(huì)看見有第5條這么一個(gè)說法。難道第5條真的是這樣嗎？有待商榷。

所以這里我們就通過幾個(gè)demo來驗(yàn)證一下第五條

再驗(yàn)證之前我們先來說說css權(quán)重的相關(guān)概念：

css的權(quán)重指的是選擇器的優(yōu)先級(jí)，CSS 選擇器的權(quán)重高，即選擇器的優(yōu)先級(jí)高。

css的優(yōu)先級(jí)表現(xiàn)在，對(duì)同一個(gè)html元素設(shè)置元素的時(shí)候，不同選擇器的優(yōu)先級(jí)不同，優(yōu)先級(jí)低的樣式將會(huì)被優(yōu)先極高的樣式所覆蓋。

css的權(quán)重優(yōu)先級(jí)表現(xiàn)為：

!important > 行內(nèi)樣式 > ID > 類、偽類、屬性 > 標(biāo)簽名 > 繼承 > 通配符

為了便于理解權(quán)重的計(jì)算方式，我們按以下方式進(jìn)行數(shù)值假設(shè)分析：

web前端入門到實(shí)戰(zhàn)：@import和link引入樣式的區(qū)別

demo:

學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #myid { /* id選擇器權(quán)重為100 */
            background-color: pink;
        }
        #divid .myspan input { /* 權(quán)重為 100 + 10 + 1 = 111 */
            background-color: yellow;
        }
        input[type="button"] { /* 權(quán)重為 10 */
            color: white !important; /* !important權(quán)重為無窮大 */
        }
        input.myclass { /* 此為標(biāo)簽指定式選擇器，權(quán)重為 1 + 10 = 11 */
            color: black;
        }
    </style>
</head>
<body>
    <div id="divid">
        <span class="myspan">
            <input type="button" id="myid" class="myclass" name="myname"
                value="點(diǎn)我" >
                <!-- style樣式的權(quán)重為1000 -->
        </span>
    </div>
</body>
</html>

根據(jù)上述計(jì)算得知：這個(gè)按鈕應(yīng)該是黃色背景，白色字體。

這里又回到我們的主題：link引入的樣式權(quán)重真的大于@import嗎？

難道引入css的方式也會(huì)有權(quán)重嗎？

上demo：

/* green.css */
div {
    background-color: green;
    border: 3px solid red;
}

/* yellow.css */
div {
    background-color: yellow;
    border: 3px solid black;
}

/* blue.css */
@import url("green.css");
div{
    background-color: blue;
}

eg1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 實(shí)例1\. link標(biāo)簽引入yellow.css，內(nèi)聯(lián)樣式引入green.css -->
    <link rel="stylesheet" href="yellow.css">
    <style type="text/css">
        @import url("green.css");
    </style>
</head>
<body>
    <div ></div>
    <!-- 盒子為，綠色背景，紅色邊框，即green.css生效 -->
</body>
</html>

eg2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 實(shí)例2\. 內(nèi)聯(lián)樣式引入green.css，link標(biāo)簽引入yellow.css -->
    <style type="text/css">
        @import url("green.css");
    </style>
    <link rel="stylesheet" href="yellow.css">
</head>
<body>
    <div ></div>
    <!-- 盒子為黃色背景，黑色邊框，即yellow.css生效 -->
</body>
</html>

對(duì)比1和2兩個(gè)例子，我們發(fā)現(xiàn)link和@import這兩種引入css的方式并沒有權(quán)重方面概念，只是單純的展示出css的層疊行罷了。即寫在后邊都樣式會(huì)覆蓋前面的樣式。

eg3）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 實(shí)例3\. 內(nèi)聯(lián)樣式引入green.css，內(nèi)聯(lián)樣式中設(shè)置粉色背景 -->
    <style type="text/css">
        @import url("green.css");
        div {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div ></div>
    <!-- 盒子為粉色背景，紅色邊框，即green.css已生效，但背景色被內(nèi)聯(lián)樣式層疊為粉色 -->
</body>
</html>
學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

eg4）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 實(shí)例4\. link標(biāo)簽引入blue.css，blue.css中引入green.css -->
    <link rel="stylesheet" href="blue.css">
</head>
<body>
    <div ></div>
    <!-- 盒子為藍(lán)色背景，紅色邊框，即green.css已生效，但背景色被blue.css層疊為藍(lán)色 -->
</body>
</html>

分析實(shí)例3和實(shí)例4的結(jié)果可知：

對(duì)于實(shí)例3，我們看到紅色邊框，證明內(nèi)聯(lián)樣式中使用@import引入的green.css已經(jīng)生效，但其背景樣式被內(nèi)聯(lián)樣式中的粉色背景層疊掉，這個(gè)現(xiàn)象表明，@import不只是如我們看到的那樣，處于內(nèi)聯(lián)樣式頂部，其被引入的樣式，在結(jié)構(gòu)上，也確實(shí)是被置于內(nèi)聯(lián)樣式之前，所以內(nèi)聯(lián)樣式才能夠?qū)盈B掉它。

同理，實(shí)例4中，在link標(biāo)簽引入的blue.css文件內(nèi)，頂部同樣存在@import引入的green.css，紅色邊框依然可以證明，green.css已經(jīng)生效，但其背景樣式被blue.css本身的藍(lán)色背景層疊掉，@import引入的樣式在blue.css中也是被置于它本身樣式之前的。

所以由上述實(shí)例證明link引入的樣式權(quán)重大于@import引入的樣式這么說是不太合理的。

疑點(diǎn)？

我們上邊也說了關(guān)于link和@import的區(qū)別，在加載頁面的時(shí)候，不是說在link引入的css樣式的時(shí)候會(huì)先于@import加載嗎？那為啥link引入的樣式又會(huì)覆蓋掉@import引入的樣式啊？

首先我們來回顧一下關(guān)于瀏覽器執(zhí)行過程的一些概念：

加載：根據(jù)請(qǐng)求的url進(jìn)行域名解析，然后向服務(wù)器發(fā)送請(qǐng)求，接收響應(yīng)文件（如HTML、CSS、JS、圖片等）。

解析：對(duì)加載到的資源（HTML、CSS、JS等）進(jìn)行語法解析，構(gòu)建響應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM樹，JS對(duì)象的屬性表，css樣式規(guī)則等）。

渲染：構(gòu)建渲染樹，對(duì)各個(gè)元素進(jìn)行位置計(jì)算、樣式計(jì)算等，然后根據(jù)渲染書完成頁面的布局及繪制的過程（產(chǎn)生頁面的元素）。

所以根據(jù)我們上述的瀏覽器執(zhí)行過程的理解以后，我們我繼續(xù)提出疑問：

link先于@import加載，是不是也先于@import渲染呢？

實(shí)際上，瀏覽器渲染的動(dòng)作一般會(huì)執(zhí)行多次的。最后一次渲染，一定是基于之前加載過的所有樣式整合后渲染樹進(jìn)行繪制頁面的，已經(jīng)被渲染過的頁面元素，也會(huì)被重新渲染。

那么我們就可以把@import這種導(dǎo)入 CSS 文件的方式理解成一種替換，CSS 解析引擎在對(duì)一個(gè) CSS 文件進(jìn)行解析時(shí)，如在文件頂部遇到@import，將被替換為該@import導(dǎo)入的 CSS 文件中的全部樣式。

終于弄明白為何@import引入的樣式，會(huì)被層疊掉了。其雖然后被加載，卻會(huì)在加載完畢后置于樣式表頂部，最終渲染時(shí)自然會(huì)被下面的同名樣式層疊。

名稱欄目：web前端入門到實(shí)戰(zhàn)：@import和link引入樣式的區(qū)別
網(wǎng)站URL：http://chinadenli.net/article26/gojsjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、網(wǎng)站收錄、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)、域名注冊(cè)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)