CSS的特性

最新推荐文章于 2023-03-12 00:23:02 发布

日子如影儿

最新推荐文章于 2023-03-12 00:23:02 发布

阅读量227

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_58035213/article/details/126984336

版权

CSS笔记同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端

16 篇文章 0 订阅

订阅专栏

CSS的三大特性

层叠性、继承性、优先级

1、层叠性

相同选择器给设置相同的样式，此时一个样式会覆盖（层叠)另一个冲突的样式。

原则：就近原则（样式冲突）不冲突就不层叠

<!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>CSS层叠性</title>
    <style>
       div {
           color: red;
           font-size: 12px;
       }
       div {
           color: pink;
       }
    </style>
</head>
<body>
    <div>长江后浪推前浪,前浪死在沙滩上</div>
</body>
</html>

2、继承性

子承父业

子标签会继承父标签的某些样式

（text-，font-，line-这些元素开头的可以继承，以及color属性）与文字相关

<!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>CSS继承性</title>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>
        <p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
    </div>
</body>
</html>

·简化代码：

body{

font：12px ‘黑体’}

行高可以跟单位也可以不跟

body{

color：pink；

font：12px/1.5 ‘Microsoft YaHei’；

}

div{

font-size：14px；

}

子元素继承了父元素body的行高1.5

即对当前元素文字大小font-size的1.5倍

所以div的行高：21px

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

3、优先级

当同一个元素指定多个选择器

选择器同，则执行层叠性

选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important	无穷大