【修真院前端小课堂】
css有哪些属性可以继承？
开场语：
大家好，我是IT修真院上海分院第15期的学员王卓彦，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网CSS任务6，深度思考中的知识点——
css有哪些属性可以继承？
（1）背景介绍：
定义css继承前，先来看一看HTML DOM（文档树），HTML DOM（文档树）是由html元素组成，文档树和家族树类似，也有祖先、后代、父亲、孩子和兄弟。
如图所示，如果在body内添加table标签和ul标签，此时table和ul互为兄弟元素；在ul标签下添加三个li标签，则三个li互为兄弟元素，ul是li的父元素，反之，li是ul的子元素；在table下添加tr标签，tr下添加td标签，则此时，table就可以看成是td的祖先，td则是table的后代。
css中的继承就可以定义为特定的css属性向下传递到子孙元素。这其实也很好理解，就是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。
继承最大的好处就是你可以用很少量的代码为一致性的可视化设计建立一个基础。而且这些样式甚至将作用到你还没写的html上。
但就像孩子会继承父母的头发皮肤颜色，但不会继承父母的声音性格一样，css的继承也并不是所有的属性都可以继承。设想一下如果所有的属性都可以继承，比如给父元素设置了宽高边框等属性，所有的子元素都将拥有这个属性，如果想要修改，就需要花更多的代码清除这些样式，这就会是非常可怕的场景。
所以，我们需要知道，哪些css属性是可以继承的。
（2）知识剖析：
因为属性较多，我们分9类属性探讨。
1、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
font-variant：设置小型大写字母的字体显示文本，所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的文字进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
direction：规定文本的书写方向
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
3、元素可见性：
visibility：控制元素显示隐藏
4、表格布局属性：
caption-side：设置表格标题的位置。
border-collapse：设置是否将表格边框折叠为单一边框。
border-spacing：设置分隔单元格边框的距离。
empty-cells：设置是否显示表格中的空单元格。
table-layout：设置显示单元、行和列的算法。
5、列表布局属性：
list-style：列表风格，包括list-style-type、list-style-image等
list-style：简写列表样式，用于把所有用于列表的属性设置于一个声明中。
list-style-type：修改用于列表项的标志类型。
list-style-image：对各标志使用一个图像。
list-style-position：可以确定标志出现在列表项内容之外还是内容内部。
6、光标属性：
cursor：光标显示为何种形态
7、生成内容属性：
quotes：设置嵌套引用的引号类型。
8、页面样式属性：
page：规定元素应该被显示的页面特定类型。
page-break-inside：设置在表格元素内部避免进行分页的分页行为。
windows：设置当元素内部发生分页时必须在页面顶部保留的最少行数。
orphans：设置当元素内部发生分页时必须在页面底部保留的最少行数。
9、声音样式属性：
speak：设置或检索声音是否给出。
speak-punctuation：设置或检索标点符号如何发音。
speak-numeral：设置或检索数字如何发音。
speak-header：设置或检索表格头与其后的一系列单元格发生多少次关系。
speech-rate：设置或检索发音速度。
volume：设置或检索音量。
voice-family：设置或检索当前声音类型。
pitch：设置或检索音高。
pitch-range：设置或检索声音的平滑程度。
stress：和pitch-range相似。设置或检索当前声音波形的最高峰值。
richness：设置或检索当前声音的音色。
azimuth：设置或检索当前声音的音场角度。
elevation：设置或检索当前声音的音源仰角。
（3）常见问题：
对父级元素设定了可继承的属性后，子元素默认继承，如果子元素不需要这个属性，想要修改的时候怎么办？可以取消吗？
（4）解决方案：
css属性一旦继承了不能被取消，只能重新定义样式。如果子元素需要修改继承的属性，只能重新定义新的样式覆盖。
（5）编码实战：
1. 字体系列属性
.parent {
font-weight: bold;
font-style: italic;
font-size: 24px;
visibility: hidden;
}
p {
visibility: visible;
}
<body>
这是在div标签、p标签外的文本。look at me
<div>
这是包含在div标签内，p标签外的文本。 look at me
<p>
这是包含在p标签内的文本。 look at me
</p>
</div>
</body>
2. 文本系列属性
.parent {
text-indent: 50px;
text-align: center;
line-height: 40px;
word-spacing: 50px;
letter-spacing: 10px;
direction: rtl;
text-transform: capitalize;
color: red;
}
<body>
这是在div标签、p标签外的文本。look at me
<div>
这是包含在div标签内，p标签外的文本。 look at me
<p>
这是包含在p标签内的文本。 look at me
</p>
</div>
</body>
（6）拓展思考
1. 所有元素包括内联元素和块级元素，都能继承上述属性吗？
设置如下html进行代码验证。
<body>
这是在div标签外的文本。look at me
<div>
这是包含在div父元素内，子元素外的文本。 look at me
<span>
这是包含在span标签内的文本。look at me
</span>
<div>
这是包含在div（child）标签内的文本。look at me
</div>
</div>
</body>
结论：
所有元素可以继承的属性：
A 元素可见性：visibility B光标属性：cursor
内联元素可以继承的属性:
A 字体系列属性 B 除text-indent、text-align之外的文本系列属性
块级元素可以继承的属性:
A 字体系列属性 B 包括text-indent、text-align的文本系列属性
2. opacity是能继承的属性吗？
设置如下代码进行验证。
.parent {
opacity: .5
}
.child {
opacity: 1;
}
结论：
当opacity作用于某个元素时，是把这个元素（包括它的内容）作为一个整体看待，即使这个值没有被子元素继承。因此 ，这个元素和它的所有子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素拥有不同的opacity属性值。
（7）参考文献：
1. css中属性值继承全面总结：https://www.jb51.net/CSS/572045.HTML
2. css继承是什么意思？css哪些属性可以继承：https://www.php.cn/css-tutorial-409337.html
3. CSS 继承深度解析：https://www.php.cn/css-tutorial-359316.html
（8）更多讨论：
Q1：继承里有没有什么特殊的标签或属性？
A1：有，a标签的字体颜色，还有h1-h6标签的字体大小，都是不能继承的。
Q2：为什么这几个标签属性不能继承？
A2：这是因为浏览器的缺省样式，浏览器的缺省样式会影响继承的结果，它设定了特定标签的css规则。同时，有些老版本的浏览器可能对继承支持的不太好，例如某些浏览器当遇到<table>的时候，就会丢失所有的继承的属性。
Q3：属性值的inherit和继承有什么关系吗？
A3：每一个属性可以指定值为“inherit”，即：对于给定的元素，该属性和它父元素相对属性的计算值取一样的值。继承值通常只用作后备值，它可以通过显式地指定“inherit”而得到加强，例如：p { font-size: inherit; }
（9）结束语
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
请您登录 后进行评论
[散修弟子]CSS-9106 发表于 2020-12-08 15:07:20 #1
内联元素可以继承的属性:
text-align也能继承啊。
回复