引入外部CSS的兩種方式及區別

時間 2019-12-14

標籤引入外部 css 兩種方式區別欄目 CSS 简体版

原文原文鏈接

一、CSS的兩種引入方式

經過@import指令引入

　　@import指令是CSS語言的一部分，使用時把這個指令添加到HTML的一個<style>標籤中；javascript

　　要與外部的CSS文件關聯起來，得使用url而不是href，而且要把路徑放在一個圓括號裏面；css

<html>
<head>
<style type="text/css">    
    @import url(css/styles.css);
</style>
<!--此處的type屬性是針對HTML4.01的，若在HTML5中則不須要加-->
</head>

<body>
......
</body>
</html

經過<link>標籤引入（最經常使用方式）

<link type="text/css" href="style.css" rel="stylesheet" />
<!--同理，type屬性是針對HTML4.01的-->

二、兩種方式的區別

<link>標籤屬於html標籤，而@import是css提供的一種方式，<link>標籤不只能夠引入css，還能夠作其餘事，而@import只能引入css；
加載順序的區別：當一個頁面被瀏覽時，link引入的css會被同步加載，而@import引用的css是等到其餘元素全被下載完以後才被加載；
兼容性的不一樣：@import是CSS2.1才提出的，因此只有在IE5以上才支持，低版本的瀏覽器不支持，而<link>標籤無此問題；
當使用javascript控制DOM去改變樣式時，只能使用<link>標籤，由於@import不是DOM能夠控制的。

　　//筆試或面試中有可能遇到！！！html

相關標籤/搜索