前面的博客中已经讲到了HTML负责整合Internet资源，而CSS负责对页面的美化，那么CSS与HTML又是怎么联系起来的呢？
或者说，某个HTML文件又是怎么对应到相应的CSS的内容的呢？
这里给出了相应的三种方法。
内联样式 (inline)
内联样式就是直接在HTML元素的style属性中写CSS代码，通常用于对单个元素进行简单的样式设计。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例文档</title>
</head>
<body>
<h3 style = "color:red;font-size:24px">标题</h3>
<p style="color: red; font-weight: bold;">这是一个段落</p>
</body>
</html>
内部样式 (internal)
内部样式就是将CSS文档写到<head>标签内的<style>内：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例文档</title>
<style>
h3{
color:red;
font-size:24px
}
p{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h3>标题</h3>
<p>这是一个段落</p>
</body>
</html>
外部样式表 (external)
外部样式表是将CSS代码写入单独的.css文件中，在HTML文档里通过<link>标签将.css文件引入进去。
使用外部样式表的优点是一是避免了臃肿的HTML文档，二是使得同样的CSS样式文档能够应用给多个HTML文档，从而提高了代码的复用性和可维护性。
示例：
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例文档</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<h3>标题</h3>
<p>这是一个段落</p>
</body>
</html>
CSS文件：
h3{
color:red;
font-size:24px
}
p{
color: red;
font-weight: bold;
}
对于<link>标签，这个标签用于引入外部资源，rel属性定义了外部资源与本文档的关系，stylesheet则意为引入的是CSS文件，href属性则定义了外部资源的路径。
引入多个CSS文件
在一个复杂的项目中，可能需要引入多个CSS文件，此时可以使用多个<link>标签引入。