理解CSS继承：打造一致样式的指南

大家好啊，欢迎再次来到我的博客👋

简介：

让我们一起探索 CSS 继承 的世界。我们将看看哪些属性会被继承，如何控制这种继承，以及为什么它对你的设计很重要。这份指南适合所有人，无论你是初学者还是资深专家，帮助你利用继承写出更干净、更易维护的 CSS。

在这篇文章里，你将学到什么🤓

• 继承的基础知识：属性继承指的是什么。

• 哪些属性会传递：深入了解哪些属性会传递，哪些不会。

• 管理继承：如何通过CSS关键字和技巧来管理继承。

• 深入示例：展示实际场景中继承的实际应用，附有更详尽的解释。

CSS继承性是什么？

CSS继承性是指某些属性会从父元素自动传递到子元素。这有助于在嵌套元素中一致地应用样式，而不需要重复声明。

继承属性

✅ 常见的继承属性:

• 文字属性：font-family，font-size，color，line-height，text-align。这些设定应该在所有文本内容中保持一致。

• 可见性 , visibility（但不是 display）。

• 光标（cursor）：cursor 用于交互提示的帮助。

💡继承的例子之一：

    <div >
        <h2>此标题也继承了div的字体。</h2>
        <p>这个段落也是如此，保持了文本的一致性。</p>
        <a href="#">这个链接也是如此，除非明确更改。</a>
    </div>

全屏模式 退出全屏。

就是：

显示一张图片

这里，div 内的所有子元素都将采用 Helvetica 字体，除非被其他设置覆盖。

不被继承的特性

❌ 非继承的属性:

• 盒模型的属性：width，height，margin，border，padding。每个元素通常都有自己的空间。

• 背景属性：因为通常每个元素都需要独特的背景。

• 定位：position、top、left、right、bottom。

位置介绍：在网页开发或图形设计中，这些术语通常用来描述元素的定位。

控制继承权

使用 inherit：让一个属性明确从其父元素继承。

    /* 如果父元素有特定颜色，子元素就会继承 */
    .child-element {
        color: inherit;
    }

全屏，退出全屏

使用 initial ： 将某个属性重置为浏览器默认值。

    /* 将字体大小重置为浏览器默认值 */
    .reset-font-size {
        font-size: initial;
    }

进入全屏模式 退出全屏

利用 unset ： 把属性值恢复到继承值或初始值

    /* 如果父元素设置了颜色，则继承该颜色，如果没有父元素设置颜色，颜色将恢复为浏览器默认值 */
    .unset-color {
        color: unset;
    }

全屏查看 退出全屏

一些实际的例子

简化字体选择

    <article >
        <h1>标题：</h1>
        <p>此段落沿用了文章的字体。</p>
        <p>文本颜色也沿用了文章的设定，确保了阅读的舒适度。</p>
    </article>

全屏模式 退出全屏

    /* 这里不需要写任何东西，继承已经处理好了 */

切换到全屏模式 退出全屏

这样：所有在 article 内文本都使用了乔治亚体和深灰，看起来很统一。

(Note: In this case, the markdown syntax remains unchanged as it serves the same purpose in both English and Chinese contexts for displaying images.)

1. 覆盖继承性（即在子类中重新定义父类的方法）

    <nav>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
    </nav>

进入全屏 退出全屏

    nav {
        font-size: 16px; /* 导航的基础字体大小为 16px */
        color: #333; /* 导航文本的基础颜色为 #333 */
    }

    nav a {
        color: inherit; /* 继承导航的颜色，即 #333 */
        font-size: inherit; /* 同样继承字体大小 */
        text-decoration: none; /* 默认为无下划线，不继承其他样式 */
    }

    nav a:hover {
        color: #0056b3; /* 鼠标悬停时颜色变为 #0056b3，覆盖继承的颜色 */
    }

全屏。退出全屏。

结果：链接的开始时大小和颜色与其父 nav 相同，但是鼠标悬停时会改变颜色，展示了对样式继承属性的控制。

提示：要更清楚地查看结果并尝试代码，你可以在Codepen.io网站上复制粘贴所有代码块。

1. 自定义布局继承功能

    <div class="container" >
        <div class="content">这里是内容。此 div 将继承内边距和背景色。</div>
    </div>

全屏显示 退出全屏

    .content {
        padding: inherit; /* 继承容器的内边距值 */
        background: inherit; /* 继承容器的背景颜色 */
    }

切换到全屏模式，退出全屏

效果：content 这个 div 与容器保持相同的填充和背景，确保视觉上的连贯性。

点击这里查看图片:

为什么理解继承很重要

• 一致性：得益于继承，可以使用更少的代码来保持网站风格的一致性。

• 表现：利用继承，可以减少CSS规则，这有助于加快加载速度并解决特异性问题。

• 灵活性：懂得如何控制样式继承和继承关系，可以创造出更灵活的设计，元素可以按需共享或覆盖样式。

结论部分

CSS 继承就像你的网页设计的家谱，确保样式能够有效地向下传递。通过理解并利用继承，你可以创建出既一致又灵活的设计。

记住，虽然有些属性会自然继承，但你可以通过使用 CSS 关键字如 inherit、initial 和 unset 来掌控这一切。

祝你编程愉快！🤓

---

👋 你好，我是Eleftheria，社区经理，开发者，演讲者，同时也是一名内容创作者。

🥰 如果你觉得这篇文章不错，分享一下吧。

🔗 所有链接如下 | X | LinkedIn