在页面开发中，把CSS直接写进HTML文件可以减少请求次数，也方便做局部验证。根据作用范围与维护方式的不同，直接嵌入主要分为内联样式、头部style标签以及通过脚本动态写入style属性三类。下面分别说明它们的写法与典型用途。
一、内联样式：用style属性直接写
内联样式是把CSS声明直接放在HTML元素的style属性里，它只对该元素生效，且优先级高于内部样式表和外部样式表。这种方式在快速隐藏某个节点、做邮件模板或临时调试时非常直观。
下面是一段使用内联样式的例子，我们将段落文字设为红色并加粗：
<p style="color: red; font-weight: bold;">这段文字使用内联样式</p>
内联样式的优势是作用范围明确、不依赖选择器，改起来马上能看到效果。但它的缺点同样明显：样式和结构与内容混杂，页面变长后极难统一调整；而且无法使用伪类、媒体查询等高级特性。
如果项目中大量使用内联样式，后续改版就要逐个修改标签，维护成本很高。因此内联样式只建议用在个别需要强制覆盖的场景，不要作为常规方案。
二、style标签：在head中嵌入整页样式
使用<style>标签可以把一段CSS规则写在HTML文档的head部分，作用范围是整个页面。它支持选择器、层叠、媒体查询，是最常用的直接嵌入方式。
下面示例在head里定义了所有p标签的颜色与行高，并针对小屏做了适配：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
color: #333;
line-height: 1.6;
}
@media (max-width: 600px) {
p { font-size: 14px; }
}
</style>
</head>
<body>
<p>这是通过style标签设置的段落</p>
</body>
</html>
这种写法的好处是结构与样式分离在同一文件中，既不需要发请求加载外部css，又能用选择器批量控制，比内联样式好维护得多。对于单页工具、活动页非常合适。
不过当页面复杂、样式规则很多时，style标签会让HTML文件变得臃肿，也不利于多个页面复用同一套样式。此时应考虑把样式拆为外部文件。
三、脚本动态写入style属性
在交互逻辑里，我们有时需要根据状态改变元素外观，这时会用JavaScript直接修改元素的style属性，本质上仍是内联样式，只是写入时机放到了运行时。
以下代码在点击按钮后把盒子背景改成蓝色：
function changeColor() {
var box = document.getElementById('box');
box.style.backgroundColor = 'blue';
}
这种直接嵌入适合做动画过渡、主题切换等动态效果。它灵活但有局限：只能写单行声明，复杂样式还是建议在style标签里用class切换。
从优先级来看，脚本写入的内联样式会覆盖style标签里的同名规则。如果调试时发现样式不生效，可以检查是否被某处动态style覆盖。
四、三种方式对比与选择建议
我们可以用一张表梳理它们的差异：
| 方式 | 作用范围 | 优先级 | 适用场景 |
|---|---|---|---|
| style属性内联 | 单个元素 | 最高 | 临时调试、邮件模板 |
| head中style标签 | 整页 | 中 | 单页、活动页 |
| 脚本写style | 单个元素 | 最高 | 动态交互、状态变化 |
总结来说，写demo或改单个节点用内联最快；做完整单页用style标签更清晰；涉及交互再用脚本改style。理解这三种直接嵌入HTML的方法，能让你在不用外部css的情况下也把页面样式安排妥当。