CSS继承
CSS继承
CSS继承就是，给父级元素设置一些属性，子级元素可以继承这些属性。
有继承性的属性：
- 1.字体系列属性
- 2.文本系列属性
- 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.元素可见性
- 2.光标属性
内联元素可以继承的属性：
- 1.字体系列属性
- 2.除text-indent、text-align之外的文本系列属性
块级元素可以继承的属性：
- text-indent、text-align
CSS属性拓展
1.生成内容属性quotes
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS参考手册</title>
<style>
q:lang(en) { quotes: '[' ']' "<" ">";}
q:lang(zh-cn) { quotes: "«" "»" '"' '"';}
</style>
</head>
<body>
<p lang="en"><q>Quote me <q>Quote me</q> Quote me!</q></p>
<p lang="zh-cn"><q>Quote me <q>Quote me</q> Quote me!</q></p>
</body>
</html>
个人理解：q标签会依次自动替换成quotes中定义的符号
运行结果：
[Quote me <Quote me> Quote me!]
«Quote me "Quote me" Quote me!»
2.表格布局属性
caption-side
-
设置表格标题的位置
值 描述 top 默认值。把表格标题定位在表格之上 bottom 把表格标题定位在表格之下 inherit 规定应该从父元素继承 caption-side 属性的值 -
<table border="1"> <!--控制的是caption的位置--> <caption>Table 1.1 Customers</caption> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </table>
border-collapse
- 设置表格的边框是否被合并为一个单一的边框
值 说明 collapse 边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 inherit 规定应该从父元素继承 border-collapse 属性的值
border-spacing
- 设置相邻单元格的边框间的距离（仅用于"边框分离"模式）
值 描述 length length 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距 inherit 指定应该从父元素继承border - spacing属性的值
**empty-cells **
- 设置是否显示表格中的空单元格（仅用于"分离边框"模式）
值 描述 hide 不在空单元格周围绘制边框 show 在空单元格周围绘制边框。默认 inherit 规定应该从父元素继承 empty-cells 属性的值
table-layout
- 为表设置表格布局算法
值 描述 automatic 默认。列宽度由单元格内容设定 fixed 列宽由表格宽度和列宽度设定 inherit 规定应该从父元素继承 table-layout 属性的值
3.列表布局属性
list-style-type
- 设置列表项标记的类型
- 最常用于初始化页面上的列表，list-style-type: none
list-style-image
- 使用图像来替换列表项的标记。
- list-style-image: url('sqpurple.gif');
list-style-position
- 指示如何相对于对象的内容绘制列表项标记。
值 描述 inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐 outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐 inherit 规定应该从父元素继承 list-style-position 属性的值
list-style
- 在一个声明中指定所有列表属性
- 可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image
4.页面样式属性
未完待续
5.声音样式属性
未完待续
