我们怎么引用CSS，来配合HTML开发一个网页呢？
CSS的引用共有三种方式：
-
外部样式表：引入外部css文件
-
内部样式表：位于 <head> 标签内部
-
内联样式：在 HTML 元素内部：
我们接下来一个一个的看
CSS－内联样式
-
通过在开始标签中加入 style="样式1;样式2;样式n"
-
多个样式分号隔开
如下，我们设置第一个<p>元素内容红色字体，大小20px，第二个<p>元素内容绿色字体，大小12px
<p style="color: red; font-size: 20px">hello CSS</p> <p style="color: green; font-size: 12px">hello CSS3</p>
通过这种方式，可以对每个元素进行单独的样式设置，但是缺点也很明显，试想：
如果有10个<p>元素，都是红色字体，我们岂不是要写10次，作为一个程序员，相同的代码不应该写两遍^_^，此时可以使用CSS内部样式
CSS－内部样式
-
内部样式写在<head></head>中，当然，你非要写在<body></body>中也是生效的，推荐写在head中
-
CSS样式包含<style></style>标签中
如下，定义了<p>元素中颜色为红色，字体大小20px，body中所有<p>元素均按照此样式显示
<style>
p{
color:red;
font-size: 20px;
}
</style>
<p>hello CSS1</p>
<p>hello CSS2</p>
<p>hello CSS3</p>
内部样式引入css，解决了我们要对每个HTML元素单独设置样式的问题，实现了一定的代码复用，现在考虑这个问题，我们在一个页面中设置了css样式，假如我们有100个页面，都包含一些共同的样式，我们不可能写100遍css样式，这时候需要引用外部样式样式表
CSS－外部样式
-
建立一个".css"后缀的文件，样式写在css文件中
-
html中通过<link rel="stylesheet" type="text/css" href="test.css">引用
-
其中rel="stylesheet" type="text/css"为固定内容，声明引入的为css文件，href引入css的地址
test.css中定义多个css样式，举例如下
p{
color: red;
}
h1{
color: blue;
}
html文件，举例如下，在head中引入css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css外部样式表</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>hello CSS</p>
<h1>hello CSS</h1>
</body>
</html>
CSS－优先级
当一个html元素受多个css样式控制时，优先级从低到高排序为：
-
浏览器缺省设置
-
外部样式表
-
内部样式表（位于 <head> 标签内部）
-
内联样式（在 HTML 元素内部）
内联样式优先级最高，如下所示，通过内部样式设置p元素内容颜色为红色，通过内联样式设置颜色为蓝色，
<style>
p{
color: red;
}
</style>
<p style="color: blue">hello CSS</p>
