CSS Academy · 课时

继承与 all 属性

Q: 「继承与 all 属性」这节课中我会学到什么？

了解 CSS 继承规则，并使用 all 属性重置继承的样式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解 CSS 继承规则，并使用 all 属性重置继承的样式。

继承与 all 属性 是 CoddyKit 上的免费 CSS Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是继承？

一些 CSS 属性会自动将其计算值传递给子元素。这就是继承。它避免了为组件中的每个元素重复编写相同的规则。

可继承属性

通常会继承的属性：排版和文本属性：

font-family、font-size、font-weight、font-style
color
line-height
letter-spacing
text-align
visibility
CSS 自定义属性

不可继承的属性

通常 NOT 继承的属性：盒模型和布局属性：

margin、padding、border
width、height
background
display、position
box-shadow、transform

inherit 关键字

使用 inherit 关键字显式强制继承，这对默认不会继承字体的表单元素很有用：

<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
  <input type="text" placeholder="Inherits font/color" />
  <button>Button inherits too</button>
  <textarea>Inherits</textarea>
  <select><option>Option A</option></select>
</div>

initial 关键字

initial 关键字会将属性重置为 CSS 规范定义的浏览器默认初始值，忽略继承和用户代理样式。

<div style="font-size: 30px; color: tomato;">
  <p>Normal text inherits large tomato-colored style from its parent.</p>
  <p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>

unset 关键字

unset 取决于上下文：

对于可继承属性：表现类似 inherit
对于不可继承属性：表现类似 initial

它实际上会将属性“清除”为其自然状态。

<div style="color: tomato;">
  <p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
  <p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>

revert 关键字

revert 会恢复为浏览器用户代理样式表中的值，即恢复浏览器默认显示的效果，而不应用任何作者样式。这对嵌入式第三方小部件很有用。

<div style="color: tomato; font-family: Georgia, serif;">
  Ancestor style is tomato serif text.
  <div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>

all 属性

all 属性是一种简写形式，可同时将一个关键字应用于所有 CSS 属性，但 direction 和 unicode-bidi 除外。

<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
  <div class="isolated-widget">all: initial — resets everything to spec defaults</div>
  <div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>

实用用法：all: initial

当您需要创建一个完全隔离、不受全局样式或父级样式影响的组件时，请使用 all: initial：

<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
  Page context — large serif tomato text
  <div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>

all: unset 模式

无需了解所有相关属性，即可移除浏览器的按钮样式，创建自定义按钮：

<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>

继承与自定义属性

CSS 自定义属性默认会被继承。这正是它们功能强大的原因：在 :root 上设置的变量可以在任何地方使用。使用 @property { inherits: false } 可使自定义属性不参与继承。

快速检查

哪个关键字会将属性重置为浏览器用户代理的默认值，而不是 CSS 规范中的初始值？

回顾

继承属性会将值传递给后代元素，非继承属性则不会。inherit、initial、unset 和 revert 关键字可以提供明确的控制。all 属性可以一次重置所有属性，对于隔离组件和自定义表单元素非常强大。

常见问题解答

「继承与 all 属性」课时是免费的吗？

是的 — 「继承与 all 属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「继承与 all 属性」这节课中我会学到什么？

了解 CSS 继承规则，并使用 all 属性重置继承的样式。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「继承与 all 属性」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy