CSS的四种引入方式

1.标签内的CSS。2.网页内的CSS。3.link引用的CSS。4.import引用的CSS。

下面是源代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 引入CSS的四种方式 </ title >
< style  type ="text/css" >
/* h2{ color:white;background-color:blue;} */
/* 要想使网页内的CSS生效，必须注释下一行代码 */
@import "import.css";
</ style >
< link  href ="alone.css"  rel ="stylesheet"  type ="text/css"   />
</ head >

< body >
< h1  style ="color:white; background-color:yellow" > 标签内的CSS </ h1 >
< h2 > 网页内的CSS </ h2 >
< h3 > link引用的CSS文件 </ h3 >
< h4 > import引用的CSS文件 </ h4 >
< p > link引用和import引用区别是：link是html加载前就引用，而import是html加载后才引用。举例，采用impor引用，会先显示无样式的页面，然后再把样式放进去。如果用JavaScript动态引用CSS，得使用link引用方式才可实现。 </ p >

</ body >
</ html >

import.css

@charset "utf-8";
/*  CSS Document  */
h4 {  color : #000000 ;  background-color : #009900 ;
}

alone.css

@charset "utf-8";
h3 {  color : white ;  background-color : red ; }
/*  CSS Document  */