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 >
< 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 ;
}
/* CSS Document */
h4 { color : #000000 ; background-color : #009900 ;
}
alone.css
@charset "utf-8";
h3 { color : white ; background-color : red ; }
/* CSS Document */
h3 { color : white ; background-color : red ; }
/* CSS Document */