HTML5前端第四章节

一.复合选择器：

定义：

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

作用：

更准确，高效地选择目标元素（标签）

（1）.后代选择器：

作用：

选中某元素的后代元素

写法：

html 复制代码

父级选择器 子选择器(CSS属性)

简单案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div span {
    color: blue;
  }
</style>
</head>
<body>
  <!-- 在本案例中我们控制后代选择器选择只改变在div中的span的颜色 -->
  <span>span标签</span>

  <div>
    <span>
      后代选择器
    </span>
  </div>
</body>
</html>

注意：在后代选择器中，只要其中包含它的后代，那么不管中间差了几级，都是可以进行改变的，如下方案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div span {
    color: blue;
  }
</style>
</head>
<body>
  <!-- 在这里我们又加了一个p标签，也就是把span标签又下放了一级，但是后代选择器依然能起作用 -->
  <span>span标签</span>

  <div>
    <p>
      <span>
        后代选择器
      </span>
    </p>
  </div>
</body>
</html>

（2）.子代选择器

虽然后代选择器的功能很强大，但有些时候它也显得过于强大了，如果在当时我们只是想要修改某元素的子代元素，那么又该怎么办呢？

这时候我们就要用到子代选择器了

简单案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div > span {
    color: blue;
  }
</style>
</head>
<body>
  <span>span标签</span>

  <div>
    <span>
      子代选择器
    </span>

<!-- 这个span并不会被改变，因为它并不是div标签的子级 -->
    <p>
      <span>
        子代选择器
      </span>
    </p>
  </div>
</body>
</html>

（3）.并集选择器：

作用：

选中多组标签并为它们设置相同的样式

选择器的写法：

html 复制代码

选择器1, 选择器2, ..., 选择器n

简单案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div, p, span {
    color: blue;
  }
</style>
</head>
<body>
  <!-- 并集选择器 -->
  <div>
    div标签
  </div>

  <p>
    p标签
  </p>

  <span>
    span标签
  </span>
</body>
</html>

（4）.交集选择器：

作用：

选中同时满足多个条件的元素

选择器的写法：

html 复制代码

选择器1选择器2...选择器n

简单案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 在交集选择器中，只有同时满足两个条件的标签才会被选择器选中 */
  p.box {
    color: blue;
  }

  p {
    color: aqua;
  }

  div.box {
    color: bisque;
  }
</style>
</head>
<body>
  <!-- 交集选择器 -->
   <p class="box">p标签，class为box</p>
   <p>p标签</p>
   <div class="box">div标签，class为box</div>
</body>
</html>

注意：如果交集选择器中有标签选择器，那么标签选择器必须写在最前面（p，div，span等等标签）

（5）.伪类选择器：

伪类表示元素状态，选中元素的某个状态设置样式

①：鼠标悬停状态（伪类选择器）：

写法：

html 复制代码

选择器:hover

简单案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 选择器:hover形式 */
  a:hover {
    color: aqua;
  }
  /* 类:hover形式 */
  .test:hover {
    color: bisque;
  }

</style>
</head>
<body>
  <a href="#">a标签</a>
  <div class="test">div标签</div>
</body>
</html>

②：伪类------超链接

如我们之前所学的，超链接一共有四个状态：

:link表示访问前

:visited表示访问后

:hover表示鼠标悬停时

:active表示点击时（激活时）

其中包含一个注意点：如果要给超链接设置以上四个状态，我们需要按照LVHA（link，visited，hover，active）的顺序书写

简单案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  a:link {
    color: aqua;
  }

  a:visited {
    color: aquamarine;
  }

  a:hover {
    color: azure;
  }

  a:active {
    color: bisque;
  }
</style>
</head>
<body>
  <a href="#">a标签</a>
</body>
</html>

二.CSS特性

CSS的特性：

简化代码，定位问题并解决

（1）.继承性：

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

简单案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-size: 30px;
    color: aqua;
    font-weight: 300;
  }
</style>
</head>
<body>
  <div>div标签</div>
  <p>p标签</p>
  <span>span标签</span>

  <!-- 如果标签自己有样式，那么在它们自己的样式中就不会沿用父级的样式 -->
   <a href="#">a标签</a>
   <h1>h1标签</h1>
</body>
</html>

（2）.层叠性

特点：

①：相同的属性会覆盖，后面的CSS属性会覆盖前面的CSS属性

②：不同的属性会叠加，不同的CSS属性都会生效

简单案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* font-size和font-weight属于不同的属性，它们不会相互干扰，但是由于在之后
  又定义了一次color属性，所以后面的color属性会覆盖前面的属性，导致最后呈现的
  颜色为紫色 */
  div {
    font-size: 30px;
    color: aqua;
  }

  div {
    font-weight: 300;
    color: blueviolet;
  }
</style>
</head>
<body>
  <div>div标签</div>
</body>
</html>

（3）.优先级

优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则会产生相应的变化

匹配规则：

选择器优先级高的样式才生效

优先级的排列：

通配符选择器（*）<标签选择器（div，p等标签）<类选择器（.类名）<id选择器（#id名）<行内样式（直接在标签内写入style属性）<!important（直接写在属性之后，将其优先级提到最高）（选中的标签的范围越大，优先级越低）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 本来在上方使用通配符的优先级是最低的，所以下方的div标签应该是test中所规定的颜色
  但是由于在通配符中使用了!important属性，将其优先级提到最高，所以显示的是通配符中所
  规定的颜色 */
  * {
    color: aquamarine !important;
  }

  .test {
    color: blue;
  }
</style>
</head>
<body>
  <div class="test">div标签</div>
</body>
</html>

注意：

在优先级中还有一个叠加计算规则，即：如果是在复合选择器中，权重需要叠加进行计算

优先级的排列顺序为：行内样式>id选择器>类选择器>标签选择器

在比较时我们需要从左向右依次比较个数，同一级个数更多的，优先级就更高，如果同一级的个数相同，那么继续向后比较（!important的权重最高，继承的权重最低）

叠加计算的简单案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 这个复合选择器中包含两个类选择器，一个标签选择器 */
  .c1 .c2 div {
    color: aqua;
  }
  /* 一个id选择器，一个标签选择器 */
  div #box3 {
    color: black;
  }
  /* 一个id选择器，一个类选择器 */
  #box1 .c3 {
    color: blueviolet;
  }
</style>
</head>
<body>
  <!-- 根据叠加计算规则，最后显示出的颜色为紫色 -->
  <div id = "box1" class="c1">
    <div id = "box2" class="c2">
      <div id = "box3" class="c3">
        div标签
      </div>
    </div>
  </div>
</body>
</html>

三.Emmet写法

Emmet写法是一种代码的简写方式，输入缩写时VSCode会自动生成对应的代码，而这种写法同时适用于HTML和CSS这两种文件之中

注意：大多数简写方式都是属性单词的首字母

（1）.直接写出标签名，VSCode会生成一个简易的标签结构

html 复制代码

<body>
  <!-- 直接输入div -->
  <div></div>
</body>

（2）.写出标签名+.类名

html 复制代码

<body>
  <!-- 直接输入div.test -->
  <div class="test"></div>
</body>

（3）.写出标签名+#id名

html 复制代码

<body>
  <!-- 直接输入div#test -->
  <div id="test"></div>
</body>

（4）.标签名+标签名（同级）

html 复制代码

<body>
  <!-- 直接输入div+p -->
  <div></div>
  <p></p>
</body>

（5）.标签名>标签名（父子级）

html 复制代码

<body>
  <!-- 直接输入div>p -->
   <div>
    <p></p>
   </div>
</body>

（6）.标签名*数量（同时创建几个相同的标签）

html 复制代码

<body>
  <!-- 直接输入div*3 -->
    <div></div>
    <div></div>
    <div></div>
</body>

（7）.标签名{输入内容}（带内容的标签）

html 复制代码

<body>
  <!-- 直接输入div{div标签} -->
   <div>div标签</div>
</body>

（8）.CSS中的简写

html 复制代码

<style>
  div {
    /* 直接输入w */
    width: ;
    /* 直接输入h */
    height: ;
    /* 直接输入w400 */
    width: 400px;
    /* 直接输入bgc */
    background-color: #fff;
    /* 直接输入w300+h300+bgc */
    width: 300px;
    height: 300px;
    background-color: #fff;
  }
</style>

四.背景属性

1.背景色

之前经常用到，就不多说了

html 复制代码

background-color: #fff;

2.背景图

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

属性名：background-image（缩写为bgi）

属性值：url（背景图的url，即地址）

背景图的简单案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div {
    width: 500px;
    height: 500px;

    /* 这是相对地址的写法，如果读者想要实现背景图的效果的话请换成自己的图片地址 */
    background-image: url(./images/1.jpeg);
  }
</style>
</head>
<body>
   <div>div标签</div>
</body>
</html>

3.背景图平铺方式

平铺的表现方式：会使用重复的该张图片填满整个区域

属性名：background-repeat（缩写为bgr）

属性值：no-repeat（不平铺），默认为repeat（平铺），repeat-x（水平方向平铺），repeat-y（垂直方向平铺）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div {
    width: 500px;
    height: 500px;

    background-image: url(./images/1.jpeg);

    /* 为了更好的理解背景图平铺的效果，建议各位读者还是自己去试试平铺与不平铺的效果 */
    background-repeat: no-repeat;
  }
</style>
</head>
<body>
   <div>div标签</div>
</body>
</html>

4.背景图位置

属性名：background-position（简写为bgp）

属性值：水平方向位置与垂直方向位置

关键字：left（左侧），right（右侧），center（居中），top（顶部），bottom（底部）

坐标（数字+px，数字无论正负都可以）

注意，背景图的默认位置为左上角，代码表现为：

html 复制代码

    /* 背景图默认位置 */
    background-position: 0 0;
    background-position: left top;

背景图位置全取决于之后的需求，所以在这里不做过多演示，只有一个简单案例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div {
    width: 500px;
    height: 500px;

    background-image: url(./images/1.jpeg);

    /* 使用不平铺，只有一张图片的方式更容易看出效果 */
    background-position: center top;
  }
</style>
</head>
<body>
   <div>div标签</div>
</body>
</html>

注意：

1.在关键字的写法中不区分先后顺序，只看你的关键字（数字方式的写法中，左边的数值是水平方向的位置，右边的数值是垂直方向的位置）

2.关键字和数字的写法也可以只写一个数值，另一个方向就会默认是center（居中）

html 复制代码

    /* 水平位置在左边，垂直位置默认为center */
    background-position: left;

    /* 水平位置在50px，垂直位置默认为center */
    background-position: 50px;

5.背景图缩放

作用：

设置背景图的大小

属性值：

background-size（缩写为bgz）

常用属性值：

（1）.关键字：

cover（等比例缩放背景图片以完全覆盖背景区，可能会导致背景图片部分看不见），contain（等比例缩放背景图片以完全装入背景区，可能会导致背景区部分空白）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div {
    width: 500px;
    height: 500px;

    background-image: url(./images/1.jpeg);

    background-repeat: no-repeat;

    background-size: contain;
  }
</style>
</head>
<body>
   <div>div标签</div>
</body>
</html>

（2）.百分比：

根据盒子尺寸计算图片大小

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div {
    width: 500px;
    height: 500px;

    background-image: url(./images/1.jpeg);

    background-repeat: no-repeat;

    background-size: 100%;
  }
</style>
</head>
<body>
   <div>div标签</div>
</body>
</html>

（3）.数字+单位（px等）

这种方式需要进行一定程度的计算，在实际遇到这种情况时读者再自己试试吧

6.背景图固定（默认为随着元素的内容滚动，如果不滚动则只会停留在网页中一个固定的位置上）

作用：

使得背景不会随着元素的内容滚动

属性名：

background-attachment（缩写为bga）

属性值：

fixed

7.背景复合属性

属性名：

background（简写为bg）

属性值：

背景色，背景图，背景图平铺方式，背景图位置，背景图缩放，背景图固定（使用空格隔开各个属性值，并且不需要区分顺序）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div {
    width: 500px;
    height: 500px;

    /* background复合属性简单案例 */
    background: blueviolet url(./images/1.jpeg) no-repeat center/cover;
  }
</style>
</head>
<body>
   <div>div标签</div>
</body>
</html>

五.显示模式

显示模式表示标签（元素）的显示方式

作用：

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

1.块级元素

（1）.特点：

①：独占一行

②：宽度默认是父级的100%

③：添加宽高属性生效

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div {
    width: 300px;
    height: 300px;
  }
</style>
</head>
<body>
  <!-- 块级元素的特点 -->
   <div>div标签</div>
   <div>div标签</div>
</body>
</html>

2.行内元素

（1）.特点：

①：一行内可以共存多个

②：尺寸由内容撑开

③：加宽高不会生效

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  span {
    width: 300px;
    height: 300px;
  }
</style>
</head>
<body>
  <!-- 行内元素的特点 -->
   <span>span标签</span><span>span标签</span>
</body>
</html>

3.行内块元素

（1）.特点：

①：一行共存多个

②：默认尺寸由内容撑开

③：加宽高会生效

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  img {
    width: 300px;
    height: 300px;
  }
</style>
</head>
<body>
  <!-- 行内块元素的特点 -->
   <img src="./images/1.jpeg" alt="">
   <img src="./images/2.jpeg" alt="">
</body>
</html>

4.转换显示模式

属性名：display

属性值：block（块级），inline-block（行内块），inline（行内）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  div {
    width: 300px;
    height: 300px;

    /* 转换为行内块元素 */
    display: inline-block;
  }

  .div1 {
    background-color: aqua;
  }

  .div2 {
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <!-- 转换显示模式 -->
   <div class="div1">div标签</div>
   <div class="div2">div标签</div>
</body>
</html>