当前位置：首页 > news >正文

1.2继承性

news 来源：原创 2024/5/1 13:14:50

提示：现实中的继承：我们继承父亲的姓

css继承：子标签会继承父类东西，如：文字、颜色、（子承父业）

恰当地使用继承可以简化
子元素继承父（text、font、line——color属性）
继承性口诀：龙生龙、凤生凤、老鼠生孩子会打洞。

1、语法：

body{

color：pink；

font：12px/1.5“Microsoft YaHei”;

}

div{

font-size:14px;

}

font-size：16px；

}

行高可以不用跟单位
如果子元素没有设值行高，则会继承父元素1.5倍。
此时子元素行高是：当前子元素文字大乘以1.5。
body的行高1.5这样，写法最大优势就是在里面子元素设值文字大小来调动整个行高。

自己代码展示：

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-07 17:31:49
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-09-11 10:06:57
 * @FilePath: \code\前端代码\css学习知识\css的三大特性\1.2继承性.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <style>
        /* 这个就是继承关系：p子类标签一定继承是div父类标签的遗产 */
        
        div {
            color: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙、凤生凤、老鼠生孩子会打洞</p>
    </div>

</body>

</html>

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-08 11:40:04
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-09-11 09:56:16
 * @FilePath: \code\前端代码\css学习知识\css的三大特性\1.2继承行高的继承关系.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高继承关系</title>
    <style>
        body {
            /* 这个就是行高继承关系：这个“body”表示父元素（父亲） */
            font: 12px/1.5 "Microsoft YaHei"
        }
        
        div {
            /* 这个是子元素（儿子）、像这样在子元素里面只设置文字大小、没有长宽高就会继承父亲的1.5x文字的大小就得到长宽高像素 */
            /* 14x1.5=21px就是长宽高 */
            font-size: 14px;
        }
        
        p {
            /* 这个跟上面子元素一样的 */
            font-size: 16px;
        }
        /* 下面没有写li的值时候看看有没有设置ul父类、父没有就继承body父亲的属性值 */
    </style>
</head>

<body>
    <div>小猪佩奇</div>
    <p>小猪佩奇</p>
    <ul>
        <li>小猪佩奇</li>
    </ul>

</body>

</html>

显示结果：