整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頭條創(chuàng)作挑戰(zhàn)賽#
無論是link或者是@import，兩者都是外部引用 CSS 的方式。那么這兩種方式是怎么引入外部CSS文件的呢？
#如何學(xué)習(xí)編程##前端##頭條創(chuàng)作挑戰(zhàn)賽##暑期創(chuàng)作大賽##編程語言#
點(diǎn)贊關(guān)注加收藏，每天都會(huì)更新一個(gè)JavaScript知識(shí)?。。。。。。。?！
悉前端的小伙伴都知道網(wǎng)站的性能和網(wǎng)頁代碼有很大的關(guān)系，這里指網(wǎng)頁代碼主要是指前端代碼(html、css、js代碼)，而css合理使用很大關(guān)系上影響網(wǎng)站頁面各種性能，今天主要給大家分析下css中@import和link使用和區(qū)別？
css中的@import和link
在css中@import 導(dǎo)入指定的的外部樣式表及目標(biāo)媒體，css導(dǎo)入外部文件主要是通過link和@import實(shí)現(xiàn)的，它們都各自的語法結(jié)構(gòu)。如果不清楚css基礎(chǔ)知識(shí)可翻看之前發(fā)的文章。
@import代碼示例如下：
<style type="text/css">
@import url(路徑地址/test.css);
</style>
link的代碼示例如下：
<link href="路徑地址/test.css" rel="stylesheet" type="text/css" />
css中@import和link的區(qū)別
1、屬性不同
link是html提供的標(biāo)簽，不僅可以加載css文件，還能定義 RSS、rel 連接屬性等。而
@import是css中的語法規(guī)則
2、加載順序不同
頁面打開時(shí)，link引用的css文件被加載。而@import引用的CSS等頁面加載完后最后加載。
3、兼容性
@import是css2.1后提出的，而link是不存在兼容問題。
4、DOM控制性
js操作DOM，可以使用link改變樣式，無法使用@import的方式使用樣式。
使用@import和link的注意事項(xiàng)？
1、css中避免過多使用 @import
如果了解了@import原理，你就會(huì)明白它的性能并不高，過多使用它會(huì)延長(zhǎng)瀏覽器渲染頁面的時(shí)間。
2、@import可以在css中引入其他樣式表利于修改和擴(kuò)展。
代碼示例如下：
index.css
———————-
@import “test1.css”;
@import “test2.css”;
test1.css
———————-
p {color:blue;}
test2.css
———————-
.mystyle {color:red}
好了關(guān)于“css中的link和@import引用”先聊到這，大家有什么更好想法歡迎評(píng)論。每天學(xué)習(xí)一個(gè)知識(shí)點(diǎn)，每天進(jìn)步一點(diǎn)點(diǎn)。每日寄語”志不立，如無舵這舟，無銜之馬，漂蕩奔逸，終亦何所底乎?！毕乱黄谠蹅兘又摹?/p>
Web 開發(fā)的浩瀚海洋中，CSS 猶如點(diǎn)睛之筆，為網(wǎng)頁增光添彩。而引入 CSS 樣式的方式，也決定了網(wǎng)頁渲染的效率和代碼的可維護(hù)性。 link 和 @import 作為兩種常見的 CSS 引入方式，今天就來一場(chǎng)正面對(duì)決，看看誰才是你的最佳選擇！
<!DOCTYPE html>
<html>
<head>
<title>link vs @import</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
/* style.css */
@import url("other-style.css");
在瀏覽器解析 HTML 文件時(shí)，會(huì)依次解析 link 標(biāo)簽和 style 標(biāo)簽，并下載相應(yīng)的 CSS 文件。@import 規(guī)則會(huì)在 CSS 文件解析時(shí)被執(zhí)行，瀏覽器會(huì)再次發(fā)送請(qǐng)求下載 other-style.css 文件。
綜上所述，link 標(biāo)簽憑借其加載速度快、兼容性好、可控性強(qiáng)等優(yōu)勢(shì)，在 CSS 引入方式的較量中更勝一籌，是大多數(shù)場(chǎng)景下的最佳選擇。
當(dāng)然，@import 也并非一無是處，在某些特殊情況下，它也能發(fā)揮作用。例如，當(dāng)我們需要根據(jù)不同的條件加載不同的樣式表時(shí)，可以使用 @import 結(jié)合 JavaScript 實(shí)現(xiàn)動(dòng)態(tài)加載。
#頭條創(chuàng)作挑戰(zhàn)賽#
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
