【前端】如何制作一个自己的网页（8）
以下内容接上文。
CSS的出现，使得网页的样式与内容分离开来。
HTML负责网页中有哪些内容，CSS负责以哪种样式来展现这些内容。因此，CSS必须和HTML协同工作，那么如何在HTML中引用CSS呢？
CSS的引用方式有三种：内部样式表、外部样式表、行内样式。
接下来，我们将重点学习内部样式表。
内部样式表
| 内部样式表，是指将CSS放到 |
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* 使用CSS，设置h3元素的颜色为red */ h3 { color: red; } </style> </head> <body> <h3>夜曲编程</h3> <p>https://np.baicizhan.com/</p> </body> </html> |
 |
解释代码
| <style>标签 <style> 标签，必须放在HTML的<head>标签内。 <style> 标签类似于一个容器，里面包含着文档的样式信息，标签内部需要放入具体的CSS代码。 |
|
| CSS代码 CSS代码，必须放在 <style> 标签内，用于设置具体的样式。 第7-9行的CSS代码，表示设置h3元素的颜色为red。 |
|
内部样式表，将CSS样式定义在HTML文档的内部。当我们对单个页面进行设置样式时，会使得整体结构较为清晰。
外部样式表与行内样式
在复杂应用中，外部样式表是最常见的引用CSS的方式。在这里，我们简单介绍一下它的用法。
| 外部样式表，是指将CSS样式代码复制到一个文本文件后，另存为 .css 文件。 然后，我们通过HTML的<link>标签将这个样式文件应用到HTML中。 下面，我们来浏览一下它的代码。 |
|
| 首先，我们需要单独定义一个.css 格式的样式文件（例如style.css） 然后，我们在HTML中使用<link>标签引入这个style.css文件。
注意，<link> 标签也是放在<head>标签中。 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 使用<link>标签，引入路径为style.css的CSS文件 --> <link rel="stylesheet" href="style.css"> </head> <body> <h3>夜曲编程</h3> <p>https://np.baicizhan.com/</p> </body> </html>
|
| <link>标签的两个属性： rel：定义当前文档与被连接文档的关系。这里的"stylesheet"，表示被连接文档是一个样式表文件。 href：定义所连接外部样式表文件的路径。 |
|
| 外部样式表的最方便之处，就在于一个样式可以同时应用于多个页面。 我们可以通过同一个CSS文件，来设置不同HTML文档的样式。 有兴趣的同学可以本地尝试一下~ |
|
| 行内样式 行内样式，也叫内联样式，是在 HTML 元素标签的style属性中直接定义CSS样式。 由于行内样式定义在标签内部，所以它只对所在的标签有效。 |
|
行内样式，虽然可以很方便的为HTML元素设置CSS样式，但它的缺点也非常明显：
1. 需要在每个HTML元素的标签中定义style属性，很不方便；
2. 修改页面样式时需要对页面逐个修改；
3. 过多的行内样式会导致HTML文档的体积增大。
所以，不推荐过多使用行内样式。
总结：
