html5已彻底废弃body的text属性,应改用css的color属性并从html元素开始统一设置。

body的text属性早就不能用了
HTML5 完全移除了 这类呈现属性,浏览器可能还会“容忍”它,但解析时直接忽略,不会生效。这不是兼容性问题,是标准层面的废弃——连 HTML Living Standard 里都找不到它了。
用color替代text,但别只设body
很多人写 body { color: #333; } 就以为搞定了,结果发现链接、表格、input 里的文字颜色还是蓝的或黑的不一致。这是因为:color 不会自动继承到所有后代元素,尤其表单控件和伪元素(比如 ::placeholder)默认有自己样式。
- 优先给
body设color,作为基础文本色 - 显式重置常见“抗继承”元素:比如
input, textarea, select { color: inherit; } - 如果要全局统一,更稳妥的是用
* { color: #333 !important; }——但仅限快速原型,线上项目慎用
注意color只管前景色,背景/行高得另配
text 属性当年只控制文字颜色,但它常被误认为也管背景或排版。实际上,body 上曾有的 bgcolor、link、vlink 等也都废了,必须拆开处理:
- 背景色 → 用
background-color(设在body或html,推荐后者防白边) - 未访问链接颜色 →
a:link { color: #0066cc; } - 已访问链接颜色 →
a:visited { color: #663399; } - 行高/字体 → 必须单独设
line-height和font-family,它们不随color传递
现代项目建议从html层起步重置
只靠 body { color: ... } 在复杂组件嵌套下容易漏控。真正可靠的起点是:
html {
color-scheme: light;
color: #212121;
background-color: #fff;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body {
margin: 0;
/* 其他布局相关 */
}
这样既覆盖了 body 外的潜在文本容器(比如某些 SVG 内文本),又让 color 成为真正的根级继承源。别小看 html 这一层——很多“怎么设了 color 还不生效”的问题,就卡在这儿。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











