HTML使用CSS樣式的方法

 

在html網頁中引入css樣式表主要有一下四種方法

一、行內引入

<p ></p>

二、嵌入式

<style type="text/css">

　　p{

　　　　width:100px;

　　　　height:40px;

　　　　color:red;

　　}

</style>

三、導入式

<style type="text/css">

　　@import "style.css";

</style>

四、連接式

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

rel="stylesheet"  不能缺乏，否則可能會使頁面樣式加載不了

 

css加載link和@import的區別，即3和4的區別

1）老祖宗的差異。link屬於XHTML標籤，而@import徹底是css提供的一種方式。link標籤除了能夠加載css外，還能夠作不少其餘的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載css

2）加載順序的差異。當一個頁面被加載的時候(就是瀏覽器瀏覽的時候)，link引用的css會同時被加載，而@import引用的css會等到頁面所有被下載完再加載。因此有時候瀏覽@import加載css的頁面時，開始會沒有樣式(就是閃爍)，網速慢的時候比較明顯

3）兼容行的差異。因爲@import是css2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤沒有此問題

4）使用DOM控制樣式時的差異。當使用JavaScript控制DOM去改變樣式的時候，只能使用link標籤，由於@import不是DOM能夠控制的

 從上面的分析來看，仍是link標籤比較好。