ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS三大特性

2021-10-05 17:01:33  阅读:170  来源: 互联网

标签:1.5 样式 三大 元素 特性 继承 CSS 行高


1. CSS 层叠性

图片

-概念

  • 所谓层叠性是指多种CSS样式的叠加

  • 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉

-原则

  • 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。

  • 样式不冲突,不会层叠。

2. CSS 继承性

图片

-概念

  • 子标签会继承父标签的某些样式,如文本颜色和字号。

  • 想要设置一个可继承的属性,只需将它应用于父元素即可。

-注意

  • 恰当地使用继承可以简化代码,降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承过来就好了。

  • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性

行高的继承

 body {
                 font: 12px/1.5 'Microsoft YaHei';
        }

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

如果子元素没有设置行高,则会继承父元素的行高1.5

此时子元素的行高是:当前子元素的文字大小*1.5

body行高1.5 这样写法最大优势就是里面子元素可以根据文字大小自动调整行高 

 <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>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

3. CSS 优先级(CSS特殊性)

图片

-概念:定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时,

  • 选择器相同,则执行层叠性

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

-权重计算公式

标签选择器计算权重公式
继承或者 *0,0,0,0
每个元素(标签选择器)0,0,0,1
每个类,伪类0,0,1,0
每个ID0,1,0,0
每个行内样式 style=""1,0,0,0
每个!important  最重要的∞ 无穷大
  • 值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

  • 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity(特殊性)

  • div { color: pink !important; }

-权重叠加

 div ul  li   ------>      0,0,0,3
 .nav ul li   ------>      0,0,1,2
 a:hover      -----—>      0,0,1,1
 .nav a       ------>      0,0,1,1

-继承的权重是0

  • 我们修改样式,一定要看该标签有没有被选中

  • 如果选中了,那么以上面的公式来计权重。谁大听谁的。

  • 如果没有选中,那么权重是0,因为继承的权重

标签:1.5,样式,三大,元素,特性,继承,CSS,行高
来源: https://blog.csdn.net/m0_60830137/article/details/120614967

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有