1.内联样式(Inline style)

缺点：无论是单个页面内还是多个页面之间缺乏整体性和规划性，不利于维护，不推荐使用

  1. <p style="color:sienna;margin-left:20px">这是一个段落。</p>

2.内部样式表(Internal style sheet)

缺点：单个页面内有比较好的整体性和规划性，但在多个页面之间容易混乱

  1. <head>
  2. <style>
  3. hr {color:sienna;}
  4. p {margin-left:20px;}
  5. body {background-image:url("images/back40.gif");}
  6. </style>
  7. </head>

3.外部样式表(External style sheet)

能比较好的避免上述1、2两点的问题，项目多个页面之间的公共组件尽量使用全局统一的外部样式表，对于个别页面的个性组件样式才用内部样式表。

  1. <head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

mystyle.css

  1. p{
  2.   color:sienna;
  3.   margin-left:20px
  4. }

4.多重样式优先级

（内联样式） > （内部样式）>（外部样式） > 浏览器默认样式

5.示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <title>CSS样式优先级</title>
  8.     <!-- 外部样式 mystyle.css -->
  9.     <link rel="stylesheet" type="text/css" href="mystyle.css">
  11.     <!-- 内部样式 -->
  12.     <style type="text/css">
  13.       h3 {
  14.         color: green;
  15.       }
  16.     </style>
  17.   </head>
  19.   <body>
  20.     <!-- 内联样式 -->
  21.     <h3 style="color:red;">测试CSS样式优先级！</h3>
  22.   </body>
  24. </html>