三种引入CSS规则的方法

当浏览器读入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.