頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)

頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來

先回答區(qū)別，再擴(kuò)展一下。

link和@import有什么區(qū)別

區(qū)別1：link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。

區(qū)別2：link引用CSS時(shí)，在頁面載入時(shí)同時(shí)加載；@import需要頁面網(wǎng)頁完全載入以后加載。所以會(huì)出現(xiàn)一開始沒有css樣式，閃爍一下出現(xiàn)樣式后的頁面(網(wǎng)速慢的情況下)

區(qū)別3：link是XHTML標(biāo)簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

區(qū)別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。在html設(shè)計(jì)制作中，css有四種引入方式。

方式一：內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式，也叫行內(nèi)樣式，指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。

示例：

<div style="display: none;background:red"></div>

這通常是個(gè)很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長，且使得網(wǎng)頁難以維護(hù)。

方式二：嵌入樣式

嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只對當(dāng)前的網(wǎng)頁有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS樣式。因?yàn)榍度氲?CSS 只對當(dāng)前頁面有效，所以當(dāng)多個(gè)頁面需要引入相同的 CSS 代碼時(shí)，這樣寫會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。

方式三：鏈接樣式

鏈接方式指的是使用 HTML 頭部的標(biāo)簽引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁面時(shí)只需加載 HTML 文件即可。

方式四：導(dǎo)入樣式

導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

或者寫在css樣式中

@charset "utf-8";
@import url(style.css);
*{ margin:0; padding:0;}
.notice-link a{ color:#999;}

比較鏈接方式和導(dǎo)入方式

鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。

1、link 屬于 HTML，通過 <link> 標(biāo)簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語句應(yīng)寫在樣式表的開頭，否則無法正確導(dǎo)入外部文件；

2、@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無法正確導(dǎo)入外部樣式文件；

3、當(dāng) HTML 文件被加載時(shí)，link 引用的文件會(huì)同時(shí)被加載，而 @import 引用的文件則會(huì)等頁面全部下載完畢再被加載；

小結(jié)：我們應(yīng)盡量使用 <link> 標(biāo)簽導(dǎo)入外部 CSS 文件，避免或者少用使用其他三種方式。

喜歡小編或者覺得小編文章對你有幫助的，可以點(diǎn)擊一波關(guān)注哦！同時(shí)，要源碼的小伙伴可以點(diǎn)擊下方“了解更多”。

原文鏈接：https://segmentfault.com/a/1190000003866058

:import標(biāo)簽
完成類似java的import的功能：
馬克- to-win：馬克 java社區(qū)：防盜版實(shí)名手機(jī)尾號： 73203。

例 2.2.5
<%@ page contentType="text/html; charset=GBK"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<body>
主頁面
<c:import url="hello.jsp">
<c:param name="name" value="mark-to-win" />
</c:import>
</body>
</html>
hello.jsp：

<%@ page contentType="text/html; charset=GBK" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<br>
被包的頁面
<c:out value="被import的html"/>
<c:out value="${param.name}"/>
<br>

運(yùn)行jsp后，瀏覽器中輸出結(jié)果是：

主頁面
被包的頁面被import的html mark-to-win

篇幅有限更多請見擴(kuò)展鏈接:www.mark-to-win.com/tutorial/jsp_5_cimportExample.html

Web 開發(fā)的浩瀚海洋中，CSS 猶如點(diǎn)睛之筆，為網(wǎng)頁增光添彩。而引入 CSS 樣式的方式，也決定了網(wǎng)頁渲染的效率和代碼的可維護(hù)性。 link 和 @import 作為兩種常見的 CSS 引入方式，今天就來一場正面對決，看看誰才是你的最佳選擇！

Round 1：身份揭秘，從出身說起

link ：HTML 的正牌標(biāo)簽，身兼多職，不僅能引入 CSS，還能定義 RSS、rel 鏈接屬性等。可謂是 HTML 家族中的“多面手”。
@import ：CSS 語法規(guī)則的忠實(shí)守護(hù)者，專注于導(dǎo)入樣式表，是 CSS 世界的“專業(yè)選手”。

Round 2：速度之爭，加載順序大比拼

link ：與 HTML 標(biāo)簽并肩作戰(zhàn)，頁面加載時(shí)同步加載，贏在起跑線。
@import : 姍姍來遲，頁面加載完畢后才開始加載，容易造成頁面閃爍，用戶體驗(yàn)稍遜一籌。

Round 3：兼容性考驗(yàn)，誰更勝一籌？

link : HTML 元老級標(biāo)簽，不存在兼容性問題，穩(wěn)如泰山。
@import ：CSS2.1 語法，存在一定的兼容性問題，在老舊瀏覽器中可能會(huì)出現(xiàn)樣式加載失敗的情況。

Round 4：控制權(quán)爭奪，DOM 操作誰更強(qiáng)？

link ：受 JavaScript 和 DOM 的絕對控制，可以通過修改 link 標(biāo)簽屬性動(dòng)態(tài)改變樣式，靈活多變。
@import ：游離于 DOM 之外，無法通過 JavaScript 直接控制，顯得有些“高冷”。

Round 5：權(quán)重較量，誰的影響力更大？

link ：在樣式層疊中擁有更高的權(quán)重，其定義的樣式會(huì)覆蓋 @import 引入的樣式。

終極 PK：示例代碼大 showdown

<!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ā)送請求下載 other-style.css 文件。

總結(jié)：link更勝一籌

綜上所述，link 標(biāo)簽憑借其加載速度快、兼容性好、可控性強(qiáng)等優(yōu)勢，在 CSS 引入方式的較量中更勝一籌，是大多數(shù)場景下的最佳選擇。

當(dāng)然，@import 也并非一無是處，在某些特殊情況下，它也能發(fā)揮作用。例如，當(dāng)我們需要根據(jù)不同的條件加載不同的樣式表時(shí)，可以使用 @import 結(jié)合 JavaScript 實(shí)現(xiàn)動(dòng)態(tài)加載。

#頭條創(chuàng)作挑戰(zhàn)賽#

在線咨詢

上一篇：CSS元素選擇器是怎樣運(yùn)作的？
下一篇：在IE瀏覽器中，使用PHPExcel導(dǎo)出文件時(shí)，文件

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商