1. 内联式CSS（行内式），直接把CSS代码写入到HTML标签中。例如：

```
<p style="color:red";font-size:12px>这里是12px红色的p标签。</p>
```

优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。

2. 嵌入式CSS样式，（内页式）就是把css样式代码写在<style type="text/css">XXX</style>标签之间。例如：

```
<head>
  <style type="text/css">
   span{
     color:red;
    }
  </style>

</head>
```


在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。

3. 外联CSS样式。外联式css样式就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在`<head>`内（不是在`<style>`标签内）使用`<link>`标签将css样式文件链接到HTML文件内。例如：

```
<link href="base.css" rel="stylesheet" type="text/css" />
```

外联CSS是一个单独的文件，可以作用于多个页面，在修改的时候可以针对性地修改某一块区域，达到多个页面样式同时变更，相较于内联CSS和页级CSS，可维护性好,省去了到每个页面修改的步骤，提高了开发效率，同时一定程度提高了性能。
这三种样式是有优先级的。内联式、嵌入式、外联式样式表中css样式是在的相同权值的情况下，优先级：内联式 > 嵌入式 > 外联式，但是嵌入式>外联式有一个前提：嵌入式css样式的位置一定在外联式的后面。总之就是--就近原则（离被设置元素越近优先级别越高）。

```
<p style="color:red";font-size:12px>这里是12px红色的p标签。</p>
```