HTML中style属性直接设置内联CSS样式是唯一合法方式，仅支持“属性: 值;”格式声明，不支持选择器、伪类、媒体查询等，语法错误（如缺分号、单位、引号）会静默丢弃整条声明。
直接用 color 和 font-family 配合 style 属性就能改，但别碰 <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>放在<head>里，例如：<head> <style> body { color: #222; font-family: "Segoe UI", sans-serif; } h1 { color: #1a5fb4; font-size: 1.8rem; } </style> </head> - 注意继承：如果
body设了color: #333，所有没显式设色的子元素（如p、span）都会继承——这点常被忽略，导致“只改了一处，全页都变了” - 类选择器优先级高于标签选择器：
.error { color: #d32f2f; }能盖过p { color: #000; }，但盖不过同个<p>上的内联style="color: blue"
为什么外部 CSS 文件在在线运行环境里基本用不上？
JSBin、CodePen、Replit 等平台默认不支持上传或引用外部 .css 文件——你写 <link rel="stylesheet" href="style.css">，浏览器控制台大概率报 net::ERR_ABORTED，页面保持默认黑字白底。
立即学习“前端免费学习笔记（深入）”；
- 这些平台本质是“单 HTML 文件沙盒”，所有样式必须塞进
<style>或内联style里才生效 - 想模拟外部 CSS 效果？直接把 CSS 规则复制进
<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），遇到系统无该字体就会回退到浏览器默认，颜色可能意外变浅或变灰
