HTML 样式

HTML 出现在 1990 年左右，一开始只是为了设计简单的页面，后来随着人们对页面样式的需求不断的增加，在 1996 年 12 月 W3C 推出了 CSS 的概念，用更好的方式来设置 HTML 页面样式。使用 CSS 你可以很容易的设置 HTML 元素的样式，不过因为 CSS 和 HTML 是两个东西，所以要想绑定二者的关系，显然需要一些方法。

本教程的目的就是介绍现如今 HTML 页面进入 CSS 样式表的三种方法，分别是：

内联样式，使用 HTML 元素的 style 属性。
嵌入样式，使用文档中使用 <style> 标签。
外部样式，使用 link 元素引入外部 CSS 样式表。

上面的三种引入样式的方法，从上到下，优先级逐级降低。当某 HTML 元素存在多种冲突的样式时，优先级最高的生效。

内联样式

内联样式就是直接在 HTML 元素的 style 属性上写 CSS 代码。style 属性值是一个字符串，所以书写 CSS 规则代码也需要用 ; 分隔，转换成一行字符串，可读性非常差。再加上该方式优先级非常高，写出的代码根本无法复用，所以并不是很推荐。

下面展示一段简单的例子：

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>

使用内联的方式会导致无法设置伪元素或者伪类的样式。

嵌入样式

嵌入方式比较合适设置单一文档的样式，因为代码无法给其它文档复用。HTML 标准中强制需要将 style 元素放到 head 中，因为浏览器一般是顺序解析的，但是如果你不这样做，其实也是可以的，不过可能会导致页面重绘问题。

下面是示例代码：

<head>
    <style>
        body { background-color: YellowGreen; }
		h1 { color: blue; }
        p { color: red; }
    </style>
</head>

外部样式

外部样式是比较理想的引入方式。外部样式会单独放在一个或者多个 CSS 文件中，你可以在 HTML 页面中使用 link 元素将其引入：

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

除了这种方式之外，还有一种导入的方式，那就是使用 @import 规则加载外部样式。@import 常见的写法是使用 style 元素，在其它嵌入样式之前，例如：

<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>

所有 @import 规则都必须出现在样式表的开头。样式表中定义的任何样式规则都会覆盖导入样式表中的与之冲突规则。使用 @import 规则可能会导致性能问题，你应该尽量避免使用这种方式。