热搜:NVER node 开发 php

后端码农谈前端(CSS篇)第八课:继承与层叠_html/css_WEB-ITnose

2024-11-10 19:20:01
后端码农谈前端(CSS篇)第八课:继承与层叠_html/css_WEB-ITnose

一、继承

继承:所谓css样式继承,就是子元素应用父元素的规则声明。(由这一特性,可将CSS属性分为可继承属性和非可继承属性。)
可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性。

哪些属性是可继承属性?

1、文本样式属性

text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、direction、white-space

2、字体样式属性

font、font-family、font-size、font-style、font-variant、font-weight

3、列表样式属性

list-style、list-style-image、list-style-position、list-style-type

4、color属性

注:这里特别解释:font-size属性(继承性比较特殊)    
不同于有准确的值被继承,font-size继承的是计算的值。   

例如:

 
     
    
        
        Demo
    
    
        body字体大小
        

h1字体大小

        

h2字体大小

        

p字体大小em字体大小

    
    

元素 计算值
default font-size 16px  
85% 16px × 85% = 13.6px

200% 13.6px × 200% = 27.2px

150% 13.6px × 150% = 20.4px

unspecified 13.6px
unspecified 13.6px

即:除非font-size值被重新赋值,否则就按照上一次的尺寸大小值继续.比如上图中设置body字体为默认字体(通常为16px=1em)的85%(13.6px),那么下面的字体均为13.6px.而不是继续继承85%,让13.6再次乘以85%。

二、层叠

层叠:所谓CSS样式层叠就是DOM元素应用样式表中的规则覆盖继承样式的过程。