html中style属性直接设置内联css样式是唯一合法方式，仅支持“属性: 值;”格式声明，不支持选择器、伪类、媒体查询等，语法错误（如缺分号、单位、引号）会静默丢弃整条声明。

直接用 color 和 font-family 配合 style 属性就能改，但别碰 <font></font> 标签——它在 HTML5 里已被废弃，现代浏览器虽可能渲染，但控制台会报警告，且未来版本可能彻底失效。

用 style 内联属性快速改单个文字

适合在线编辑器（如 JSBin、CodePen、W3Schools TryIt）里临时调试，改完立刻看到效果。

• color 值不能加引号：style="color: red" ✅，style="color: 'red'" ❌
• 十六进制必须合法：#ff6b6b ✅，#f66（简写需三位或六位）✅，#GGG ❌（非法字符）
• font-family 中文名要加引号：font-family: "Microsoft YaHei", sans-serif；英文无空格可不加，如 font-family: Arial
• 常见单位优先用 rem 或 em，比如 font-size: 1.2rem；若需像素级精确，16px 也完全可用

用 <style></style> 块统一控制整页文字样式

比内联更干净，适合在线运行时想一次性调全页标题、段落颜色和字体的场景。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 把 <style></style> 放在 里，例如：

    <style>
      body { color: #222; font-family: "Segoe UI", sans-serif; }
      h1 { color: #1a5fb4; font-size: 1.8rem; }
    </style>

• 注意继承：如果 body 设了 color: #333，所有没显式设色的子元素（如 p、span）都会继承——这点常被忽略，导致“只改了一处，全页都变了”
• 类选择器优先级高于标签选择器：.error { color: #d32f2f; } 能盖过 p { color: #000; }，但盖不过同个 <p></p> 上的内联 style="color: blue"

为什么外部 CSS 文件在在线运行环境里基本用不上？

JSBin、CodePen、Replit 等平台默认不支持上传或引用外部 .css 文件——你写 <link rel="stylesheet" href="style.css">，浏览器控制台大概率报 net::ERR_ABORTED，页面保持默认黑字白底。

• 这些平台本质是“单 HTML 文件沙盒”，所有样式必须塞进 <style></style> 或内联 style 里才生效
• 想模拟外部 CSS 效果？直接把 CSS 规则复制进 <style></style> 块就行，逻辑完全等价
• 真需要复用样式（比如多页主题），得靠平台自身的“CSS panel”或“Settings → CSS”入口，不是手写 <link>

容易被忽略的兼容性与调试细节

在线运行环境看似简单，但几个细节卡住就全白忙：

• rgba() 或 hsl() 在老版 Safari 或 IE 中不支持，如果目标用户含旧设备，建议 fallback：color: #333; color: rgba(51, 51, 51, 0.8)
• 修改后没变色？先看开发者工具（F12）Elements 面板，检查该元素最终计算出的 color 值被哪条规则覆盖——不是“谁写在后面”，而是“谁更具体”
• 在线编辑器有时会缓存旧 CSS，尤其是用了预处理器或自动构建流程时，强制刷新（Ctrl+Shift+R）比反复改代码更有效
• 字体名含空格或中文，不加引号 + 不加备选字体（如 sans-serif），遇到系统无该字体就会回退到浏览器默认，颜色可能意外变浅或变灰

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！