CSS进阶

2023-10-03 20:48:04

进阶认知

选择器进阶

  • 后代选择器：空格

    • 作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素

    • 选择器语法：选择器1 选择器2 { css }

    • 结果：

      • 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

      • 注意点：

        • 后代包括：儿子、孙子、重孙子……

        • 后代选择器中，选择器与选择器之前通过空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 找到div的儿子p设置文字颜色是红色 */
        /* 父选择器 后代选择器 {} */
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 后代：儿子、孙子、重孙子...... -->
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>
</html>

CSS进阶

 

 

 CSS进阶

  • 子代选择器：>

    • 作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

    • 选择器语法：选择器1 > 选择器2 { css }

    • 结果：

      • 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

    • 注意点：

      • 子代只包括：儿子

      • 子代选择器中，选择器与选择器之前通过> 隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 空格隔开的是后代选择器，儿子、孙子、重孙子都被选中 */
        /* div a {
            color: red;
        } */
​
        /* 只想选中儿子a */
        /* div的儿子a文字颜色为红色 */
        div>a {
            color: red;
        }
​
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>

CSS进阶

  • 并集选择器: ,

    • 作用：同时选择多组标签，设置相同的样式

    • 选择器语法：选择器1 ， 选择器2 { css }

    • 结果：

      • 找到 选择器1 和 选择器2 选中的标签，设置样式

    • 注意点：

      • 并集选择器中的每组选择器之间通过,分隔

      • 并集选择器中的每组选择器可以是基础选择器或者复合选择器

      • 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p div span h1文字颜色是红色 */
        /* 选择器1，选择器2 {} */
        p, 
        div, 
        span, 
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
​
    <h2>h2</h2>
</body>
</html>

CSS进阶

  • 交集选择器：紧挨着

    • 作用：选中页面中同时满足多个选择器的标签

    • 选择器语法：选择器1选择器2 { css }

    • 结果：

      • （既又原则）找到页面中既能被选择器1选中又能被选择器2选中的标签，设置样式

    • 注意点：

      • 1、交集选择器中的选择器之间是紧挨着的，没有东西分隔

      • 2、交集选择器中如果有标签选择器，标签选择器必须写在最前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 必须是p标签，而且添加了box类 */
        p.box {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 找到第一个p，带box类的，设置文字颜色是红色 -->
    <p class="box">这是p标签:box</p>
    <p>pppppp</p>
    <div class="box">这是div标签:box</div>
</body>
</html>

CSS进阶

  • hover伪类选择器

    • 作用：选中鼠标悬停在元素上的状态，设置样式

    • 选择器语法：选择器:hover { css }

    • 注意点：

      • 伪类选择器选中的元素的某种状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 悬停的时候 文字颜色是红色 */
        a:hover {
            color: red;
            background-color: green;
        }
​
        /* 用户鼠标悬停在div的时候，文字是绿色 */
        div:hover {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>
    <!-- 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停 -->
    <div>div</div>
</body>
</html>

CSS进阶

背景相关属性

  • 背景颜色

    • 属性名：background-color（bgc）

    • 属性值：

      • 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……

    • 注意点：

      • 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent

      • 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: pink;
            width: 400px;
            height: 400px;
            background-color: #eee;
            /* 红绿蓝三原色，a是透明度0-1 */
            background-color: rgba(0, 0, 0,0.5);
            background-color: rgba(0, 0, 0,.5);
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

CSS进阶

  • 背景图片

    • 属性名：background-image（bgi）

    • 属性值：CSS进阶

    • 注意点：

      • 背景图片中url中可以省略引号

      • 背景图片默认是在水平和垂直方向平铺的

      • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/1.jpg);
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

CSS进阶

  • 背景平铺

    • 属性名：background-repeat（bgr）

    • 属性值：

      • CSS进阶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            /* background-repeat: repeat; */
            /* 不平铺，图片只显示一个 */
            /* background-repeat: no-repeat; */
            /* background-repeat: repeat-x; */
            background-repeat: repeat-y;
​
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

CSS进阶

  • 背景位置

    • 属性名：background-position（bgp）

    • 属性值：background-position: 水平方向位置 垂直方向位置;

    • CSS进阶

    • 注意点：

      • 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            /* background-position: right 0; */
            /* background-position: right bottom; */
            /* background-position: center center; */
            /* background-position: center; */
            /* background-position: 50px 0; */
            /* background-position: 50px 100px; */
            background-position: -50px -100px;
​
            /* 正数：向右向下移动；负数：向左向上移动 */
            /* 背景色和背景图只显示在盒子里面 */
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

CSS进阶

  • 背景相关属性的连写

    • 属性名：background（bg）

    • 属性值：

      • 单个属性值的合写，取值之间以空格隔开

    • 书写顺序：

      • 推荐：background：color image repeat position

    • 省略问题：

      • 可以按照需求省略

      • 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()

    • 注意点

      • 如果需要设置单独的样式和连写

      • ① 要么把单独的样式写在连写的下面

      • ② 要么把单独的样式写在连写的里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 不分先后顺序 背景色 背景图 背景图平铺 背景图位置 */
            /* background: pink url(./images/1.jpg) no-repeat center bottom; */
            /* 背景图位置如果是英文单词可以颠倒顺序，你想呀，只有垂直位置才有bottom呀 */
            background: pink url(./images/1.jpg) no-repeat bottom center; 
​
            /* 测试背景图位置如果是数值 */
            /* 水平50px，垂直100px */
            /* background: pink url(./images/1.jpg) no-repeat 50px 100px;  */
            /* 背景图位置如果是数值则不可以颠倒顺序 */
            background: pink url(./images/1.jpg) no-repeat 100px 50px; 
​
​
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

CSS进阶

  • （拓展）img标签和背景图片的区别

    • 需求：需要在网页中展示一张图片的效果？

    • 方法一：直接写上img标签即可

      • img标签是一个标签，不设置宽高默认会以原尺寸显示

    • 方法二：div标签 + 背景图片

      • 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

    • 重要的用img标签

元素显示模式

  • 块级元素

    • 显示特点：

      • 1、独占一行（一行只能显示一个）

      • 2、宽度默认是父元素的宽度，高度默认由内容撑开

      • 3、可以设置宽高

    • 代表标签：

      • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 块：独占一行；宽度默认是父级100%；添加宽度都生效 */
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>11111</div>
    <div>22222</div>
</body>
</html>

CSS进阶

  • 行内元素

    • 显示特点：

      • 1、一行可以显示多个

      • 2、宽度和高度默认由内容撑开

      • 3、不可以设置宽高

    • 代表标签：

      • a、span 、b、u、i、s、strong、ins、em、del……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 行内：不换行；设置宽高不生效；尺寸和内容的大小相同 */
        span {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>
</body>
</html>

CSS进阶

  • 行内块元素

    • 显示特点：

      • 1、一行可以显示多个

      • 2、可以设置宽高

    • 代表标签：

      • input、textarea、button、select……

      • 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 行内块：一行显示多个；加宽高生效 */
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <img src="./images/1.jpg" alt="">
    <img src="./images/1.jpg" alt="">
</body>
</html>

CSS进阶

  • 元素显示模式转换

    • 目的：改变元素默认的显示特点，让元素符合布局要求

    • 语法：

      • CSS进阶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
​
            /* 行内块 */
            display: inline-block;
​
            /* 行内块 */
            display: inline;
        }
    </style>
</head>
<body>
    <div>11111</div>
    <div>22222</div>
</body>
</html>

CSS进阶

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

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

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

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

CSS进阶

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

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

CSS特性

  • 继承性的介绍

    • 特性：子元素有默认继承父元素样式的特点（子承父业）

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

      • 1、color

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

      • 3、text-indent、text-align

      • 4、line-height

      • 5、......

    • 注意点：

      • 可以通过调试工具判断样式是否可以继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 控制文字的属性都能继承；不是控制文字的都不能继承 */
        div {
            color: red;/*可*/
            font-size: 30px;/*可*/
            height: 300px;/*不可*/
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>
</html>

CSS进阶

  • （拓展）继承的应用

    • 好处：可以在一定程度上减少代码

    • 常见应用场景：

      • 1、可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式

      • 2、直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

  • （拓展）继承失效的特殊情况

    • 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

    • 1、a标签的color会继承失效

      • 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

    • 2、h系列标签的font-size会继承失效

      • 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
            font-size: 12px;
        }
​
        /* 想要超链接红的，单独设一下 */
        a {
            color: red;
        }
    </style>
</head>
<body>
​
    <!-- 我没有就继承我爹的，我有就用自己的！ -->
    <div>
        <a href="#">超链接</a>
        <h1>一级标题</h1>
    </div>
</body>
</html>

CSS进阶

  • 层叠性的介绍

    • 特性

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

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

    • 注意点：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
            color: green;
        }
​
        .box {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">文字</div>
</body>
</html>

CSS进阶

  • 综合案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */
        a {
            text-decoration: none;
            width: 100px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
​
        a:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- a*5 -->
    <!-- 选多行加内容删除 alt + shift + 鼠标左键单击 -->
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

CSS进阶

  • 综合案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
            width: 120px;
            height: 58px;
            background-color: pink;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }
        /* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */
        .one {
            background-image: url(./images/bg1.png);
        }
​
        .two {
            background-image: url(./images/bg2.png);
        }
​
        .three {
            background-image: url(./images/bg3.png);
        }
​
        .four {
            background-image: url(./images/bg4.png);
        }
​
        .one:hover {
            background-image: url(./images/bg5.png);
        }
​
        .two:hover {
            background-image: url(./images/bg6.png);
        }
​
        .three:hover {
            background-image: url(./images/bg7.png);
        }
​
        .four:hover {
            background-image: url(./images/bg8.png);
        }
    </style>
</head>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
</body>
</html>

CSS进阶

 

 

 

上一篇：DOM的简介


下一篇：【jQuery】DOM操作学习