本文介绍两种无需外部css文件即可在html中直接使用css的方法：内部样式表（`
对于刚入门的前端开发者来说，将HTML与CSS整合到一个文件中，不仅便于学习理解、快速预览效果，也极大简化了文件分享与部署流程——你只需传输一个.html文件即可完整运行页面。
✅ 方法一：内部样式表（推荐初学者系统练习）
将CSS代码写在HTML文档的<head>部分内的<style>标签中，称为内部CSS。这种方式允许你为整个页面统一定义样式规则，结构清晰、复用性强，且仍保持单文件优势。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>单文件CSS示例</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f9f9f9;
}
h1 {
color: #2c3e50;
text-align: center;
}
p {
color: #34495e;
font-size: 18px;
max-width: 600px;
margin: 16px auto;
}
</style>
</head>
<body>
<h1>欢迎学习CSS！</h1>
<p>这是使用内部样式表渲染的段落。</p>
</body>
</html>⚠️ 注意：<style>标签必须位于<head>内（虽然浏览器可能容忍其出现在<body>，但不符合HTML标准，可能导致不可预期行为）。
✅ 方法二：内联样式（适用于临时/局部调整）
直接在HTML标签中通过style属性添加CSS声明，称为内联CSS。语法为 style="property: value;"，多个声明用分号;分隔。
<p style="color: #e74c3c; font-weight: bold; font-size: 20px;"> 这是一段高亮强调的文字。 </p> <img src="logo.png" alt="Logo" style="border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">
✅ 优点：优先级最高，可快速覆盖其他样式；
❌ 缺点：无法复用、难以维护、违背“结构与样式分离”原则，不建议在多元素或复杂项目中大量使用。
? 总结与建议
| 方式 | 适用场景 | 可维护性 | 推荐指数 |
|---|---|---|---|
| 内联样式 | 单次微调、原型验证、动态生成标签 | ★☆☆☆☆ | ⭐⭐ |
| 内部样式表 | 小型页面、教学演示、单页应用 | ★★★★☆ | ⭐⭐⭐⭐⭐ |
| 外部样式表 | 正式项目、多页面共享样式 | ★★★★★ | ⭐⭐⭐⭐⭐（进阶必选） |
? 给初学者的提示：
立即学习“前端免费学习笔记（深入）”；
- 先熟练掌握内部样式表，理解选择器、属性和值的基本语法；
- 避免混用过多内联样式，以防后期调试困难；
- 当项目稍具规模（如含多个页面或需团队协作）时，务必迁移到外部CSS文件（<link rel="stylesheet" href="style.css">），这是行业标准实践。
单文件起步很合理，而真正的成长，始于对“合适工具用于合适场景”的认知——你已迈出第一步。
