3.CSS进阶

2023-04-17 本文已影响0人奶油裙子

一、选择器进阶

目标：能够理解复合选择器的规则，并使用复合选择器在HTML中选择元素

（一）复合选择器

1.后代选择器：空格

（1）作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
（2）选择器语法：选择器1 选择器2{css}
（3）结果：在选择器1所找到标签的后代（儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式
（4）注意点：后代包括：儿子、孙子、重孙子
后代选择器中，选择器与选择器之间通过空格隔开

    <style>
        /* 找到div的儿子p设置文字颜色是红色 */
        /* 父选择器 后代选择器{} */
        div p{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 后代:儿子,孙子,重孙子 -->
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>

2.子代选择器：>

（1）作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
（2）选择器语法：选择器1>选择器2{css}
（3）结果：在选择器1所找到标签子代（儿子）中，找到满足选择器2的标签，设置样式
（4）注意点：
子代只包括儿子
子代选择器中，选择器与选择器之间通过>隔开

    <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>

3.并集选择器：,

（1）作用：同时选择多组标签，设置相同的样式
（2）选择器语法：选择器1，选择器2{css}
（3）结果：找到选择器1和选择器2选中的标签，设置样式
（4）注意点：
<1>并集选择器中的每组选择器之间通过，分隔
<2>并集选择器中的每组选择器可以是基础选择器或者复合选择器
<3>并集选择器中的每组选择器通常一行写一个，提高代码的可读性

    <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>

4、交集选择器

（1）作用：选中页面中同时满足多个选择器的标签
（2）选择器的语法：选择器1选择器2{css}
（3）结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
（4）注意点：
<1>交集选择器中的选择器之间是紧挨的，没有东西分隔
<2>交集选择器中如果有标签选择器，标签选择器必须写在最前面

5、hover伪类选择器

（1）作用：选中鼠标悬停在元素上的状态，设置样式
（2）选择器语法：选择器：hover{css}
（3）注意点：伪类选择器选中的元素的某种状态

<style>
        a:hover{
            color: red;
            background-color: green;
        }
        div:hover{
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>
    <!-- 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停 -->
    <!-- 用户鼠标悬停到div的时候，文字是绿色 -->
    <div>div</div>
</body>

6、emmet语法

（1）作用：通过简写语法，快速生成代码
（2）语法：类似于刚刚学习的选择器的写法

记忆	示例	效果
标签名	div	<div></div>
类选择器	.red	<div class="red"></div>
id选择器	#one	<div id="one"></div>
交集选择器	p.red#one	<p class="red" id="one"></p>
子代选择器	ul>li	<ul><li></li></ul>
内部文本	ul>li{我是li的内容}	<ul><li>我是li的内容</li></ul>
创建多个	ul>li*3	<ul><li></li><li></li><li></li></ul>

    <style>
        div{
            font-size: 12px;
            /* 提示css属性：单词的首字母 */
            font-weight: 700;
            width: 20px;
            /* 宽度300，高度200，背景色粉色 */
            /* w300+h200+bgc */
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <h1></h1>
    <!-- 生成div 带类名 -->
    <div class="box"></div>
    <p class="box"></p>
    <p id="box"></p>
    <p class="red" id="id"></p>
    <!-- div 同级 P -->
    <div></div>
    <p></p>
    <!-- 父子级 -->
    <div>
        <p></p>
    </div>
    <ul>
        <li></li>
    </ul>
    <!-- ul 有3个li *称号 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- ul 有3个li， li里面有文字111 {文字}-->
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
    <!-- ul 有3个li, li里面有文字1，2，3 {$} ul>li{$}*3 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

二、背景相关属性

目标：能够使用背景相关属性装饰元素的背景样式

1、背景颜色

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

2、背景图片

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

 background-image: url(../../cat.jpg);

3、背景平铺

（1）属性名：background-repeat(bgr)
（2）属性值：

取值	效果
repeat	（默认值）水平和垂直方向平铺
no-repeat	不平铺
repeat-x	沿这水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

<style>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(../../rescours/day04/01-案例/images/1.jpg);
            /* background-repeat: no-repeat; */
            /* background-repeat: repeat-x; */
            background-repeat: repeat-y;
        }
    </style>

运行结果：

4、背景位置

（1）属性名：background-position(bgp)
（2）属性值：background-position:水平方向位置垂直方向位置；
属性值：
<1>方向名词（最多只能表示9个位置）：
水平方向：left、center、right
垂直方向：top、center、bottom
<2>数字+px(坐标)：
坐标系：
a.原点（0，0）盒子的左上角
b.x轴：水平向右
c.y轴：垂直向下
操作：将图片左上角与坐标点重合即可
正数：向右向下移动；负数：向左向上移动
背景色和背景图只显示在盒子里面
（3）注意点：方向名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(../../rescours/day04/01-案例/images/1.jpg);
            background-repeat: no-repeat;
            /* background-position: right bottom; */
            /* background-position: 0 0; */
            /* background-position:center; */
            /* background-position: 50px 100px; */
            background-position: -50px -100px;

        }
    </style>
</head>
<body>
    <div>文字</div>
</body>

运行结果：

5、背景相关属性的连写形式

（1）属性名：background(bg)
（2）属性值：单个属性值的合写，取值之间以空格隔开
（3）书写顺序：推荐：background:color image repeat position（可以交换顺序）
背景图位置如果是英文单词可以颠倒顺序
背景图位置如果是数值不要颠倒顺序
（4）省略问题：
a.可以按照需求省略
b.特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：ur()
（5）注意点：
如果需要设置单独的样式和连写
<1>要么把单独的样式写在连写的下面
<2>要么把单独的样式写在连写的里面

<style>
        div{
            width: 400px;
            height: 400px;
            /* background: pink url(../../images/car.jpg) no-repeat center bottom; */
            /* background: pink url(../../images/car.jpg) no-repeat bottom center; */
            /* 背景图位置如果是英文单词可以颠倒顺序 */

            /* 测试背景图位置如果是数值 不要颠倒顺序*/
            /* 水平50px 垂直100px */
            /* background: pink url(../../images/car.jpg) no-repeat 50px 100px; */
            background: pink url(../../images/car.jpg) no-repeat 100px 50px;
        }
    </style>

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

需求：需要在网页中展示一张图片的效果
方法一：直接写img标签即可（重要的、产品类的）
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签+背景图片（装饰性的，让网页变漂亮）
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

三、元素显示模式

目标：能够认识三种常见的元素显示模式，并通过代码实现不同元素显示模式的转换

1、块级元素

（1）显示特点：
a.独占一行（一行只能显示一个）
b.宽度默认是父元素的宽度，高度默认由内容撑开
c.可以设置宽高
（2）代表标签：div、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>111</div>
    <div>222</div>
</body>

2、行内元素

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

    <style>
        /* 行内：不换行；设置宽高不生效；尺寸和内容的大小相同 */
        span{
            width: 300px;
            height: 300px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>
</body>

运行结果：

3、行内块元素

（1）显示特点：
a.一行可以显示多个
b.可以设置宽高
（2）代表标签

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

    <style>
        /* 行内块：一行显示多个；加宽高生效 */
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <img src="../../cat.jpg" alt="">
    <img src="../../cat.jpg" alt="">
</body>
</html>

4、元素显示模式转换

（1）目的：改变元素默认的显示特点，让元素符合布局要求
（2）语法：

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline-block	转换成行内块元素	较多
display:inline	转换成行内元素	极少

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 行内块 */
            /* display: inline-block; */
            /* 行内 */
            display: inline;
        }
    </style>
</head>
<body>
    <div>111</div>
    <div>222</div>
</body>

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

（1）块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等
但是：p标签中不要嵌套div、p、h等块级元素
p和h不能相互嵌套
（2）a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
错误代码示范：

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

四、CSS特性

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

1、继承性的介绍

（1）特性：子元素有默认继承元素样式的特点（子承父业）
（2）可以继承的常见属性（文字控制属性都可以继承控制标签本身的都不能继承）
1.color
2、font-style、font-weight、font-size、font-family
3、text-indent、text-align
4、line-height
5、......
（3）注意点：可以通过调试工具判断是否可以继承
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
（4）（拓展）继承失效的特殊情况
我没有就继承，我有就按我自己的
<1>a标签的color会继承失效
其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
<2>h系列标签的font-size会继承失效
其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

2、层叠性的介绍

（1）特性：

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

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

运行结果：

ps:选多行加内容删除：alt+shift+鼠标左键单击

五、综合案例

综合案例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{
            width: 100px;
            height: 50px;
            background-color: red;
            color: white;
            text-decoration: none;
            display: inline-block;
            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>

运行结果：

鼠标选中悬停时：

综合案例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: white;
        }
        /* 每个a的背景图不同，单独找到每个a,设置不同的背景图片 */
        .one{
            background-image: url(../../rescours/day04/01-案例/images/bg1.png);
        }
        .two{
            background-image: url(../../rescours/day04/01-案例/images/bg2.png);
        }
        .three{
            background-image: url(../../rescours/day04/01-案例/images/bg3.png);
        }
        .four{
            background-image: url(../../rescours/day04/01-案例/images/bg4.png);
        }
        .one:hover{
            background-image: url(../../rescours/day04/01-案例/images/bg5.png);
        }
        .two:hover{
            background-image: url(../../rescours/day04/01-案例/images/bg6.png);
        }
        .three:hover{
            background-image: url(../../rescours/day04/01-案例/images/bg7.png);
        }
        .four:hover{
            background-image: url(../../rescours/day04/01-案例/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>

运行结果：

鼠标悬停时：

3.CSS进阶

一、选择器进阶

（一）复合选择器

1.后代选择器：空格

2.子代选择器：>

3.并集选择器：,

4、交集选择器

5、hover伪类选择器

6、emmet语法

二、背景相关属性

1、背景颜色

2、背景图片

3、背景平铺

4、背景位置

5、背景相关属性的连写形式

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

三、元素显示模式

1、块级元素

2、行内元素

3、行内块元素

4、元素显示模式转换

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

四、CSS特性

1、继承性的介绍

2、层叠性的介绍

五、综合案例

综合案例1 普通导航-效果图

综合案例2 五彩导航-效果图

猜你喜欢

热点阅读