CSS入门基础（二）

 

文字居中：

文字水平居中  text-align：center；

文字垂直居中  line-height：height高度；

• 如果行高 等于 height高度  文字会垂直居中
• 如果行高 大于 高度 文字会偏下
• 如果行高 小于 高度 文字会偏上

CSS三大特性

• 层叠性

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

• 继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

• 优先级

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者 * 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类class，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的

比如的例子：

div ul  li   ------>      0,0,0,3
​
.nav ul li   ------>      0,0,1,2
​
a:hover      -----—>      0,0,1,1
​
.nav a       ------>      0,0,1,1   
​
#nav p       ----->       0,1,0,1

总结优先级：

1. 1.使用了 !important声明的规则。

2. 2.内嵌在 HTML 元素的 style属性里面的声明。

3. 3.使用了 ID 选择器的规则。

4. 4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则。

5. 5.使用了元素选择器的规则。

6. 6.只包含一个通用选择器的规则。

7. 7.同一类选择器则遵循就近原则。

8. 注意：继承的权重为0

总结：权重是优先级的算法，层叠是优先级的表现