css中属性值继承全面总结（推荐）

CSS中属性值继承全面总结

在 CSS 中，属性值继承可以使得子元素继承父元素的某些属性，从而达到简化样式表的作用。本文将对 CSS 中属性值继承进行全面总结，并提供两个实例说明。

一、属性值的继承规则

在 CSS 中，有些属性的值是可以被后代继承的，也就是说子元素可以继承父元素的某些属性值。以下是大部分属性值的继承规则。

1. 可继承的属性：

属性名	属性类型
color	字体颜色
font-style	字体样式
font-weight	字体粗细
font-size	字体大小
line-height	行高
font-family	字体类型
text-align、text-indent、text-transform	文本样式
visibility	是否显示
cursor	鼠标悬停状态
letter-spacing、word-spacing、text-decoration	文本间距和修饰样式

1. 不可继承的属性：

属性名	属性类型
background系列属性、border系列属性、margin系列属性、padding系列属性、width、height	框模型样式
position、left、right、top、bottom	定位相关样式
display、float、clear、overflow、visibility	布局相关样式
vertical-align、text-overflow	其他样式

二、继承的实现方式

在 CSS 中，属性值的继承可以通过 继承性 和 级联性 来实现。

1. 继承性

CSS 中通过 inherit 关键字，设置继承性。

.parent {
  color: red;
}

.child {
  color: inherit;
}

以上代码中，.parent 元素设置了 color 为 red，.child 元素使用 color: inherit; 语法，使得其继承了父元素的 color 属性，

1. 级联性

CSS 中通过选择器的级联关系，设置继承性。比如以下代码：

<div class="parent">
  <p class="child">子元素</p>
</div>

<style>
  .parent {
    color: red;
  }
</style>

以上代码中，.child 元素也继承了 .parent 元素的 color 属性，这种继承方式叫做级联性。

三、实例说明

例1：继承字体属性

<p class="parent">
  这是一个段落，后代元素将继承部分属性哦~
  <span class="child">这是一个块元素</span>
</p>

<style>
  .parent {
    font-size: 18px;
    font-family: "Microsoft YaHei", sans-serif;
    font-weight: 700;
  }
</style>

以上代码中，.child 元素继承了 font-size， font-family，font-weight 这三个属性。

例2：不可继承的属性

<div class="parent">
  <span class="child">这是一个块元素</span>
</div>

<style>
  .parent {
    margin: 10px;
    padding: 10px;
    background-color: red;
  }
</style>

以上代码中，.child 元素无法继承父元素的 background-color，margin，padding 属性，因为它们都属于不可继承的属性。

四、总结

本文介绍了 CSS 中属性值继承的规则、实现方式和两个例子。课件需要注意的是，并非所有属性都能被继承，只有部分属性具有继承性。