一、内部内联样式
<html>
<head>
<title>内联CSS样式</title>
</head>
<body>
内联CSS样式:直接把样式写在某个标记内(作为style属性)
<br/>
<H1 STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1>
</body>
</html>
二、内部嵌入样式
<HTML>
<HEAD>
<TITLE> 嵌入CSS样式 </TITLE>
<STYLE TYPE="text/css">
H1 { color: green; font-family: impact }
</STYLE>
</HEAD>
<BODY>
嵌入CSS样式:把样式定义在<head></head>标记中
<H1>Hello,CSS!</H1>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<H2>Stylesheets: The Tool of the Web Design Gods</H2>
</BODY>
</HTML>
三、 外部链接样式
<HTML>
<HEAD>
<TITLE> 外部链接CSS样式 </TITLE>
<LINK REL="stylesheet" HREF="mystyles.css" TYPE="text/css">
</STYLE>
</HEAD>
<BODY>
<H1>Hello,CSS!</H1>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<H2>Stylesheets: The Tool of the Web Design Gods</H2>
</BODY>
</HTML>
----------------------- mystyles.css ------------------------------------------------------------------
H1 { color: green; font-family: impact }
----------------------- mystyles.css ------------------------------------------------------------------
四、外部导入样式
<HTML>
<HEAD>
<TITLE> 外部导入CSS样式 </TITLE>
<STYLE TYPE="text/css">
<!--
/* 导入CSS样式实际上存在于内部样式中 */
@import url(css/mystyles.css);
@import url(css/mystyles2.css);
H1 { color: orange; font-family: impact }
-->
</STYLE>
</HEAD>
<BODY>
<H1>Hello,CSS!</H1>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<H2>Stylesheets: The Tool of the Web Design Gods</H2>
</BODY>
</HTML>
小结:
内部样式:
1.内联样式(行内样式)
2.嵌入样式
外部样式:
1.链接样式
2.导入样式