继承 样式的继承,我们为一个元素设置的样式同时也会应用到它的后代元素上 继承是发生在祖先后后代之间的 继承的设计是为了方便我们的开发, 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上, 这样只需设置一次即可让所有的元素都具有该样式 注意:并不是所有的样式都会被继承; 比如背景相关的,布局相关等的这些样式都不会被继承。
<div id="five"> <p>这是div里面的p</p> 这也是div里面的,但不是p里面的 </div> #five{ color: turquoise; }两句话颜色都会改变
选择器的权重 内联样式(1000)>id选择器(100)>类和伪类选择器(10)>元素选择器(1)>通配选择器(0)>继承的样式(没有优先级) 比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的) *
选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
如果优先级计算后相同,此时则靠下的样式会覆盖靠上的样式可以在某一个样式的后边添加!important,则此时该样式会获取到最高的优先级,甚至超过内联样式。注意:在开发中这个玩意一定要慎用! <p class="six" id="seven">选择器优先级</p> .six{ color: tomato; } #seven{ color: violet; } p#seven{ color: turquoise; }p#seven高于#seven高于.six
像素和百分比 长度单位: 像素 -屏幕(显示器)实际上是由一个一个的小点点构成的 -不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰 -所以同样的208px在不同的设备下显示效果不一样 百分比 -也可以将属性值设置为相对于其父元素属性的百分比I -设置百分比可以使子元素跟随父元素的改变而改变
em
em是相对于元素的字体大小来计算的1em = 1font-sizeem会根据字体大小的改变而改变rem
rem量相对于根元素的字体大小来计算