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标签比较好。