欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML 继承

程序员文章站 2022-07-03 20:11:13
继承什么是继承这里所说的继承,指的是 CSS 中的样式属性的继承。所谓继承,就是指当前样式属性不仅能作用于当前的元素,还能作用于所有的后代元素。疑问: 我怎么能知道哪些 CSS 属性是继承属性, 哪些 CSS 属性是不可继承属性?可以利用 MDN 进行查阅具有可继承性的属性, 比如 color 属性不具有可继承性的属性, 比如 margin 属性具体内容可以在MDN 继承查阅用法如下面代码所示:...

继承

什么是继承

这里所说的继承,指的是 CSS 中的样式属性的继承。所谓继承,就是指当前样式属性不仅能作用于当前的元素,还能作用于所有的后代元素。

疑问: 我怎么能知道哪些 CSS 属性是继承属性, 哪些 CSS 属性是不可继承属性?
可以利用 MDN 进行查阅

  • 具有可继承性的属性, 比如 color 属性
  • 不具有可继承性的属性, 比如 margin 属性

具体内容可以在MDN 继承查阅

用法如下面代码所示:

<!DOCTYPE html>
<html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>继承的概念</title>
      <style>
        /* 字体颜色设置在<div>元素中 */
        .container {
          /* CSS属性具有可继承性 */
          color: lightcoral;
        }

        /* p {
          color: lightcoral;
        } */
      </style>
    </head>

    <body>
      <div class="container">
        <!-- 文本内容是在<p>元素中 -->
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum nemo sed aspernatur molestias eaque,
          exercitationem earum rerum aperiam quis labore ullam ratione in saepe atque aliquam vitae commodi porro.
          Blanditiis?</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos aliquid velit accusantium deleniti sapiente ipsa
          aut, enim, natus laboriosam deserunt hic numquam obcaecati necessitatibus doloribus tenetur ratione incidunt rerum
          tempore!</p>
      </div>
    </body>

</html>

上述示例代码运行效果如下图所示:
HTML 继承

控制继承

有如下四个通用属性值:

  • inherit: 设置该属性会使子元素属性和父元素相同。实际上,就是 “开启继承”.

  • initial: 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的,那么会设置为 inherit

  • unset: 将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial一样

  • revert : 新的属性值,只有很少浏览器支持

本文地址:https://blog.csdn.net/weixin_46229298/article/details/109253348

相关标签: 1024程序员节