第六天：背景、继承、层叠与优先级 — 当样式"打架"时谁说了算

蜗牛往上爬 · 前端工业可视化学习笔记第 6 篇
前两天学会了选择器和盒模型。今天处理三个"为什么"：为什么给一个元素写了两条样式，只有一条生效？为什么 body 设了颜色，段落自动变色？为什么别人的背景是渐变的，而我只会纯色？搞懂 CSS 的背景、继承、层叠与优先级，你就真正理解了 CSS 名字里那个"C"（Cascading，层叠）。

一、背景：纯色、图片、渐变
二、CSS 继承：为什么 body 设了颜色，子元素自动变色？
三、层叠与优先级：当样式"打架"时谁说了算
四、浏览器默认样式重置
五、动手练：美化版设备卡片
六、常见坑点与最佳实践
七、这些知识在工业可视化里用在哪？
八、自测挑战 10 题
九、总结

一、背景：纯色、图片、渐变

1.1 背景属性速查

.bg-box {
  /* 纯色 */
  background-color: #f0f0f0;

  /* 背景图片 */
  background-image: url("pattern.png");

  /* 平铺方式：repeat（默认平铺）/ no-repeat / repeat-x / repeat-y */
  background-repeat: no-repeat;

  /* 位置：水平 垂直 */
  background-position: center center;

  /* 尺寸：cover（铺满容器）/ contain（完整显示）/ 具体值 */
  background-size: cover;

  /* 简写（推荐） */
  background: #f0f0f0 url("pattern.png") no-repeat center/cover;
}

属性	作用	常用值
`background-color`	背景色	`#fff` / `rgb()` / `transparent`
`background-image`	背景图	`url("...")`
`background-repeat`	平铺方式	`no-repeat` / `repeat`
`background-position`	定位	`center` / `top left` / `50% 50%`
`background-size`	尺寸	`cover` / `contain` / `100% auto`

💡 cover vs contain：cover 铺满容器（可能裁切），contain 完整显示图片（可能留白）。大屏上全屏背景图用 cover。

1.2 渐变背景

渐变是 CSS 生成的"图片"，不需要加载外部文件。

/* 线性渐变：从上到下 */
.bg-1 {
  background: linear-gradient(to bottom, #1a3a5c, #2d6a4f);
}

/* 线性渐变：从左到右 */
.bg-2 {
  background: linear-gradient(to right, #1a3a5c, #2d6a4f);
}

/* 对角渐变（最常用） */
.bg-3 {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

/* 多色渐变 */
.bg-4 {
  background: linear-gradient(to bottom, #1a3a5c, #219ebc, #8ecae6);
}

linear-gradient 语法：linear-gradient(方向, 颜色1, 颜色2, ...)

方向：to right / to bottom / to top left / 45deg / 135deg
颜色：至少两个，可以多个

二、CSS 继承：为什么 body 设了颜色，子元素自动变色？

2.1 什么会继承、什么不会

body {
  color: #333;              /* ✅ 会继承：所有子元素文字变灰 */
  font-family: "Microsoft YaHei";  /* ✅ 会继承 */
  font-size: 16px;          /* ✅ 会继承 */
  line-height: 1.6;         /* ✅ 会继承 */
  text-align: center;       /* ✅ 会继承 */

  border: 1px solid #ccc;   /* ❌ 不会继承 */
  margin: 20px;             /* ❌ 不会继承 */
  padding: 20px;            /* ❌ 不会继承 */
  width: 800px;             /* ❌ 不会继承 */
  background: #f0f0f0;      /* ❌ 不会继承 */
}

2.2 继承速查表

会继承的（常用）	不会继承的（常用）
`color`	`width` / `height`
`font-family` / `font-size` / `font-weight`	`margin` / `padding`
`line-height`	`border`
`text-align` / `text-indent`	`background`
`visibility` / `cursor`	`position` / `display`
`word-spacing` / `letter-spacing`	`box-shadow` / `border-radius`

🧠 为什么 color 会继承？ 因为你在 body 上设一次颜色，所有文字统一变色，不用给每个 p、h1、span 重写——这是 CSS 的设计哲学：省心。

2.3 强制继承

/* 不想写死值，想让子元素继承父元素的 border？ */
.child {
  border: inherit; /* 强制继承父元素的 border */
}

三、层叠与优先级：当样式"打架"时谁说了算

"层叠（Cascading）"是 CSS 名字里那个 C。当多条规则冲突时，浏览器按优先级决定最终效果。

3.1 优先级从高到低

级别	例子	权重值
最高	`!important`	无敌
很高	内联样式 `<p style="color:red">`	1000
高	id 选择器 `#main`	100
中	class 选择器 `.card` / 属性选择器 / 伪类	10
低	标签选择器 `p` / 伪元素	1
最低	通配符 `*`	0

3.2 权重计算：把数值加起来

/* 权重 = 1（标签选择器） */
p { color: red; }

/* 权重 = 10（class 选择器）—— 胜出，文字是蓝色 */
p.text { color: blue; }

/* 权重 = 100（id 选择器）—— 胜出，文字是绿色 */
#main p { color: green; }

/* 权重 = 1 + 10 = 11 */
p.card { color: gray; }

/* 权重 = 100 + 10 = 110 —— 胜出 */
#main .card { color: black; }

3.3 三条原则

权重相同 → 后来者居上（写在后面的覆盖前面的）
权重不同 → 数值大的胜出
!important → 暴力碾压一切（尽量不用）

p { color: red; }    /* 权重 1 */
p { color: blue; }   /* 权重 1，但写在后面 → 蓝色生效 */

p { color: red; }    /* 权重 1 */
.text { color: blue; } /* 权重 10 → 蓝色生效，即使写在前面 */

3.4 !important：慎用

/* 权重 1 */
p { color: red; }

/* 权重 1 + !important → 无视一切，红色生效 */
p { color: red !important; }

⚠️ !important 是"核武器"——用了它，后面的代码想覆盖极难。调试时遇到 !important 是噩梦。除非万不得已，否则不用。

3.5 调试技巧：F12 Styles 面板

当样式不生效时，F12 → 点击目标元素 → Styles 面板：

被划掉的样式 = 被更高权重的规则覆盖了
没出现的样式 = 选择器没选中或写错了
面板上方是权重最高的有效样式

四、浏览器默认样式重置

不同浏览器对 HTML 元素有默认样式（如 h1 有字号、body 有 margin、ul 有缩进），这些默认值在不同浏览器中可能不一致。

4.1 常用重置写法

/* 放在所有样式最前面 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 去掉列表默认样式 */
ul, ol {
  list-style: none;
}

/* 去掉链接默认下划线和颜色 */
a {
  text-decoration: none;
  color: inherit;
}

/* 去掉按钮默认样式 */
button {
  border: none;
  cursor: pointer;
}

这些重置的目的是消除浏览器差异，让自己从干净的画布开始写样式。

五、动手练：美化版设备卡片

综合本周所有知识（渐变、圆角、阴影、盒模型、文字样式、:hover），做一张真正"好看"的设备卡片。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>美化版设备卡片</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Microsoft YaHei", sans-serif;
        /* 对角渐变背景：深蓝到深绿 */
        background: linear-gradient(135deg, #1a3a5c, #2d6a4f);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }

      /* 主卡片 */
      .device-card {
        width: 320px;
        background: white;
        border-radius: 16px;
        /* 阴影：水平偏移 垂直偏移 模糊半径 颜色 */
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        overflow: hidden;
      }

      /* 卡片顶部：渐变条 */
      .card-header {
        background: linear-gradient(135deg, #219ebc, #023047);
        color: white;
        padding: 20px;
        text-align: center;
      }

      .card-header h3 {
        font-size: 20px;
        margin-bottom: 4px;
      }

      .card-header .status {
        font-size: 14px;
        opacity: 0.9;
      }

      /* 卡片内容区：设备参数 */
      .card-body {
        padding: 20px;
      }

      .info-row {
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        line-height: 1.5;
      }

      .info-row:last-child {
        border-bottom: none;
      }

      .info-label {
        color: #888;
        font-size: 14px;
      }

      .info-value {
        color: #333;
        font-weight: bold;
      }

      .temp-high { color: #d62828; }
      .temp-normal { color: #2d6a4f; }

      /* 卡片底部：按钮 */
      .card-footer {
        padding: 0 20px 20px;
      }

      .btn-detail {
        width: 100%;
        padding: 10px;
        background: linear-gradient(135deg, #219ebc, #023047);
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
      }

      .btn-detail:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(2, 48, 71, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="device-card">
      <div class="card-header">
        <h3>压缩机 A</h3>
        <p class="status">● 运行中</p>
      </div>

      <div class="card-body">
        <div class="info-row">
          <span class="info-label">所属车间</span>
          <span class="info-value">一车间</span>
        </div>
        <div class="info-row">
          <span class="info-label">实时温度</span>
          <span class="info-value temp-high">58℃</span>
        </div>
        <div class="info-row">
          <span class="info-label">实时压力</span>
          <span class="info-value">2.3MPa</span>
        </div>
        <div class="info-row">
          <span class="info-label">运行时长</span>
          <span class="info-value">72 小时</span>
        </div>
        <div class="info-row">
          <span class="info-label">下次检修</span>
          <span class="info-value">2026-08-25</span>
        </div>
      </div>

      <div class="card-footer">
        <button class="btn-detail">查看详情</button>
      </div>
    </div>
  </body>
</html>

分析这张卡片用了哪些知识点：

知识点	在哪
盒模型	全局 `border-box`、卡片 `padding`、`border-radius`
渐变背景	`body` 和 `.card-header` 和 `.btn-detail` 三处渐变
阴影	`box-shadow` 让卡片"浮起来"
继承	`body` 设 `font-family`，所有子元素自动继承
伪类	`.btn-detail:hover` 悬停上浮
选择器组合	`.info-row:last-child`、`.card-header .status`
文字样式	`font-size`、`color`、`font-weight`、`line-height`

六、常见坑点与最佳实践

坑 1：样式写了但没生效 → 被覆盖了

/* 可能的原因：有更高权重的规则覆盖了它 */
.card { color: red; }
#main .card { color: blue; } /* 权重 110 > 10，蓝色生效 */

排查：F12 → Styles 面板，看自己的规则是不是被划了线。

坑 2：背景图不显示 → 路径问题

/* ❌ CSS 中的路径是相对于 CSS 文件的位置，不是 HTML */
background-image: url("images/bg.png");

/* ✅ 确认路径相对关系 */
background-image: url("../images/bg.png");

坑 3：滥用 !important

/* ❌ 到处 !important，代码越来越难维护 */
p { color: red !important; }
.card { color: blue !important; }

如果发现自己在频繁用 !important，说明选择器策略有问题，需要重新梳理。

最佳实践清单

[x] 渐变用 linear-gradient，不需要额外图片
[x] 在 body 上设 font-family、color、line-height，利用继承统一风格
[x] 样式不生效时，用 F12 Styles 面板找"划掉的规则"
[x] 权重不够时，增加选择器精度（而不是用 !important）
[x] 项目开始就写重置样式，消除浏览器差异

七、这些知识在工业可视化里用在哪？

大屏背景 = 渐变

/* 智慧工厂大屏的经典深色背景 */
.screen-bg {
  background: linear-gradient(135deg, #0a1628, #1a3a5c);
  min-height: 100vh;
  color: white; /* 全局白色文字，继承下去 */
}

数据面板 = 半透明 + 渐变边框

.data-panel {
  background: rgba(10, 20, 40, 0.8);
  border: 1px solid rgba(26, 92, 138, 0.6);
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 0 15px rgba(0, 150, 255, 0.1);
}

优先级管理大屏主题

/* 基础面板样式 */
.panel { background: rgba(10,20,40,0.8); color: #8ecae6; }

/* 告警面板覆盖（权重更高） */
.panel.alert { background: rgba(40,10,10,0.9); color: #ff6b6b; }

/* 正常面板可以覆盖回来 */
.panel.success { background: rgba(10,40,20,0.8); color: #6bff8e; }

八、自测挑战 10 题

background: url("bg.png") no-repeat center/cover; 各值分别什么含义？
linear-gradient(to right, red, blue) 和 linear-gradient(45deg, red, blue) 区别？
CSS 继承：哪些属性会继承？color 会继承吗？border 呢？
权重计算：p.card、#main p、.card p span 的权重分别是多少？
同权重下，两个规则都选中同一元素，哪个生效？
!important 是什么？什么时候用？为什么不推荐？
写出常用的浏览器默认样式重置 CSS（至少 3 行）。
box-shadow: 0 4px 12px rgba(0,0,0,0.3); 四个值分别代表什么？
把美化版设备卡片的渐变方向从 135deg 改成 to bottom，看效果。
用 F12 的 Styles 面板，找到一条被"划线"（被覆盖）的样式，看是什么规则覆盖了它。

加分挑战：给美化版设备卡片再加一个 box-shadow，让它在悬停时阴影更大（0 12px 40px）。

九、总结

今天学完，你应该能做到：

[x] 使用纯色、图片、渐变三种背景
[x] 说出哪些 CSS 属性会继承、哪些不会，并利用继承简化代码
[x] 计算简单选择器的权重，判断冲突时谁生效
[x] 理解 Cascading（层叠）的含义：多重规则按优先级叠加
[x] 写出浏览器默认样式重置
[x] 独立做出"美化版设备卡片"（渐变 + 圆角 + 阴影 + 悬停效果）

一句话带走：CSS 的"C"是 Cascading（层叠）——当多条规则冲突时，权重高的"盖住"权重低的。理解继承和优先级，你就不再怕"样式不生效"。

📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 2 周 · 第 3 篇

【HTML+CSS】day06-background-priority