CSS的三大特性

最新推荐文章于 2024-06-28 14:02:41 发布

big~ice

最新推荐文章于 2024-06-28 14:02:41 发布

阅读量355

点赞数 11

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_64480873/article/details/134492355

版权

CSS具有三大特性：层叠性、继承性、优先级

层叠性

继承性

优先级

层叠性

层叠性主要解决样式冲突问题。

原则：1. 样式冲突：遵循的原则就是就近原则，哪个样式离结构近，就执行哪个。

2. 样式不冲突，不会层叠。

继承性

CSS继承：子标签汇集成父类标签的某些样式，如文本颜色和字号（子承父业）。恰当的使用可以简化代码，降低CSS样式的复杂性。子元素可以继承父类元素的样式（tesxt- ，font-，line-这些类，以及color属性）。

行高的继承性

body{
    font:12px/1.5 'Microsoft YaHei';//字体大小12px,行间距为字体*1.5，字体是微软雅黑
    //可以指定行高大小font:12px/25px 'Microsoft YaHei';
}

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>csdn</title>
<style>
    body{
        color:blue;
        font:12px/1.5 'Microsoft YaHei';
    }
    div{
        /*子元素继承了父亲body的行高，所以当前div里的字体大小是14px，则行高就是14*1.5=21px*/
        font-size: 14px;
    }
    p{
        /*同理所以当前p里的字体大小是16px，则行高就是16*1.5=24px*/
        font-size: 16px;
    }
</style>
</head>

<body>
    <div>今天是阳光明媚的一天！</div>
    <p>今天又是阳光明媚的一天！</p>
</body>
</html>

优先级

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

1. 选择器相同，则执行层叠性； 2. 不同则根据选择器的权重执行。

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

权重是有四组数字组成，但是不会有进位（不同于二进制进位，注意区别）。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推...
等级判断从左到右，如果某一位数值相同，则判断下一位数值。
继承的权重是0，如果该元素没有直接选中，不管父亲权重多高，子元素得到的权重都是0.
权重的叠加：如果为复合选择器，则会有权重的叠加，需要计算权重。（例如：div ul li 他的权重为0，0，0，3；.nav ul li 权重为0，0，1，2）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>csdn</title>
<style>
    #father{
        color: red;/*父亲权重为0100*/
    }
    p{
        color:blue;/*p继承的权重为0，而p自身权重为0001,所以p会显示蓝色*/
    }
</style>
</head>

<body>
    <div id="father">
        <p>今天是阳光明媚的一天！</p>
    </div>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>csdn</title>
<style>
    ul li{/*权重为0，0，0，1+0，0，0，1=0，0，0，2*/
        color: blue;
    }
    li{/*权重为0，0，0，1*/
        color: red;
    }
    .hhh li{/*权重为0，0，1，0+0，0，0，1=0，0，1，1  这个权重大，则显示绿色*/
        color:green;
    }
</style>
</head>

<body>
    <ul class="hhh">
        <li>哈哈哈</li>
        <li>呵呵呵</li>
    </ul>
    
</body>
</html>

（新手小白自学阶段，欢迎交流学习，同时如有错误欢迎随时指正！）

big~ice

关注

11
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的三大特性

CSS继承：子标签汇集成父类标签的某些样式，如文本颜色和字号（子承父业）。恰当的使用可以简化代码，降低CSS样式的复杂性。子元素可以继承父类元素的样式（tesxt- ，font-，line-这些类，以及color属性）。原则：1. 样式冲突：遵循的原则就是就近原则，哪个样式离结构近，就执行哪个。1. 选择器相同，则执行层叠性；2. 不同则根据选择器的权重执行。2. 样式不冲突，不会层叠。当一个元素指定多个选择器，就会有优先级产生。层叠性主要解决样式冲突问题。层叠性、继承性、优先级。
复制链接

扫一扫