了解 CSS 继承：一致样式指南

大家好，欢迎回到我的博客！ ？

介绍

让我们深入了解 CSS 继承 的世界。我们将探讨哪些属性会传递下去，如何控制此流程，以及为什么它对您的设计很重要。本指南是为每个人（从初学者到经验丰富的专业人士）精心设计的，可帮助您利用继承来获得更干净、更易于维护的 CSS。

您将在本文中学到什么？

• 继承基础知识：属性继承意味着什么。

• 继承哪些属性：深入了解继承和非继承属性。

• 控制继承：如何使用 CSS 关键字和技术管理继承。

• 深入示例：展示继承的实际场景，并附有更详细的解释。

什么是 CSS 继承？

CSS 继承是指某些属性自动从父元素传递给子元素。此机制有助于在嵌套元素之间一致地应用样式，而无需重新声明它们。

继承的属性

** ✅ 常见的继承属性：**

• 文本属性：字体系列、字体大小、颜色、行高、文本对齐。这些旨在在文本内容中保持一致。

• 可见性：可见性（但不显示）。

• 光标：交互式提示的光标。

？继承示例：

<div>



<p>Result:</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173475751395222.jpg"  class="lazy" alt="Understanding CSS Inheritance: A Guide to Consistent Styling" /></p>

<p>Here, all child elements inside the div will have the Helvetica font unless overridden.</p>

<h2>


  <strong>Properties That Don't Inherit</strong>
</h2>

<h3>


  <strong>✖️ Non-Inherited Properties:</strong>
</h3>

<ul>
<li><p><strong>Box Model Properties</strong>: width, height, margin, border, padding. Each element typically controls its own space.</p></li>
<li><p><strong>Background</strong>: background properties, as backgrounds are often meant to be unique per element.</p></li>
<li><p><strong>Position</strong>: position, top, left, right, bottom.</p></li>
</ul>

<h2>


  <strong>Controlling Inheritance</strong>
</h2>

<p><strong>Using</strong> inherit: To explicitly make a property inherit from its parent:<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/* If the parent has a specific color, the child will adopt it */
.child-element {
    color: inherit;
}

登录后复制

使用 初始 : 将属性重置为其浏览器默认值：

/* Resets the font-size to the default size of the browser */
.reset-font-size {
    font-size: initial;
}

使用 unset : 将属性恢复为其继承值或初始值：

/* Will inherit if a parent has a color set, otherwise, it will be initial */
.unset-color {
    color: unset;
}

实际例子

1. 简化版式

<article>





<pre class="brush:php;toolbar:false">/* Nothing needed here; inheritance does the job */

结果：文章中的所有文本均使用 Georgia 字体和深灰色，打造统一的外观。

1. 重写继承

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

nav {
    font-size: 16px; /* Base size for navigation */
    color: #333; /* Base color for text */
}

nav a {
    color: inherit; /* Inherits the color from nav, which is #333 */
    font-size: inherit; /* Also inherits 16px */
    text-decoration: none; /* Default is none, but doesn't inherit */
}

nav a:hover {
    color: #0056b3; /* Changes on hover, overriding inheritance */
}

结果：链接以与其父导航相同的大小和颜色开始，但在悬停时改变颜色，展示对继承的控制。

注意：为了更好地检查结果并试验代码，您可以复制粘贴 Codepen.io 上的所有代码块。

1. 布局的自定义继承

<div>



<p>Result:</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173475751395222.jpg" class="lazy" alt="Understanding CSS Inheritance: A Guide to Consistent Styling"></p>

<p>Here, all child elements inside the div will have the Helvetica font unless overridden.</p>

<h2>


  <strong>Properties That Don't Inherit</strong>
</h2>

<h3>


  <strong>✖️ Non-Inherited Properties:</strong>
</h3>

• Box Model Properties: width, height, margin, border, padding. Each element typically controls its own space.

• Background: background properties, as backgrounds are often meant to be unique per element.

• Position: position, top, left, right, bottom.

Controlling Inheritance

Using inherit: To explicitly make a property inherit from its parent:

/* If the parent has a specific color, the child will adopt it */
.child-element {
    color: inherit;
}

结果：内容 div 保持与其容器相同的内边距和背景，确保无缝的视觉流。

为什么理解继承至关重要

• 一致性：继承有助于用更少的代码保持整个网站的样式一致性。

• 性能：通过利用继承，您可以减少 CSS 规则的数量，这有助于解决加载时间和特异性问题。

• 灵活性：了解如何控制继承可以实现更动态的设计，其中元素可以根据需要共享或覆盖样式。

结论

CSS 继承就像网页设计的家谱，确保样式以逻辑、高效的方式传递下去。通过理解和操纵继承，您可以制作既一致又灵活的设计。

请记住，虽然某些属性会自然继承，但您始终可以使用继承、初始和取消设置等 CSS 关键字进行控制。

编码愉快！ ？

---

？大家好，我是 Eleftheria，社区经理、 开发人员、公共演讲者和内容创建者。

？如果您喜欢这篇文章，请考虑分享。

？ 所有链接 | X | 领英

以上是了解 CSS 继承：一致样式指南的详细内容。更多信息请关注PHP中文网其他相关文章！