当浏览器中读取的样式表，它将根据在样式表中的信息格式化HTML文档。
三种方法将CSS
有插入样式表的三种方法：
外部样式表
随着外部样式表，你可以改变整个网站的改变只是一个文件中的样子！
每个页面必须包括对内部外部的样式表文件的引用<link>元素。 在<link>元素进入里面<head>部分：
外部样式表可以写在任何文本编辑器。 该文件不应包含任何HTML标记。 样式表文件必须保存一个.css扩展名。
这里是如何"myStyle.css"的样子：
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | 不要加空格的属性值和单位之间（如margin-left:20 px; ）。 正确的方法是： margin-left:20px; |
|---|
内部样式表
如果一个页面具有独特的风格，可以使用内部样式表。
内部样式的中定义<style>元素，里面的<head> HTML页面的部分：
例
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> 试一试» 内联样式
内嵌样式可用于应用了独特的风格的一个元素。
要使用内联样式，样式属性添加到相关元素。 样式属性可以包含任何CSS属性。
下面的例子演示了如何改变颜色和左边缘<h1>元素：
| 内嵌式失去许多的样式表的优点（通过混合呈现内容）。 谨慎使用此方法！ |
|---|
多个样式表
如果一些性质已被用于在不同的样式表相同的选择器（元件）所定义，将用于从上一次读取的样式表中的值。
例
假设外部样式表有以下样式为<h1>元素：
h1
{
color: navy;
}那么，假设一个内部样式表还具有以下样式的<h1>元素：
h1
{
color: orange;
}如果内部风格是链接到外部样式表后的定义， <h1>元素将是"orange" ：
例
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> 试一试» 但是，如果内部样式是链接到外部样式表前定义的<h1>元素将是"navy" ：
例
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 试一试» 层叠顺序
当有一个HTML元素不止一个样式指定什么风格将被使用？
一般来说，我们可以说，所有的风格将“连带”到一个新的“虚拟”的风格由以下规则，其中排名第一的具有最高优先级表：
- 内嵌样式（在HTML元素内）
- 外部和内部样式表（head部分）
- 浏览器默认
因此，内联样式（特定HTML元素内）具有最高优先级，这意味着它会覆盖中定义的风格<head>标签，或在外部样式表，或浏览器的默认值。