• CSS基础-嵌套规范（拓展）,居中方法，CSS 特性

    CSS基础-嵌套规范(拓展),居中方法，CSS 特性

    拓展1：HTML嵌套规范注意点

    1. 1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
    2. 	➢ 但是：p标签中不要嵌套div、p、h等块级元素
    3. 2. a标签内部可以嵌套任意元素
    4. 	➢ 但是：a标签不能嵌套a标签

    拓展2：居中方法总结

    css特性

    目标：能够认识 CSS 的 继承 和 层叠 特性

    1. 1. 继承性
    2. 2. 层叠性

    1.1 继承性的介

    小结

    1. ➢ 继承性的特性是什么？
    2. 	• 子元素有默认继承父元素样式的特点
    3. ➢ 有哪些常见属性可以继承？
    4. 	1. color
    5. 	2. font-style、font-weight、font-size、font-family
    6. 	3. text-indent、text-align
    7. 	4. line-height
    测试

    (拓展)继承失效的特殊情况
    1. ➢ 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
    2. 	1. a标签的color会继承失效
    3. 		• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
    4. 	2. h系列标签的font-size会继承失效
    5. 		• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

    2.1 层叠性的介绍

    1. ➢ 特性：
    2. 	1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
    3. 	2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
    4. ➢ 注意点：
    5. 	1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

    小结

    1. ➢ 如果给同一个标签设置了相同的属性，此时样式会？
    2. 	• 会层叠覆盖，写在最后的会生效
    3. ➢ 如果给同一个标签设置了不同的样式，此时样式会？
    4. 	• 会层叠叠加，共同作用在标签上
    测试结果

    案例一

    案例三：

    测试代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         a {
    10.             text-decoration: none;
    11.             width: 120px;
    12.             height: 58px;
    13.             background-color: pink;
    14.             display: inline-block;
    15.             text-align: center;
    16.             line-height: 50px;
    17.             color: #fff;
    18.         }
    19.         /* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */
    20.         .one {
    21.             background-image: url(./images/bg1.png);
    22.         }
    23.  
    24.         .two {
    25.             background-image: url(./images/bg2.png);
    26.         }
    27.  
    28.         .three {
    29.             background-image: url(./images/bg3.png);
    30.         }
    31.  
    32.         .four {
    33.             background-image: url(./images/bg4.png);
    34.         }
    35.  
    36.         .one:hover {
    37.             background-image: url(./images/bg5.png);
    38.         }
    39.  
    40.         .two:hover {
    41.             background-image: url(./images/bg6.png);
    42.         }
    43.  
    44.         .three:hover {
    45.             background-image: url(./images/bg7.png);
    46.         }
    47.  
    48.         .four:hover {
    49.             background-image: url(./images/bg8.png);
    50.         }
    51.     style>
    52. head>
    53. <body>
    54.     <a href="#" class="one">五彩导航a>
    55.     <a href="#" class="two">五彩导航a>
    56.     <a href="#" class="three">五彩导航a>
    57.     <a href="#" class="four">五彩导航a>
    58. body>
    59. html>

    结果如下：

  • 相关阅读:
    【英杰送书第三期】Spring 解决依赖版本不一致报错 | 文末送书
    恭喜元宇宙产业委秘书长何超、执行秘书长武艳芳成为南京河西CBD发展大使
    RabbitMQ、RocketMQ、Kafka
    ROI tracking by using OpenCV
    MySQL数据库用户管理
    ubuntu 18 虚拟机安装（3）安装mysql
    心理软件使用问题三
    电脑硬件——显卡
    x64内核实验3-页机制的研究（1）
    java实现贪心算法
  • 原文地址：https://blog.csdn.net/weixin_48370579/article/details/128178642