一叶知秋

外观

001

04_复合选择器 + CSS 特性 + 背景属性 + 显示模式 ​

01_复合选择器 ​

01_后代 + 子代 + 并集 + 交集 ​

01_复合选择器

定义: 由 两个或多个基础选择器, 通过不同的方式组合而成

作用: 更准确, 更高效 的选择目标元素 (标签)

002

02_后代选择器

后代选择器: 选中某元素的 后代 元素

选择器写法∶ 父选择器 子选择器 { CSS属性 }, 父子选择器之间用 空格 隔开

003
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.后代选择器: 选中所有后代, 包含儿子, 孙子, 重孙子... */
    div span {
      color: red;
    }
  </style>
</head>

<body>
  <span>span 标签</span>
  <div>
    <span>这是 div 的儿子 span</span>
    <p>
      <span>孙子 span</span>
    </p>
  </div>
</body>

</html>

03_子代选择器

004

子代选择器: 选中某元素的 子代 元素 (最近的子级)

选择器写法: 父选择器 > 子选择器 { CSS 属性 }, 父子选择器之间用 > 隔开

005
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.子代选择器: 选中某元素的 子代 元素 (最近的子级) */
    div > span {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <span>儿子 span</span>
    <p>
      <span>孙子 span</span>
    </p>
  </div>
</body>

</html>

04_并集选择器

并集选择器: 选中 多组 标签设置 相同 的样式

选择器写法: 选择器1, 选择器2, ..., 选择器N { CSS 属性 }, 选择器之间用 , 隔开

006
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.并集选择器: 选中 多组 标签设置 相同 的样式 */
    div,
    p,
    span {
      color: red;
    }
  </style>
</head>

<body>
  <div>div 标签</div>
  <p>p 标签</p>
  <span>span 标签</span>
</body>

</html>

05_交集选择器

交集选择器: 选中 同时 满足 多个条件 的元素

007

选择器写法: 选择器1选择器2 { CSS 属性 }, 选择器之间连写, 没有任何符号

008

注意: 如果交集选择器中有标签选择器, 标签选择器必须书写在最前面

html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.既又的关系: 既是 p 标签, 又是有 box 类 */
    p.box {
      color: red;
    }
  </style>
</head>

<body>
  <p class="box">p 标签, 使用了类选择器 box</p>
  <p>p 标签</p>
  <div class="box">div 标签, 使用了类选择器</div>
</body>

</html>

02_伪类选择器 ​

01_伪类选择器

伪类选择器: 伪类表示元素 状态, 选中元素的某个状态设置样式

009

鼠标悬停状态: 选择器:hover

010
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.任何标签都可以设置鼠标悬停的状态 */
    a:hover {
      color: red;
    }

    .box:hover {
      color: green;
    }
  </style>
</head>

<body>
  <a href="#">a 标签, 超链接</a>
  <div class="box">div 标签</div>
</body>

</html>

02_超链接的伪类选择器

超链接一共有 四 个状态

011

提示: 如果要给超链接设置四个状态, 需要按 LVHA 的顺序书写

html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.超链接访问前 */
    a:link {
      color: red;
    }

    /* 2.超链接访问后 */
    a:visited {
      color: green;
    }

    /* 3.超链接鼠标悬停 */
    a:hover {
      color: blue;
    }

    /* 4.超链接点击时 (激活) */
    a:active {
      color: orange;
    }
  </style>
</head>

<body>
  <a href="#">a 标签, 测试伪类</a>
</body>

</html>

工作中: 超链接设置的样式

html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.工作中: 一个 a 标签选择器设置超链接的样式, hover 状态 特殊设置 */
    a {
      color: red;
    }

    a:hover {
      color: green;
    }
  </style>
</head>

<body>
  <a href="#">a 标签, 测试伪类</a>
</body>

</html>

02_CSS 特性 ​

01_继承性 + 层叠性 + 优先级 ​

01_CSS 特性

CSS 特性: 化简代码 / 定位问题, 并解决问题

  • 继承性
  • 层叠性
  • 优先级

02_继承性

继承性: 子 级默认继承 父 级的 文字控制属性

012
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    body {
      font-size: 30px;
      color: red;
      font-weight: 700;
    }
  </style>
</head>

<body>
  <!-- 1.继承性: 子 级默认继承 父 级的 文字控制属性 -->
  <div>div 标签</div>
  <p>p 标签</p>
  <span>span 标签</span>

  <!-- 2.如果标签自己有样式则生效自己的样式, 不继承 -->
  <h1>h1 标签</h1>
  <a href="#">a 标签</a>
</body>

</html>

03_层叠性

特点:

  • 相同的属性会 覆盖: 后面 的 CSS 属性覆盖 前面 的 CSS 属性
  • 不同的属性会 叠加: 不同 的 CSS 属性 都生效
013
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      color: red;
      font-weight: 700;
    }

    div {
      /* 1.相同的属性会 覆盖: 后面 的 CSS 属性覆盖 前面 的 CSS 属性 */
      color: green;

      /* 2.不同的属性会 叠加: 不同 的 CSS 属性 都生效 */
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div>div 标签</div>
</body>

</html>

04_优先级

优先级: 也叫权重, 当一个标签使用了 多种 选择器时, 基于不同种类的选择器的 匹配规则

014

规则: 选择器优先级高的样式生效

公式: 通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important (选中标签的范围越大, 优先级越低)

html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 7.技巧: 选择器选中标签的范围越大, 优先级/权重 越低 -->
  <style>
    /* 4.id 选择器 */
    #test {
      color: orange;
    }

    /* 3.类选择器 */
    .box {
      color: blue;
    }

    /* 2.标签选择器 */
    div {
      color: green;
    }

    /* 1.通配符选择器 */
    * {
      color: red !important; /* 6.!important 提权功能, 提高 权重/优先级 到最高, 慎用 */
    }
  </style>
</head>

<body>
  <!-- 5.行内样式 -->
  <div class="box" id="test" style="color: purple;">div 标签</div>
</body>

</html>

05_优先级叠加计算规则

015

叠加计算: 如果是 复合选择器, 则需要权重叠加计算

公式: (每一级之间 不存在进位)

  • id 选择器个数, 类 选择器个数, 标签 选择器个数

规则:

  • 从左向右 依次比较选个数, 同一级 个数 多 的优先级 高, 如果个数相同, 则向后比较
  • !important 权重最高
  • 继承权重最低
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.id 选择器个数, 类 选择器个数, 标签 选择器个数 */

    /* 2.(0, 2, 1) */
    .c1 .c2 div {
      color: blue;
    }

    /* 3.(1, 0, 1) */
    div #box3 {
      color: green;
    }

    /* 4.(1, 1, 0) */
    #box1 .c3 {
      color: orange;
    }
  </style>
</head>

<body>
  <div id="box1" class="c1">
    <div id="box2" class="c2">
      <div id="box3" class="c3">
        这行文本是什么颜色的?
      </div>
    </div>
  </div>
</body>

</html>

02_Emmet 写法 ​

01_Emmet 写法

Emmet 写法: 代码的 简写 方式, 输入缩写 VSCode 会 自动生成 对应的代码

HTML

016

CSS: 大多数简写方式为属性单词的 首字母

html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      /* 8.单词的 首字母: w500+h200+bgc */
      width: 500px;
      height: 200px;
      background-color: #fff;
    }
  </style>
</head>

<body>
  <!-- 1.类选择器: p.box -->
  <p class="box"></p>

  <!-- 2.类选择器: .box -->
  <div class="box"></div>

  <!-- 3.id 选择器: p#box -->
  <p id="box"></p>

  <!-- 4.同级标签: div+p -->
  <div></div>
  <p></p>

  <!-- 5.父子级标签: div>p -->
  <div>
    <p></p>
  </div>

  <!-- 6.多个相同标签: span*3 -->
  <span></span><span></span><span></span>

  <!-- 7.有内容的标签: div{111} -->
  <div>111</div>
</body>

</html>

03_背景属性 ​

01_背景图 + 平铺方式 + 位置 + 缩放 + 固定 ​

01_背景图

网页中, 使用背景图实现 装饰性 的图片效果

017

属性名: background-image ( bgi )

属性值: url(背景图 URL)

018
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      /* 1.盒子是 400 * 400 */
      width: 400px;
      height: 400px;

      /* 2.背景图默认是平铺 (复制) 的效果 */
      background-image: url(./images/1.png);
    }
  </style>
</head>

<body>
  <div>div 标签</div>
</body>

</html>

02_背景图平铺方式

属性名: background-repeat ( bgr )

属性值

019
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <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.png);

      /* 1.不平铺: 盒子的左上角显示一张背景图 */
      background-repeat: no-repeat;

      /* 2.平铺 (默认效果) */
      /* background-repeat: repeat; */

      /* 3.水平方向平铺 */
      /* background-repeat: repeat-x; */

      /* 4.垂直方向平铺 */
      /* background-repeat: repeat-y; */
    }
  </style>
</head>

<body>
  <div>div 标签</div>
</body>

</html>

03_背景图位置

属性名: background-position ( bgp )

属性值: 水平方向位置 垂直方向位置

020

提示:

  • 关键字 取值方式写法, 可以 颠倒 取值顺序
  • 可以只写一个关键字, 另一个方向 默认为 居中; 数字 只写一个值表示 水平 方向, 垂直方向为 居中
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <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.png);
      background-repeat: no-repeat;

      /* 1.左上角 */
      /* background-position: 0 0; */
      /* background-position: left top; */

      /* 2.右下角 */
      /* background-position: right bottom; */

      /* 3.水平: 正数向右, 负数向左 */
      /* background-position: 50px 0; */
      /* background-position: -50px 0; */

      /* 4.垂直: 正数向下, 负数向上 */
      /* background-position: 0 100px; */
      /* background-position: 0 -100px; */

      /* 5.数字 关键字 混用也可以 */
      /* background-position: 50px center; */

      /* 6.关键字 取值方式写法: 可以 颠倒 取值顺序 */
      /* background-position: bottom left; */

      /* 7.可以只写一个关键字, 另一个方向 默认为 居中 */
      /* background-position: bottom; */

      /* 8.数字 只写一个值表示 水平 方向, 垂直方向为 居中 */
      background-position: 50px;
    }
  </style>
</head>

<body>
  <div>div 标签</div>
</body>

</html>

04_背景图缩放

作用: 设置背景图大小

属性名: background-size ( bgz )

常用属性值:

  • 关键字
    • cover: 等比例缩放背景图片以完全覆盖背景区, 可能背景图片部分看不见
    • contain: 等比例缩放背景图片以完全装入背景区, 可能背景区部分空白
  • 百分比: 根据盒子尺寸计算图片大小
  • 数字 ＋ 单位 (例如: px)
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      width: 500px;
      height: 300px;
      background-color: pink;

      background-image: url(./images/1.png);
      background-repeat: no-repeat;

      /* 1.contain: 如果图的 宽/高 跟盒子尺寸相等停止缩放, 可能导致盒子有露白 */
      /* background-size: contain; */

      /* 2.cover: 图片完全覆盖盒子, 可能导致图片显示不全 */
      background-size: cover;

      /* 3.100% 图片的宽度跟盒子宽度一样, 图片的高度按照图片比例等比缩放 */
      /* background-size: 100%; */
    }
  </style>
</head>

<body>
  <div>div 标签</div>
</body>

</html>

05_背景图固定

作用: 背景不会随着元素的内容滚动

属性名: background-attachment ( bga )

属性值: fixed

021
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    body {
      background-image: url(./images/bg.jpg);
      background-repeat: no-repeat;
      background-position: center top;

      /* 1.背景图不会随着元素的内容滚动 */
      background-attachment: fixed;
    }
  </style>
</head>

<body>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
  <p>测试文字, 撑开 body, 让浏览器有滚动条</p><br><br><br><br><br><br>
</body>

</html>

02_背景复合属性 ​

01_背景复合属性

属性名: background (bg)

属性值: 背景色 背景图 背景图平铺方式 背景图位置 /背景图缩放 背景图固定 (空格 隔开各个属性值, 不区分顺序)

022
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      width: 400px;
      height: 400px;

      /* 1.背景色 背景图 背景图平铺方式 背景图位置 /背景图缩放 */
      background: pink url(./images/1.png) no-repeat center bottom /cover;

      /* background: pink url(./images/1.png) no-repeat center bottom /contain; */
    }
  </style>
</head>

<body>
  <div>div 标签</div>
</body>

</html>

04_显示模式 ​

01_块级 + 行内块 + 行内 + 转换显示模式 ​

01_显示模式

显示模式: 标签 (元素) 的显示方式

023

作用: 布局网页的时候, 根据标签的显示模式选择 合适 的标签摆放内容

024

02_块级元素

  • 独占 一行
  • 宽度默认是 父 级的 100%
  • 添加 宽高 属性 生效
025
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.块级元素: 独占一行, 宽度默认是父级的 100%, 加宽高生效 */
    div {
      width: 100px;
      height: 100px;
    }

    .div1 {
      background-color: brown;
    }

    .div2 {
      background-color: orange;
    }
  </style>
</head>

<body>
  <!-- 块元素 -->
  <div class="div1">div 标签1</div>
  <div class="div2">div 标签2</div>
</body>

</html>

03_行内元素

行内元素

  • 一行共存多个
  • 尺寸由内容撑开
  • 加宽高 不 生效
026
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.行内元素: 一行共存多个, 尺寸由内容撑开, 加宽高 不 生效 */
    span {
      width: 200px;
      height: 200px;
    }

    .span1 {
      background-color: brown;
    }

    .span2 {
      background-color: orange;
    }
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <span class="span1">span11111111</span>
  <span class="span2">span1</span>
</body>

</html>

04_行内块元素

  • 一行共存多个
  • 默认尺寸由内容撑开
  • 加宽高生效
027
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.行内块元素: 一行共存多个, 默认尺寸由内容撑开, 加宽高生效 */
    img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <!-- 行内块元素 -->
  <img src="./images/1.png" alt="">
  <img src="./images/1.png" alt="">
</body>

</html>

05_总结

"独占一行; 宽高属性生效; 默认宽度是父级的 100%" 是什么显示模式的特点?

  • 块级

"一行共存多个; 宽高属性不生效; 宽高由内容撑开" 是什么显示模式的特点?

  • 行内

"一行共存多个; 宽高属性生效; 宽高默认由内容撑开" 是什么显示模式特点?

  • 行内块

06_转换显示模式

属性名: display

属性值:

028
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 块级元素 */
    div {
      width: 100px;
      height: 100px;

      /* 1.块级元素 转 行内块元素 */
      /* display: inline-block; */

      /* 2.块级元素 转 行内元素 */
      /* display: inline; */
    }

    .div1 {
      background-color: brown;
    }

    .div2 {
      background-color: orange;
    }

    /* 行内元素 */
    span {
      width: 200px;
      height: 200px;

      /* 3.行内元素 转 块级元素 */
      /* display: block; */

      /* 4.行内元素 转 行内块元素 */
      /* display: inline-block; */
    }

    .span1 {
      background-color: brown;
    }

    .span2 {
      background-color: orange;
    }

    /* 行内块元素 */
    img {
      width: 100px;
      height: 100px;

      /* 5.行内块元素 转 块级元素 */
      /* display: block; */
    }
  </style>
</head>

<body>
  <!-- 块元素 -->
  <div class="div1">div 标签1</div>
  <div class="div2">div 标签2</div>

  <!-- 行内元素 -->
  <span class="span1">span111111</span>
  <span class="span2">span1</span>

  <!-- 行内块元素 -->
  <img src="./images/1.png" alt="">
  <img src="./images/1.png" alt="">
</body>

</html>

05_综合案例 ​

01_热词 ​

01_热词

029
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.默认效果 */
    a {
      display: block;
      width: 200px;
      height: 80px;
      background-color: #3064bb;
      color: #fff;
      text-decoration: none;
      text-align: center;
      line-height: 80px;
      font-size: 18px;
    }

    /* 2.鼠标悬停的效果 */
    a:hover {
      background-color: #608dd9;
    }
  </style>
</head>

<body>
  <a href="#">HTML</a>
  <a href="#">CSS</a>
  <a href="#">JavaScript</a>
  <a href="#">Vue</a>
  <a href="#">React</a>
</body>

</html>

02_banner 效果 ​

01_banner 效果

030
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .banner {
      height: 500px;
      background-color: #f3f3f4;
      background-image: url(./images/bk.png);
      background-repeat: no-repeat;
      background-position: left bottom;

      /* 1.文字控制属性, 继承给子级 */
      text-align: right;
      color: #333;
    }

    .banner h2 {
      font-size: 36px;
      font-weight: 400;
      line-height: 100px;
    }

    .banner p {
      font-size: 20px;
    }

    .banner a {
      width: 125px;
      height: 40px;
      background-color: #f06b1f;

      /* 2.转块级无法右对齐, 因为块元素独占一行 */
      /* display: block; */
      display: inline-block;
      
      text-align: center;
      line-height: 40px;
      color: #fff;
      text-decoration: none;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div class="banner">
    <h2>让创造产生价值</h2>
    <p>我们希望小游戏平台可以提供无限的可能性, 让每一个创作者都可以将他们的才华和创意传递给用户。</p>
    <a href="#">我要报名</a>
  </div>
</body>

</html>

更新时间: