DIV 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可以控制的。

  

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved