css3 三大特性

165 阅读3分钟

三大特性

  • 层叠性
  • 继承性
  • 优先级 (权重计算方法(特异性)

层叠性

  • 层叠性是指当一个标签被设置了多个重复的样式的时候,一个属性会覆盖另外一个属性。
  • 比如:先给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标注的属性