学习前端之4.11

最新推荐文章于 2024-09-05 23:48:57 发布

zzjz23

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量84

点赞数

分类专栏：学习笔记文章标签： html5 css

本文链接：https://blog.csdn.net/zzjz23/article/details/124108249

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.css的三大特性

1.1层叠性

样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

1.2 继承性

恰当的使用继承可以简化代码，降低CSS样式的复杂性；
子元素可以继承父元素的样式（text- , font-, line- 这些元素开头的可以继承，以及color属性）
继承口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

行高的继承性

body {

font:12px/1.5 Microsoft YaHei;

}

行高可以跟单位，也可以不跟单位；
如果子元素没有设置行高，则会继承父元素行高为1.5
此时子元素的行高是：当前子元素的文字大小*1.5
body 行高的1.5 这样写法最大优势就是子元素可以根据自己文字大小自动调整行高

例子：

<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: pink;
        /* font 12px/24px Microsoft YaHei; */
        font: 12px/1.5 'Microsoft YaHei';
    }
    div {
        /* 子元素继承了父元素 body 的行高1.5 */
        /* 这个1.5就是当前元素文字大小 font-size 的1.5倍 14x1.5=21 就是div的行高*/
        font-size: 14px;
    }
    p {
        /* 1.5x16=24 就是当前的行高 */
        font-size: 16px;
    }
    /* li 没有手动指定文字大小 则会继承父亲的 文字大小 body 12px 所有的 li 的文字大小为12px 
    
    当前的 li 的行高就是 12x1.5=18px
    */
    </style>
</head>
<body>
    <div>粉色回忆</div>
    <p>粉色回忆</p>
    <ul>
        <li>未指定文字大小</li>
    </ul>
</body>
</html>

1.3 优先级

当同一个元素指定多个选择器。就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

例子：

优先级注意点

权重有4组数字组成，但是不会有进位
可以理解为选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值
简单记忆：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内选择器样式为1000，！important无穷大；
继承的权重是0，如果该玄素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加：如果是复合选择器，则会有权重叠加，需要继续按权重

zzjz23

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习前端之4.11

1.css的三大特性1.1层叠性样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠1.2 继承性恰当的使用继承可以简化代码，降低CSS样式的复杂性；子元素可以继承父元素的样式（text- , font-, line- 这些元素开头的可以继承，以及color属性）继承口诀：龙生龙，凤生凤，老鼠生的孩子会打洞行高的继承性body { font:12px/1.5 Microsoft YaHei;}行高可以跟单位，也可以不跟单..
复制链接

扫一扫