继承
在CSS属性定义中,已经指出了这个属性是默认继承的还是默认不继承的。这决定了当没有为元素指定值时该如何计算值。
当一个元素的继承属性,没有指定值时,则获取父元素的同属性的计算值,只有文档根元素取该属性中给定的初始值。
inherit
inherit 关键字允许显示的声明继承性, 对继承和非继承属性都生效
对于继承属性,inherit关键字只是增强了属性的默认行为。只有在重载其他规则的时候被使用。
对于非继承属性,inherit指定的继承行为通常没有多大意义。一般使用initial。和unset代替
initial
initial 关键字将属性的初始值应用于元素。不应该将初始值于浏览器样式表指定的值混淆。
可以应用于任何css属性。 可以将所有css属性恢复到其初始状态
unset
如果unset关键字从其父级继承,则将该属性重新设置为继承的值,如果没有继承父级样式,则将该属性重新设置为初始值
指定从其父元素继承,如果没有继承到就是初始值
revert
all
all简写属性则一次控制所有属性的继承,该属性将其值应用于所有属性。
常见可继承属性
- color
- font-family
- font-size
- font-weight
- font-style
- text-indent
- text-align
- ine-height
- visibility
- cursor
- word-spaceing
- letter-spacing
- text-transform
- direction
层叠
层叠式css的一个基本特征,它是定义了如何合并来自多个原的属性值的算法
只有css声明,会参与层叠计算
声明源
浏览器会有一个基本的样式表来给任何网页设置默认样式。
网页的作者可以定义文档的样式
读者,可以使用自定义样式表定制使用体验
层叠顺序
首先会过滤来自不同源的全部规则。并保留要应用到指定元素上的那些规则
会依据重要性对这些规则进行排序。
来源 | 重要程度 | |
---|---|---|
1 | 用户代理 | 普通 |
2 | 用户 | 普通 |
3 | 网页作者 | 普通 |
4 | css动画 | null |
5 | 用户代理 | !important |
6 | 页面作者 | !impottant |
7 | 用户 | !importtant |
8 | css过度 |
如果层叠顺序相等,后用那个值取决于优先级
动画,@keyframes 定义动画,关键帧不参与层叠。在满足多个条件的关键帧存在时,在最后的关键帧会被选中,而不是组合在一起,但会被!important的值覆盖
文本效果
- text-shadow 文本阴影
- text-overflow 文本溢出处理
- word-wrap 文本换行
- word-break 单词拆分换行
- hanging-punctuation 规定标点字符是否位于线框之外
- punctuation-trim 规定是否对标点字符进行修剪
- text-aligin-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
- text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
- text-justify 规定当text-alig = justify 时所使用的对齐方法
- text-outline 文本的轮廓
-
字体
font-family 字体微软雅黑?
- wont-weight 字体的粗细
- font-stretch