CSS三種引入方式：內(nèi)聯(lián)、頁(yè)級(jí)、外聯(lián)
來(lái)源：http://www.cnblogs.com/ljwk/p/7136384.html?utm_source=itdadao&utm_medium=referral
1.內(nèi)聯(lián)CSS
內(nèi)聯(lián)CSS也可稱為行內(nèi)CSS或者行級(jí)CSS，它直接在標(biāo)簽內(nèi)部引入，顯著的優(yōu)點(diǎn)是十分的便捷、高效；但是同時(shí)也造成了不能夠重用樣式的缺點(diǎn)，如果代碼行數(shù)到達(dá)一定長(zhǎng)度不建議采用。通常內(nèi)聯(lián)CSS作為測(cè)試使用，可以查找代碼中bug。
<body>
<div style="width: 65px;height: 20px;border: 1px solid;">測(cè)試元素</div>
</body>
2.頁(yè)級(jí)CSS
頁(yè)級(jí)CSS也可稱為內(nèi)部CSS，整體是放在head標(biāo)簽里邊的，在style標(biāo)簽里邊定義樣式，作用范圍和字面意思相同，僅限于本頁(yè)面的元素；如果你寫的代碼超過(guò)了幾百行，想想每次把代碼頁(yè)拉到最上邊都很煩，所以它在可維護(hù)性方面較差。
<head>
<meta charset="utf-8" />
<title>測(cè)試</title>
<style type="text/css">
div {
width: 65px;
height: 20px;
border: 1px solid;
background: greenyellow;
}
</style>
</head>
3. 外聯(lián)CSS
外聯(lián)CSS也可稱為外部CSS，在實(shí)際的項(xiàng)目中通常使用此種方式，它只在頁(yè)面中使用link或者@import引入即可，可維護(hù)性好；并且外聯(lián)CSS是一個(gè)單獨(dú)的文件，可以作用于多個(gè)頁(yè)面，在修改的時(shí)候可以針對(duì)性地修改某一塊區(qū)域，達(dá)到多個(gè)頁(yè)面樣式同時(shí)變更，相較于內(nèi)聯(lián)CSS和頁(yè)級(jí)CSS，省去了到每個(gè)頁(yè)面修改的步驟，提高了開發(fā)效率，同時(shí)一定程度提高了性能。
接下來(lái)具體說(shuō)說(shuō)link和@import的區(qū)別：
1.link:<link rel="stylesheet" type="text/css" href="*.css" />
link語(yǔ)法格式中，rel指的是關(guān)聯(lián)(relation)，type指的是類型，href指的是鏈接文件路徑。
link的作用主要用來(lái)引入CSS和網(wǎng)頁(yè)圖標(biāo)，指示告知搜索引擎，網(wǎng)頁(yè)之間的關(guān)系等。
2. @import:<style>@import url("*.css");</style>
@import語(yǔ)法格式務(wù)必寫在style標(biāo)簽中，后直接加文件路徑即可。
@import作用在CSS文件和頁(yè)面中，可以在一個(gè)CSS文件中引入其他的CSS文件，例如在index.css文件中引入其他CSS文件的樣式，整合在一起后，再在index.html中調(diào)用一次即可，在實(shí)際項(xiàng)目中經(jīng)常使用，方便管理和維護(hù)。
3 二者加載順序影響
HTML加載過(guò)程：
加載HTML-DOM結(jié)構(gòu)
CSS和JS
圖片和多媒體
加載事件觸發(fā)
link和@import都沒(méi)有放置順序的要求，但是不同的放置位置可能會(huì)造成效果顯示的差異。對(duì)于link，無(wú)論放到哪個(gè)位置，都是一邊加載數(shù)據(jù)，一邊進(jìn)行優(yōu)化，視覺感受很好；而對(duì)于@import，放置到哪里，才從哪里開始加載CSS樣式，即先加載數(shù)據(jù)，然后加載樣式，如果網(wǎng)速不佳，可能會(huì)造成只有數(shù)據(jù)出來(lái)，而樣式一點(diǎn)點(diǎn)加載的效果。并且在同一個(gè)頁(yè)面中，調(diào)用兩種方式，link永遠(yuǎn)比@import優(yōu)先級(jí)高。
在項(xiàng)目中使用的時(shí)候，一般在頁(yè)面中調(diào)用方式為link，并且放在head標(biāo)簽中；使用@import除了在CSS文件中，在頁(yè)面調(diào)用時(shí)，一般加載第三方的樣式會(huì)使用到，并且需要放置在頁(yè)面的底部，不會(huì)影響自己的網(wǎng)站。
