【CSS】继承样式

作者: 德育处主任 | 来源:发表于2018-01-13 19:21 被阅读17次
0019.jpg

继承是指,应用在某个标签上的CSS属性传给了内部嵌套的标签。

例如,<p>标签嵌套在<body>标签里,所以应用在<body>标签上的部分样式(能继承的那部分)会被<p>标签继承。

比如

HTML代码

<body>
    <p>......</p>
</body>

CSS代码

body {
    font-size: 1.2em;
    color: orange;
}
image.png

在<body>中定义了字号和颜色,那么<body>标签的后代都会继承这个字号和颜色。

CSS属性也能隔代继承。如果<p>标签里面有<em>、<strong>或者<span>等标签,那么<em>、<strong>和<span>标签也会继承应用到<body>标签上的部分样式(能继承的那部分)。

继承的局限

上面所说的,继承部分样式,是因为很多CSS样式根本不会传给后代标签。例如border属性就不会被继承。

当然,这是很有道理的。如果继承,设置了border属性的元素里每个标签都会有边框。那在开发中就相当苦恼了。

以下是在学习和开发中总结出来“不一定会被继承”的几条规律:

  • 通常会影响元素在页面中所在位置的属性,以及设置元素外边距、背景色和边框的属性不会被继承。
  • 样式冲突时,更具体的样式胜出。

所谓“更具体的样式胜出”,讲的是CSS的层叠,也就关系到CSS特指度的问题。






希望以上笔记对大家有帮助。
我的其他笔记在微信公众号:Rabbit_svip
欢迎前来点评~

微信订阅号:rabbit

相关文章

  • css基本样式

    1.CSS基本样式 CSS样式的继承

  • day03

    A今日所学 一、CSS基本样式 二、CSS继承 B今日已掌握 一、CSS基本样式 二、CSS继承 C今日未掌握

  • 前端学习笔记七

    Css层叠样式表: 1,Css层叠性:指多种css样式的叠加 2,Css继承性:子标签会继承父标签的某些样式。 字...

  • 丸子小姐学前端__第二周(下)

    一、CSS三大特性 css层叠性: 指多种CSS样式的叠加 css继承性: 指书写CSS样式表时,子标签会继承父标...

  • css继承、层叠和特殊性

    css继承、层叠和特殊性 1、继承css的某些样式具有继承性 那么什么是继承呢?继承是一种规则,它允许样式不仅应用...

  • CSS继承,层叠,优先级

    CSS继承,层叠,优先级 继承 父元素设置样式,子元素可以继承部分属性 减少CSS代码 层叠 可以定义多个样式 不...

  • 关于css继承简单分析

    CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。 css样式表属性可以继承的有如下: azimuth,...

  • CSS特性

    继承 CSS的一些特性,最常见的就是继承,CSS的有些属性是可以继承的,如果没有样式,则会继承父标签样式。比如co...

  • css继承,层叠,优先级

    css继承 父元素设置样式后,子元素会从父元素那去继承部分相应的样式。减少css设置。 层叠 可以定义多个样式 不...

  • css的继承、层叠和特殊性

    css的继承、层叠和特殊性 继承 css的某些样式是具有继承性的,继承是一种规则,它允许样式不仅应用于某个特定的h...

网友评论

    本文标题:【CSS】继承样式

    本文链接:https://www.haomeiwen.com/subject/vbfhoxtx.html