• css进阶知识点速览

    0前言

    零基础部分的博客

    1选择器进阶

    1.1后代选择器

    作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素
    选择器语法：选择器1 选择器2 {css}
    结果：
    在选择器1所找到标签的后代中
    注意：
    后代包括：儿子、孙子等等

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <p>
        <div>
            <p>hello world</p>
        </div>
    </p>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: green;
        }
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <p>hello</p>
    <p>
        <div>
            <p>hello world</p>
        </div>
    </p>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    1.2子代选择器

    作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
    选择器语法：选择器1 > 选择器2 {css}
    结果：
    在选择器1所找到标签的子代中，找到满足选择器

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p {
            color: green;
        }

    </style>
</head>
<body>
    <div>
        hello
        <p>hello world</p>
        <a href="web">
            <p>hello baby!</p>
        </a>
    </div>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在这里插入图片描述
    如果改用>，如下：

        <style>
        div > p {
            color: green;
        }
    </style>

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    1.3 并集选择器

    作用：同时选择多组标签，设置同样的样式
    选择器语法：选择器1,选择器2{css}
    结果：
    找到选择器1和选择器2选中的标签，设置样式

    1.4交集选择器

    作用：选中页面中同时满足多个选择器的标签
    选择器语法：选择器1.选择器2{css}

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.no1 {
            color: green;
        }
    </style>
</head>
<body>
    <p class="no1">hello</p>
    <div>hello</div>
    <div class="no1">hello</div>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    1.5 伪类

    作用：选中鼠标悬停在元素上的状态，设置样式
    选择器语法：选择器:hover{css}

    1.6 Emmet语法

    作用：通过简写，快速生成代码
    语法如图[1]：
    在这里插入图片描述

    2 背景色

    2.1背景颜色

    属性名：background-color (bgc)
    属性值：
    颜色取值：关键字、rgb表示法、rgba表示法、十六进制
    注意点：
    背景颜色默认是透明的：rgba(0,0,0,0)、transparent
    背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。

    2.2 背景图片

    属性名：background-image (bgi)
    属性值：background-image: url(‘图片路径’)
    注意点：
    1背景图片中url可以省略引号
    2背景图片默认是在水平垂直方向平铺的
    3背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色

    2.3背景平铺

    如果在style标签中设置的宽和高多大，而图片本身小，会导致图片复制多份而覆盖style设置的区域。
    属性名：background-repeat(bgr)
    属性值如图[1]
    在这里插入图片描述

    2.4 背景位置

    属性名：background-position(bgp)
    在这里插入图片描述
    background-position:水平位置设置 垂直位置设置

    2.5背景相关属性连写

    属性名:background(bg)
    属性值：单个属性值合写。取值之间以空格隔开
    书写顺序：
    background: color image repeat position
    复合属性就是一个属性名加多个值

    2.6背景与img标签的区别

    img标签是一个标签，不设置宽高默认以固定原尺寸显示
    img为插入图片，主要用来显示重要的图片，比如宣传图；
    div标签+背景图片：需要设置div的宽高，因为背景图片只是装饰css的样式，不能撑开div标签。因此，不设置宽高，没有盒子就没有图片
    只起修饰作用的，可有可无的图片就用背景图片

    3 元素显示模式

    <>叫标签，也叫元素

    3.1块级元素

    显示特点：
    1独占一行
    2宽度默认是父元素的宽度，高度默认由内容撑开
    3可以设置宽高
    代表标签：
    div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer…

    3.2行内元素

    显示特点：
    1一行可以显示多个
    2宽度和高度默认由内容撑开
    3不可以设置宽高
    代表标签：
    a,span,b,u,i,s,strong,ins,em,del…

    3.3行内块元素

    显示特点：
    1一行可以显示多个
    2可以设置宽高
    代表标签：
    input,textarea,button,select
    特殊情况：img

    3.4元素显示模式的转换

    目的：改变元素默认的显示特点，让元素符合布局要求
    语法:
    display:block 转换成块级元素 较多
    display:inline-block 转换成行内块元素 较多
    display:inline 转换成行内元素 较少
    自然，在元素（标签）的css中进行设置

    3.5 拓展

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

    4 CSS特性

    4.1继承性

    特性：子元素有默认继承父元素样式的特点
    可以继承的常见属性：1color 2font-style,font-weight, font-size, font-family 3text-indent, text-align 4line-height
    颜色、字样式、首行缩进、行高
    注意点：1可通过调试工具判断样式是否可以继承
    2所有控制文字的都能继承，不是控制文字的都不能继承
    继承性失效的情况：
    1a标签的color会继承失效
    2h系列标签的font-size会失效

    4.2层叠性

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

    5 案例

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div a {
            height: 30px;
            width: 50px;
            background-color: red;
            display: inline-block;
            text-decoration: none;
            color: white;
            text-align: center;
            line-height: 30px;
        }
        div a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <a href="">导航1</a>
        <a href="">导航2</a>
        <a href="">导航3</a>
        <a href="">导航4</a>
        <a href="">导航5</a>
    </div>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    在这里插入图片描述

    参考

    [1]前端开发入门教程笔者学习的课程

  • 相关阅读:
    Visual Studio 和 VSCode 哪个好？
    Java基础39 Object类（节选）
    第14章总结：lambda表达式与处理
    力扣第20题记录
    【Azure 环境】Azure Resource Graph Explorer 中实现动态数组数据转换成多行记录模式 - mv-expand
    redis的常用基础类型及操作
    Pruning Pre-trained Language Models Without Fine-Tuning
    perl的一些注意事项
    设计原则——合成复用原则
    yolov5 解读
  • 原文地址：https://blog.csdn.net/woshicaiji12138/article/details/134224229