当浏览器读入CSS规则时，它将按照CSS规则来对HTML元素的外观进行调整。
有三种方式可以引入CSS规则：
外部CSS是指把CSS单独写在一个以css为后缀名的css文件里，当某个HTML文档用到它时可以通过<link>元素来像引入头文件一样引用它，下面是一个例子：
在<link>元素中rel属性和type属性的值是固定的，href属性的值是css文件的地址。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
mystyle.css中的内容如下：
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
内部CSS是指直接通过HTML的<style>元素把CSS规则写在HTML文档内部。下面是一个例子，所有的CSS规则都要写在<style>标签里面。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
第三种使用CSS的方法是内联CSS，这种方法直接把CSS规则通过每个元素的style属性写在元素的标签内部。例子如下：
<!DOCTYPE html> <html> <body> <h1 style="color:blue;margin-left:30px;">This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
上面的例子中<h1>元素的style属性值即是CSS规则，写在双引号里面。显示效果如下：
此时，同学们也许会问既然在HTML文档里使用CSS有三种方法，那么假如其中某两种方法定义的CSS规则有冲突时，谁的优先级更高呢？
我们来看下面的例子，在内部CSS中<h1>元素的颜色被定义成orange，但在外部CSS中(参见上文的mystyle.css)<h1>元素的颜色被定义为navy。
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
结果显示最终<h1>元素的颜色是navy!!!, 这是因为当浏览器读入CSS规则时，是按照先看内联CSS,再看内部CSS,最后看外部CSS。换句话说，在优先级上内联CSS > 内部CSS > 外部CSS.