CSS基础课程登入/注册
在小屏设备上仅提供基本的浏览功能
请使用电脑打开此网页,体验更多强大功能

样式的继承

原创作品,未经许可不得转载
在HTML里,子元素会从父元素那里继承一些样式。先来看个例子:

<div style="font-size:25px; font-weight:bold">
    这是父元素
    <div>这是子元素</div>
</div>
    
“运行”它,你将会发现,无论是父元素内的文本,还是子元素内的文本,都变大了,并且都加粗了。但我们却只在父元素上设置了style,而子元素上却没有设置。
虽然没给子元素设置style,但是它却从父元素那里继承了父元素的style,所以子元素的字体大小和粗细与其父元素是一样的。
如果不期望子元素使用与其父元素一样的样式,可为子元素设置相应的style,这样,子元素自己的style将会覆盖从父元素那里继承来的style。运行下方的示例看看效果:

<div style="font-size:25px; font-weight:bold">
    这是父元素
    <div style="font-size:17px">这是子元素</div>
</div>
    
上方的示例中,给子元素设置了font-size样式,将会覆盖掉从父元素那里继承来的font-size:25px,因此最终它的字体大小是17px
但子元素并没有设置font-weight样式,因此它仍然会从父元素那里继承font-weight样式,所以它的字体仍然是粗体。
现在,你已经知道了子元素会从其父元素那里继承样式,接下来我们来看一个特殊的案例:

<div style="font-size:15px; font-weight:400">
    这是父元素
    <h1>这是子元素</h1>
</div>
    
运行上面的示例,你会发现,虽然<h1><div>的子元素,但它似乎并没有从其父元素那里继承样式,因为它的字体仍然很大,而且较租。
其实不然。其实<h1>仍然从父元素那里继承了样式,但是由于<h1>自身带有样式,所以将从父元素那里继承来的样式给覆盖了。
你可能会问:上面的示例中并没有给<h1>设置样式啊?
是的,上面的代码中是没有明确地给<h1>设置样式。但是,浏览器会默认地给<h1>加上样式,这也是为什么默认情况下<h1>的字体会显得比较大、比较粗的原因。
浏览器会将<h1>font-weight样式设为bold,将font-size样式设为2em
等等!2em是什么?
在之前的课程中,我们知道了px是“像素”,是计算机上的一种度量单位。那么em呢?
em也是计算机上的一种度量单位。它是“倍”的意思。2em就是“2倍”的意思。在上面的示例中,<h1>本来从父元素那里继承了font-size样式,所以它的字体大小应该15px。由于它自身的font-size样式为2em,所以最终它的字体大小为15 * 2 = 30px
但是,浏览器并没有给<h1>设置默认的color样式,所以默认情况下它的字体颜色与其父元素的字体颜色是一样的:

<div style="font-size:15px; color:red">
    这是父元素
    <h1>这是子元素</h1>
</div>
    
练习
4/12
http://localhost/