2024年C C++最全CSS个人学习笔记（day 5）_acss9，2024年最新C C++彻底组件化方案实践方法

最新推荐文章于 2024-09-13 17:43:09 发布

2401_84976182

最新推荐文章于 2024-09-13 17:43:09 发布

阅读量224

点赞数 4

分类专栏：程序员文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84976182/article/details/138770748

版权

程序员专栏收录该内容

39 篇文章 1 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

8.1.5 显示模式- HTML嵌套规范注意点

1. 块级元素一般作为大容器,可以嵌套：文本、块级元素、行内元素、行内块元素等等…

但是：p标签中不要嵌套div、p、h等块级元素

2. a标签内部可以嵌套任意元素

但是：a标签不能嵌套a标签

<body>
    <!-- p 和 h 标题不能相互嵌套 -->
    <!-- <p>
        <h1>一级标题</h1>
    </p> -->

    <!-- p里面不能包含div -->
    <p>
        <div>div</div>
    </p>
</body>

九、CSS三大特性

9.1.1 CSS特性- 继承性

**继承性特性：**子元素有默认父元素样式的特点 (子承父业)

可以继承的常见属性 (文字控制属性都可以继承)

1. color

2. font-style、font-weight、font-size、font-family

3. text-indent、text-aligh

4. line-height

5. …

<style>
        /* 控制文字的属性都能继承，不是控制文字的都不能继承 */
        div {
            color: red;
            font-size: 30px;
            height: 300px;
        }
</style>
</head>
<body>
    <div>
        这是div里面的文字
        <span>这是div里面的span</span>
    </div>
    
</body>

示例：

注意点：

可以通过调试工具判断样式是否可以继承
所有控制文字的都可以继承,控制标签本身的都不能继承

**继承失效的特殊情况：**如果元素有浏览器默认样式,此时继承性依然存在，但是优先显示浏览器的默认样式

1. a标签的color会继承失效

2. h标签的font-size会继承失效

<style> 
       div {
           /* a标签的color会继承失效 */
           color: red;

           /* h标签的font-size会继承失效 */
           font-size: 12px;
       }
        
       /* 继承原则我没有就继承父类的，我要有就自己写  */
       a {
           color: red;
       }
</style>
</head>
<body>
    <div>
        <a href="#">超链接</a>
        <h1>一级标题</h1>
    </div>
</body>

示例：

9.1.2 CSS特性- 层叠性

层叠性特性：

1. 给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上

2. 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效

<style>
       div {
           color: red;
           color: green;
       }
       .box {
           font-size: 30px;
       }
</style>
</head>
<body>
    <div class="box">文字</div>
</body>

示例：

注意点：

1. 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果

9.1.3 CSS特性- 优先级

**优先级特性：**不同选择器具有不同的优先级, 优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < ! important

优先级原则： 1. 哪个选择器可以更加精准的选到标签，它的优先级就比较高

2. 哪个选择器选中的范围越广，它的优先级就低

3. 优先级最低是继承，优先级最高是加属性值 ! important

4. 当css都是继承的时候,看继承里面谁最高，看继承哪个父级，哪个是第一继承的,哪个选择器就生效

<style>
       #box {
            color:orange ;
       }
       .box {
           color: blue;
       }
       div {
           color: green !important;
       }

       /* !important不要给继承的添加,自己有样式无法继承父类样式 */

       body {
           color: red;
       }
        
</style>
</head>

<body>
    <!-- 意义：当一个标签使用了多个选择器,样式冲突的时候,到底谁生效 -->
    <!-- 行内样式 -->
    <div class="box" id="box" style="color: pink;">测试优先级</div>
</body>

示例：

注意点：

! important写在属性值的后面, 分号的前面
! important不能提升继承的优先级, 只要是继承优先级最低！
实际开发中不建议使用! important

9.1.4 CSS特性- 优先级叠加计算

**权重叠加计算场景：**如果是复合选择器,此时需要通过权重叠加计算方法，判断最终哪个选择器优先最高会生效

权重叠加计算公式：(每一级之间不存在进位)

比较规则：

1. 先比较第一级数字, 如果比较出来了, 之后的统统不看

2. 如果第一级数字相同，此时再去比较第二级数字, 如果比较出来了,之后的统统不看

3. 如果最终所有数字都相同,表示优先级相同,则比较层叠性 (谁写在下面,谁说了算！)

<style>
        /* (行内, id , 类, 标签) */

        /* (0, 1, 0, 1) */
        div #one {
            color: orange;
        }

        /* (0, 0, 2, 0) */
        .father .son {
            color: skyblue;
        }

        /* (0, 0, 1, 1) */
        .father p {
            color: purple;
        }

        /*(0, 0, 0, 2) */
        div p {
            color: pink;
        }
</style>

示例：