CSS有哪些属性可以继承？

1.背景介绍

了解css样式表的继承，我们先从文档树（HTML DOM）开始，文档树由HTML元素组成,文档树和家族树类似，也有祖先、后代、父亲、孩子、兄弟。

css样式表继承指的是，特定的css属性向下传递到后代元素

2.知识剖析

对于一些可以继承的属性，可以只设置上级的CSS样式表树形，子级（下级）不用设置，会自动继承此CSS属性，可以减少CSS代码，便于维护。

那么有哪些属性可以自动继承呢？

 一、有继承的属性：

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

二、所有元素可以继承的属性

1、元素可见性：visibility

2、光标属性：cursor

三、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

四、块级元素可以继承的属性

1、text-indent、text-align

五、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

 3.常见问题

问题1: 继承中容易引起的错误:如body{color:blue}

在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧，比如将css定义成这样：

body,table,th,td{color:blue}

这样表格内的文字也会变成蓝色。

问题2：多种样式混合应用的优先级问题

问题3：font-size的继承问题

4.解决方案

问题2解决方案：

当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。

被继承的特性按权重计算方法计算，权重为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已

问题3解决方案：

font-size是可以被继承的。但是它的方式有一些特别。Font-size的子类继承的不是实际值，而是计算后的值。下面是一个例子，有如下代码：

<p>字体大小属性<em>继承特性</em>的演示代码</p>

设置p { font-size:14px;}

由于浏览器默认字体大小是16px，而p定义了字体14px，所以em继承了p的字体大小属性，也是14px；

设置p { font-size:85%;}

浏览器默认字体大小16px,而p定义了字体大小(16px X 85% = 13.6px). 13.6px这个值将被子元素em继承。

p { font-size:0.85em;}

浏览器默认字体大小16px,而p定义了字体大小(16px X 0.85 = 13.6px). 13.6px这个值将被子元素em继承。

设置body { font-size: 85%; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }

    浏览器默认字体大小16px,而body定义了字体大小(16px X 85% = 13.6px). 如果子元素没有指定字体大小13.6px这个值将被子元素继承。

5.编码实战

见PPT中demo

6.扩展思考

nherit关键字：

inherit 关键字指定一个属性应从父元素继承它的值。

inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。

  7.参考文献

参考一：http://jingyan.baidu.com/article/7f41ececcf637a593d095cfd.html学习CSS的继承性

参考二：https://www.oschina.net/translate/css3-inheritance-tips-tricks继承的技巧

8.更多讨论

讨论点一: 除了inherit关键字外，还有什么其他的关键字继承特性

在css3中新增加了几个继承特性
initial:用来设置css属性值为它的默认值，也就是浏览器默认设置的css属性值。
unset:一个属性定义了unset值，如果该属性是默认继承属性，该值等同于inherit，如果该属性是非继承属性，该值等同于initial
all: [ inherit | initial | unset ]:   最后，all是一个属性而不是一个值。你可以指定inherit、initial或者unset来影响所有的属性，例如重置所有CSS属性为浏览器默认。

PPT地址： https://ptteng.github.io/PPT/PPT/css-06-inherit.html#/

视频地址： https://v.qq.com/x/page/o0396xpfr3j.html