三大特性
- 层叠性
- 继承性
- 优先级 (权重计算方法(特异性)
层叠性
- 层叠性是指当一个标签被设置了多个重复的样式的时候,一个属性会覆盖另外一个属性。
- 比如:先给div设置背景颜色为红色,然后设置背景颜色为粉红色,那么最终颜色可能为红色,也可能为粉红色(明显的两种颜色设置不能并立,所以只为其一,这里没给出确定答案是因为还要考虑“优先级”)
- 层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标签最近的样式。【这里要注意只覆盖同样的不可重复的样式属性,不会覆盖不重复的属性,不重复的属性会合并下来(包括那些允许设置多个值的属性也会合并,比如text-shadow)。】
继承性
- 继承性是指当子标签没有设置样式时,会继承父标签的样式。
比如一个子标签没有设置背景颜色,那么子标签会继承父标签的背景颜色。 可继承的属性比如有字体类属性(字体颜色、字体大小之类的)、文本类属性(行高之类的)、背景类属性(背景颜色之类的)(要注意子标签不会继承父标签的宽度、高度、边距属性。)
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
优先级
- !important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 【优先级高的规则会忽视层叠性,忽视就近原则来定义样式。比如定义了!important,即使行内样式离得近,最终生效的还是!important标注的属性】
!important是css的一种语法,定义在样式属性后面,代表这个属性不会被覆盖,最终生效的属性一定是!important标注的属性