HTML里设置网页背景颜色，两种方式就够了

每个人都可以，
拥有SSL证书

支持通配符SSL证书、多域名证书、IP证书。适配ACME接口, 支持Zerossl、Let's Encrypt和Google等渠道。登录已有账号

15万+ 免费用户

100万+ 累计证书

8年+ 长期稳定服务

HTML里设置网页背景颜色，两种方式就够了

网页背景颜色这东西，看起来简单，但刚开始写的时候还是会绕一下。在HTML里设背景颜色，其实都是在写CSS，区别只是写在哪儿。

常用就两种：放在<style>标签里，或者直接写在元素的style属性上。

一般习惯在<head>里集中写样式。

比如整个页面背景要统一成某个颜色，就直接在<style>标签里定义body的background-color。这样维护起来方便，不用满HTML文件找颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页背景颜色示例</title>
    <style>
        body {
            background-color: #ffcc00; /* 橙色 */
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
</body>
</html>

上面这个跑起来，整个页面背景就是橙色。background-color属性不复杂，设一次整个body都生效。

有时候不想影响全局，只是某个区块换个背景，那就直接在标签上写内联样式。比如<body style="background-color: #4CAF50;">，这一行就搞定了。

写法是直接了点，但临时用一下或者做个小demo没问题。真上项目的页面多了，维护起来会比较头疼，一般还是建议抽到样式表里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页背景颜色示例</title>
</head>
<body style="background-color: #4CAF50;"> <!-- 绿色 -->
    <h1>欢迎来到我的网页</h1>
</body>
</html>

两种方式没优劣之分，看场景。全局的、需要复用的写在<style>或外部CSS文件里；一次性的、覆盖某个特殊元素的，内联也够用。

至于颜色值，常用的记几个就行，剩下的用的时候查。

白色#ffffff、黑色#000000、红色#ff0000、绿色#00ff00、蓝色#0000ff，也支持直接写white、black这种关键字。颜色代码不熟的话，随便搜个取色工具比硬记省事。

聊聊隐藏 div 的两种方式及差异

记一次因 display:none 和 visibility:hidden 理解偏差导致的布局翻车，顺带把 CSS 与 JS 动态控制也说清楚。

2026-07-20 CSS JavaScript div隐藏 display visibility

告别JS！纯CSS实现炫酷选项卡与内容切换，打造无脚本动态UI

还在为交互效果引入繁琐的JavaScript吗？本文揭秘纯CSS的魔法，利用`:target`和`:checked`伪类轻松实现鼠标点击切换内容，并打造出选中高亮的选项卡。无需一行JS代码，就能创建流畅且吸引人的用户界面，大幅提升页面加载速度与开发效率。跟随我们的两个实战示例，即刻掌握这些强大的CSS技巧！

2026-05-18 CSS 交互效果 :target伪类 :checked伪类选项卡高亮