内联 css 通过 html 标签的 style 属性直接定义样式，如 <p style=”color: red; text-align: center;”> 设置红色居中文本 </p>，需用分号分隔声明，避免引号冲突并保持连字符命名。
如果您希望为 html 元素 直接应用样式，而不使用外部文件或内部 样式表，则可以采用内联 CSS 的方式。这种方式将样式直接写在 HTML 标签的属性中。以下是实现内联 CSS 的正确方法：
一、使用 style 属性添加内联 CSS
每个 HTML 元素都可以通过其 style 属性来定义内联 CSS。该属性接受一个 字符串 值，其中包含一条或多条 CSS 声明，每条声明以分号结尾。
1、在 HTML 标签中插入 style 属性，并在其内部编写 CSS 规则。注意：css 属性 名需使用小驼峰命名法或标准连字符格式。
2、例如，设置段落文字颜色为红色并居中显示：<p style="color: red; text-align: center;"> 这是一段红色居中文本 </p>。
立即学习 “ 前端免费学习笔记（深入）”；
3、确保所有 CSS 声明都写在同一行，并用分号隔开，避免语法错误导致样式失效。
二、避免特殊字符和引号冲突
当在javaScript 字符串或动态模板中构建含有内联样式的 HTML 时，容易出现引号嵌套问题。合理使用单双引号可防止解析错误。
1、如果外层使用双引号包裹 HTML 属性，则内联 CSS 中的值应使用单引号，如：style='color: "blue"; font-size: "16px"' 但推荐统一使用双引号配合转义。
2、在 javascript 中拼接时，可使用反斜杠转义双引号："<div style="color: green; font-weight: bold;"> 内容 </div>"。
3、也可利用模板字符串（反引号）简化书写：`<span style="background-color: yellow;"> 高亮文本 </span>`。
三、处理 CSS 属性中的连字符与 JavaScript 命名差异
某些 CSS 属性名称包含连字符（如 font-size、background-color），在 JavaScript 对象 中会被视为减法操作符，因此在动态设置时需特别注意格式。
1、在纯 HTML 中直接书写时，保持标准 CSS 语法即可：style="margin-top: 10px;"。
2、若通过 JavaScript 的 element.style 设置，则应使用驼峰式：element.style.marginTop = "10px"; 但此情况不适用于内联 HTML 写法。
3、在内联 HTML 中始终使用带连字符的标准 CSS 写法，不要使用驼峰命名。
