原创作品,未经许可不得转载
在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>