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

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> 引入外部CSS的兩種方式及區別

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

編輯：CSS特效代碼

1、CSS的兩種引入方式

通過@import指令引入

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

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

<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的-->

2、兩種方式的區別

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

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

CSS特效代碼

CSS中的各種居中方法總結: CSS中的居中可分為水平居中和垂直居中。水平居中分為行內元素居中和塊狀元素居中兩種情況，而塊狀元素又
強大的nth-child(n)偽類選擇器玩法: 寫在前面的戲：最近參加了度娘前端IFE的春季班，刷任務，百度真是有營銷頭腦
css3鼠標懸停(hover)打開打火機代碼: 效果體驗：http://hovertree.com/texiao/css/8.htmHTML文件代碼

DIV CSS 佈局教程網

1、CSS的兩種引入方式

2、兩種方式的區別

相關文章