一、内联样式将 css 写在 html 元素的 style 属性中，如 <p style=”color: red;”>；二、内部 样式表 在 <head> 中用 <style> 标签定义，如 body {background-color: #f0f0f0; }；三、外部样式表创建。css 文件并通过 <link rel=”stylesheet” href=”styles.css”> 引入，便于多页面共享。
如果您希望为 HTML 页面添加样式，但不确定如何将 CSS 正确地应用到 html 文件 中，可以通过多种方式实现样式的嵌入。以下是几种快速且有效的实现方法：
一、内联样式
内联样式是将 CSS 直接写在 html 元素 的 style 属性中，适用于单个元素的样式设置，适合快速修改或测试。
1、在 HTML 标签中添加 style 属性，并写入 CSS 规则。例如：<p style=”color: red; font-size: 16px;”> 这是一段红色文字 </p>
2、确保每个样式声明以分号结束，避免语法错误导致样式失效。
立即学习 “ 前端免费学习笔记（深入）”；
二、内部样式表
内部样式表通过在 HTML 文档的 <head> 部分使用 <style> 标签定义 CSS 规则，适用于单个页面的统一样式控制。
1、在 HTML 文件的 <head> 区域插入 <style></style> 标签对。
2、在 <style> 标签内编写 css 选择器 和样式规则。例如：body {background-color: #f0f0f0;}
3、保存文件后刷新页面，查看样式是否生效。
三、外部样式表
外部样式表是将 CSS 代码保存在一个独立的。css文件中，然后通过 link 标签引入到 HTML 文件中，便于多页面共享和维护。
1、创建一个以。css 为扩展名的文件，如 styles.css，并在里面编写 CSS 规则。
2、在 HTML 文件的 <head> 部分添加 link 标签，指向该 CSS 文件。例如：<link rel=”stylesheet” href=”styles.css”>
3、确保 HTML 文件与 CSS 文件路径正确，相对路径或绝对路径均可，但必须能正确访问资源。
