当前位置：首页 > 文章列表 > 文章 > 前端 > 从初学者到专业人士：释放 CSS 继承的力量

从初学者到专业人士：释放 CSS 继承的力量

来源：dev.to 2024-12-18 09:19:04 0浏览收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《从初学者到专业人士：释放 CSS 继承的力量》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

揭开 css 继承的秘密，实现无缝设计

介绍

css 继承是 web 开发的基石，可简化样式并确保整个网站的一致性。然而，对于初学者来说，理解继承如何工作、何时应用以及如何控制它可能会令人困惑。这份全面的指南将带您从零到精通 css 继承，并提供分步解释、示例和实用技巧。最后，您将能够为任何项目创建一致、高效且可扩展的样式。

什么是css继承？

css 继承是指应用于 dom（文档对象模型）中父元素的样式如何向下传递到其子元素。这是一种减少冗余并增强样式表一致性的机制。

但是，并非所有 css 属性都是自然继承的。某些属性，例如与字体相关的样式（例如，颜色、字体系列），会自动由子元素继承。其他的，例如盒模型属性（边距、填充等），则不是。

为什么 css 继承很重要？

一致性：确保整个网站的外观和感觉统一。
效率：减少对多个元素重复相同样式的需要。
可扩展性：使维护和更新样式更容易。

css 继承分步指南

第 1 步：了解 dom 层次结构

css 继承依赖于 html 的结构。 dom 将您的网页表示为树状结构，其中元素相互嵌套。

例子：

<div class="parent">
  <p class="child">this is a paragraph.</p>
</div>

在此示例中：

是父元素。
是子元素。

第 2 步：了解哪些属性被继承

自动继承的属性：

文本和字体相关属性：
- 颜色
- 字体系列
- 行高
- 能见度

不自动继承的属性：

盒子模型属性：
- 保证金
- 填充
- 边框
- 宽度
- 身高
定位和布局属性：
- 显示
- 位置
- z 索引

步骤 3：显式控制继承

您可以使用继承、初始或未设置值来控制继承。

使用继承：强制元素继承属性，即使它不是自然继承的。

#### 示例：

   <style>
     .parent {
       background-color: lightblue;
     }
     .child {
       background-color: inherit; /* forces inheritance */
     }
   </style>
   <div class="parent">
     <div class="child">inherited background</div>
   </div>

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

#### 示例：

   <style>
     .child {
       color: initial; /* resets to default color */
     }
   </style>

使用 unset：删除属性的值，根据属性类型恢复为继承或初始行为。

#### 示例：

   <style>
     .child {
       font-size: unset; /* inherits or resets */
     }
   </style>

第 4 步：利用级联和特异性

继承与 css 级联和特异性规则结合使用。级联决定了当多个规则针对同一元素时应用哪些样式。

例子：

<style>
  body {
    color: black; /* inherited by all children */
  }
  .override {
    color: red; /* higher specificity */
  }
</style>
<body>
  <p>this is black.</p>
  <p class="override">this is red.</p>
</body>

在这种情况下，.override 规则由于其更高的特异性而优先。

第 5 步：使用变量来保持一致性

css 变量（也称为自定义属性）可以增强继承的好处。

例子：

<style>
  :root {
    --main-color: blue;
  }
  body {
    color: var(--main-color);
  }
  .highlight {
    color: var(--main-color);
  }
</style>
<body>
  <p>this is blue.</p>
  <p class="highlight">this is also blue.</p>
</body>

变量自然会继承，这使它们成为一致主题的绝佳选择。

第 6 步：小心处理非继承属性

对于默认情况下不继承的属性，请使用 * 通用选择器或特定选择器将样式应用于父元素。

例子：

<style>
  .container {
    margin: 10px; /* Not inherited */
  }
  .container > * {
    margin: inherit; /* Forces inheritance */
  }
</style>
<div class="container">
  <p>Paragraph with inherited margin.</p>
</div>