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

CSS样式继承性

程序员文章站 2022-07-02 12:40:12
CSS样式继承介绍 外层元素身上的样式会被内层元素所继承。 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式。 并不是所有的样式都能够继承,只有文本与字体样式属性才能够被继承,其余的样式属性不可以被继承。 CSS样式继承实践 外层元素身上的样式会被内层元素所继承,这句话 ......

css样式继承介绍

  • 外层元素身上的样式会被内层元素所继承。
  • 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式。
  • 并不是所有的样式都能够继承,只有文本与字体样式属性才能够被继承,其余的样式属性不可以被继承。

css样式继承实践

  • 外层元素身上的样式会被内层元素所继承,这句话的实践。

  • 代码块

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>继承性</title>
    <style>
        body{
            color: red;
        }
    </style>
</head>
  
<body>
    <div>
        <h2>微笑是最初的信仰</h2>
        <p>微笑是最初的信仰</p>
    </div>
</body>
</html>
  • 结果图

CSS样式继承性

  • 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式,这句话的实践。

  • 代码块

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>继承性</title>
    <style>
        body{
            color: red;
            font-size: 18px;
        }
        div{
            color: springgreen;
            
        }
    </style>
</head>
  
<body>
    <div>
        <h2>微笑是最初的信仰</h2>
        <p>微笑是最初的信仰</p>
    </div>
</body>
</html>
  • 结果图

CSS样式继承性

  • 并不是所有的样式都能够继承,只有文本与字体样式属性才能够被继承,其余的样式属性不可以被继承,这句话的实践。

  • 代码块

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>继承性</title>
    <style>
        body{
            color: red;
            font-size: 18px;
        }
        div{
            color: springgreen;
            border: 1px solid red;
        }
    </style>
</head>
  
<body>
    <div>
        <h2>微笑是最初的信仰</h2>
        <p>微笑是最初的信仰</p>
    </div>
</body>
</html>
  • 结果图

CSS样式继承性