CSS学习第三天个人总结

CSS学习第三天

一、CSS三大特性

1. 层叠性

  相同选择器同一属性设置不同的样式，主要解决样式冲突问题。

• 就近原则，哪个样式离标签近就选择哪个样式，即被覆盖；
• 属性不冲突则不覆盖。

2. 继承性

  子标签继承父标签的某些样式。
  可以给<$body$>定义字体颜色和大小等，这样就不用在每个子标签都重新定义了。可以继承 text-, font-, line-, color属性。（与文字相关的属性）
  行高的继承代码如下：

body {
   
  color: pink;
  font: 12px(文字大小)/1.5（行高） Microdoft Yahei ; 
}
div {
   
  font-size: 14px; /*此时div标签的行高为21px */
}

• 行高可以跟单位也可以不跟单位
• 如果子元素没有设置行高，则会继承父元素行高
• 子元素行高为：当前子元素文字大小 * 1.5

3. 优先级

  当同一个元素指定多个选择器，就会有优先级的产生。

• 选择器相同，则执行层叠性。
• 选择器不同，则根据选择器权重执行。

选择器	选择器权重
继承 或者 继承 *	0,0,0,0
元素选择器（标签选择器）	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
行内样式 style = " "	1,0,0,0
! important 重要的	∞ 无穷大

• 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高（即使加了 !important ），子元素得到的权重都为0。
• 链接标签 a 是浏览器默认的颜色，蓝色，指定 body 的颜色改变不了链接标签的颜色。

4. 复合选择器 – 权重叠加

ul li {
   
  color: green;