1.内联样式表
使用内联样式表时，建议在网页的<head></head>标签之间增加一个<meta>标签
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/css; charset=UTF-8">
4 </head>
5 <body>
6 <p>这里没有应用样式表</p>
7 <p style="color:red; font-family:System; font-size:30px">这里应用了内联样式表</p>
8 </body>
9 </html>
不足：同一个网页中如果需要使用的段落比较多，会造成很多代码重复
2.嵌入样式表
1 <html>
2 <head>
3 <style type="text/css" media="screen,projection">
4 p{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p>这里应用样式表</p>
13 </body>
14 </html>
不足：多个网页需要使用同一种样式时，每个html文件中重复定义这些样式
3.外部样式表
把样式规则定义放置在一个单独的外部文件中，即css文件，然后在html中使用时用<link>标签连接
（1）demo.css
1 p{
2 color:red;
3 font-family:System
4 }
（2）test.html
1 <html>
2 <head>
3 <link rel="stylesheet" type="text/css" href="demo.css">
4 </head>
5
6 <body>
7 <p>这里应用样式表</p>
8 </body>
9 </html>
外部样式表可以为整个网站定义通用的样式风格，如需调整外观只需改变外部文件
4.导入样式表
与外部样式表相同，将规则定义放置在一个css文件中，但是使用时是通过 @import 的方式导入
1 <html>
2 <head>
3 <style type="text/css">
4 @import demo.css
5 </style>
6 </head>
7
8 <body>
9 <p>这里应用样式表</p>
10 </body>
11 </html>
优点：可以导入多个css文件，这样就可以把各模块的css样式放在不同的文件里，这些文件不仅可以单独使用，还可以使用@import 实现各种组合效果