在Web开发中，CSS本身并不是只能存放在独立的 .css 文件里。实际上，HTML规范从早期就允许把CSS直接写在HTML文档内部，浏览器解析时会一并处理这些样式规则。这种写法在快速原型、单文件演示、邮件排版等场景中非常实用。理解CSS与HTML的结合方式，有助于我们根据项目规模选择更合适的代码结构。
一、使用style属性写内联CSS
内联样式是把CSS直接放在HTML元素的style属性中，它只对该元素生效。由于浏览器在渲染时会把内联样式视为最高优先级的样式来源（仅次于!important规则中的更高声明），因此它常用来做临时覆盖或动态样式绑定。
下面是一段内联样式的例子，我们让一个段落文字显示为蓝色并加粗：
<p style="color:blue;font-weight:bold;">这是一段内联样式控制的文字</p>
这种写法的优点是十分直观，不需要考虑选择器权重冲突，也不会被外部文件覆盖。但缺点同样明显：样式无法复用，页面结构与时样式耦合在一起，后期维护成本高。如果项目中大量使用内联样式，会导致HTML文件臃肿且难以统一调整主题。
二、使用style标签写文档级CSS
在HTML的head区域中使用<style>标签，可以把一段CSS规则嵌入到当前文档中。这类样式对整个页面有效，且能被类选择器、ID选择器等正常匹配，是单页应用中常见的写法。
示例代码如下，我们在头部定义所有.box元素的样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box {
width: 200px;
height: 100px;
background: #f0f0f0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">内容</div>
</body>
</html>
这种写法让样式和结构保持在同一个文件，部署简单，特别适合生成独立的可分享演示页。不过当页面变多时，每个HTML都重复写一遍style标签会造成冗余。此时就应该考虑把CSS抽离到外部文件，通过<link>引入。
三、配合media等属性的局部样式
在style标签上还可以使用media属性，让某段CSS只在特定条件下生效。例如只在打印时应用样式，或者针对小屏幕写专用规则。这也是CSS写在HTML里面的一种扩展用法。
下面演示如何只给屏幕宽度小于600像素的设备设置样式：
<style media="screen and (max-width:600px)">
body {
font-size: 14px;
}
</style>
通过这种方式，我们可以在同一个HTML里管理多套环境样式，而不必依赖外部查询语句。但要注意，过多嵌入媒体查询会让头部代码变长，影响首次解析速度。因此在响应式大型站点中，仍建议用外部CSS配合媒体查询统一维护。
四、三种方式对比与选择建议
为了更清晰地看到差异，我们用表格列出核心特点：
| 写法 | 作用范围 | 优先级 | 复用性 |
|---|---|---|---|
| style属性 | 单个元素 | 最高 | 无 |
| style标签 | 当前文档 | 依选择器权重 | 文档内可复用 |
| style加media | 符合条件的文档环境 | 依选择器权重 | 文档内可复用 |
如果你的需求只是改一个按钮的颜色做测试，内联最省事；如果是做不给外链资源的邮件模板，style标签最稳；若要根据设备切换显示逻辑，带media的style标签能派上用场。掌握这些写法，就能回答“css可以在html里面写吗”这个问题：不仅能写，还要写得明白场合。