CSS

1.1CSS基础

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（ 美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

<title>CSS 初体验</title>
<style>
  /* 选择器 { } */
  p {
    /* CSS 属性 */
    color: red;
  }
</style>

<p>体验 CSS</p>

属性名和属性值成对出现 → 键值对

1.2CSS引入方式

内部样式表：学习使用
- CSS 代码写在 style 标签里面
外部样式表：开发使用

CSS 代码写在单独的 CSS 文件中（.css）
在 HTML 使用 link 标签引入

<link rel="stylesheet" href="./my.css">

行内样式：配合 JavaScript 使用
- CSS 写在标签的 style 属性值里

<div style="color: red; font-size:20px;">这是 div 标签</div>

1.3选择器

作用：查找标签，设置样式。

1.3.1标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。

例如：p, h1, div, a, img......

<style>
  p {
    color: red;
  }
</style>

注意：标签选择器无法差异化同名标签的显示效果。

1.3.2类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

定义类选择器 → .类名
使用类选择器 → 标签添加 class="类名"

<style>
  /* 定义类选择器 */
  .red {
    color: red;
  }
</style>

<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div>

注意：

类名自定义，不要用纯数字或中文，尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。

1.3.3id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

定义 id 选择器 → #id名
使用 id 选择器 → 标签添加 id= "id名"

<style>
  /* 定义 id 选择器 */
  #red {
    color: red;
  }
</style>

<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

规则：同一个 id 选择器在一个页面只能使用一次。

1.3.4通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

* {
  color: red;
}

经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。

*{
   margin:0;
   padding:0;
}

1.4盒子尺寸和背景色

1.5文字控制属性

p {
    font-size: 30px;
    font-weight: 400;
    /* font-weight: 700; 400(normal)正常，700(bold)加粗*/
    font-style: normal;
    /* 正常normal，倾斜italic */
    line-height: 30px;
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    text-indent: 2em;
    /* 推荐：1em = 当前标签的字号大小 */
    text-align: center;
    /* left左对齐（默认），center居中，right右对齐 */
    text-decoration: none;
    /* none:无；underline:下划线;（line-through:删除线;overline:上划线；） */
    color:#000;
    /* rgba(r,g,b,a) rgb表示红绿蓝三原色，取值0-255，a表示透明度，取值0-1； */
}

经验：谷歌浏览器默认字号是16px；

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）；

font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找

font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体sans-serif

font复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜是否加粗字号/行高字体（必须按顺序书写）

字号和字体值必须书写，否则 font 属性不生效

1.6调试工具

作用：检查、调试代码；帮助程序员发现代码问题、解决问题

打开调试工具

浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查
F12

使用调试工具

网页制作思路：

从上到下，先整体再局部

先标签，再 CSS 美化

CSS进阶

2.1复合选择器

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

作用：更准确、更高效的选择目标元素（标签）。

2.1.1后代选择器

后代选择器：选中某元素的后代元素。

选择器写法：父选择器子选择器 { CSS 属性}，父子选择器之间用空格隔开。

<style>
  div span {
    color: red;
  }
</style>
  <span> span 标签，不变红</span>
<div>
  <span>这是 div 的儿子 span，变红</span >
</div>

2.1.2子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。

选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

<style>
  div > span {
    color: red;
  }
</style>

<div>
  <span>这是 div 里面的 span，变红</span>
  <p>
    <span>这是 div 里面的 p 里面的 span，不变红</span>
  </p>
</div>

2.1.3并集选择器

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

选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

<style>
  div,
  p,
  span {
    color: red;
  }
</style>

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

2.1.4交集选择器

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

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

类选择器就是.box，自带点

<style>
  p.box {
  color: red;
}
</style>

<p class="box">p 标签，使用了类选择器 box，变红</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

2.1.5伪类选择器

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

鼠标悬停状态：选择器:hover { CSS 属性 }

任何标签都可以设置鼠标悬停效果

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

<a href="#">a 标签，红色</a>
<div class="box">div 标签，绿色</div>

2.1.5.1超链接伪类

提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

经验：工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置

a {
  color: red;
}

a:hover {
  color: green;
}

2.2CSS特性

CSS特性：化简代码 / 定位问题，并解决问题

继承性
层叠性
优先级

2.2.1继承性

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

注意：如果标签有默认文字样式会继承失败。例如：a 标签的颜色、标题的字体大小

2.2.2层叠性

特点：

相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加：不同的 CSS 属性都生效

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

<div>div 标签</div>  <--相同的后边的生效，是绿的，不同的会叠加-->

注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断

2.2.3优先级

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

2.2.3.1基础选择器

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

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

（选中标签的范围越大，优先级越低）

!important :提权功能，提高权重/优先级到最高，慎用

2.2.3.2复合选择器-叠加

叠加计算：如果是复合选择器，则需要权重叠加计算。

公式：（每一级之间不存在进位）

（行内样式，id选择器个数，类选择器个数，标签选择器个数）

规则：

从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important 权重最高
继承权重最低

2.3Emmet写法

Emmet写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码

HTML标签

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

2.4背景属性

2.4.1背景图

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

属性名：background-image（bgi）
属性值：url(背景图 URL)

div {
  width: 400px;
  height: 400px;

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

提示：背景图默认有平铺（复制）效果。

2.4.2平铺方式

属性名：background-repeat（bgr）

2.4.3背景图位置

属性名：background-position（bgp）

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

关键字

坐标
- 水平：正数向右；负数向左
- 垂直：正数向下；负数向上

提示：
关键字取值方式写法，可以颠倒取值顺序

可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

2.4.4背景图缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值：

关键字
- cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比：根据盒子尺寸计算图片大小

数字 + 单位（例如：px）

提示：工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。

2.4.5背景图固定

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

属性名：background-attachment（bga）

属性值：fixed

background-attachment: fixed;

2.4.6背景复合属性

属性名：background（bg）

属性值：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定（空格隔开各个属性值，不区分顺序）

div {
  width: 400px;
  height: 400px;

  background: pink url(./images/1.png) no-repeat right center/cover;
}

2.5显示模式

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

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

2.5.1块级元素

特点：

独占一行
宽度默认是父级的100%
添加宽高属性生效

2.5.2行内元素

特点：

一行可以显示多个
设置宽高属性不生效
宽高尺寸由内容撑开

2.5.3行内块元素

特点：

一行可以显示多个
设置宽高属性生效
宽高尺寸也可以由内容撑开

2.5.4转换显示模式

属性：display

<!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>显示模式转换</title>
  <style>
    /* 块级：独占一行；宽度默认是父级的100%；加宽高生效 */
    div {
      width: 100px;
      height: 100px;

      /* display: inline-block; */

      display: inline;
    }

    .div1 {
      background-color: brown;
    }

    .div2 {
      background-color: orange;
    }

    /* 行内：一行共存多个；尺寸由内容撑开；加宽高 不 生效 */
    span {
      width: 200px;
      height: 200px;

      /* display: block; */
      display: inline-block;
    }

    .span1 {
      background-color: brown;
    }

    .span2 {
      background-color: orange;
    }

    /* 行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效 */
    img {
      width: 100px;
      height: 100px;

      display: block;
    }
  </style>
</head>
<body>
  <!-- 块元素 -->
  <div class="div1">div 标签1</div>
  <div class="div2">div 标签2</div>

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

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

盒子模型

3.1选择器

3.1.1结构伪类选择器の基本使用

作用：根据元素的结构关系查找元素

li:first-child {
  background-color: green;
}

3.1.2:nth-child(公式)

提示：公式中的n取值从 0 开始。

3.1.3伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

注意点：

必须设置 content: ””属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同

3.2PxCook

PxCook（像素大厨）是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

开发面板（自动智能识别）
设计面板（手动测量尺寸和颜色）

使用方法：创建项目 → 输入项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿

3.3盒子模型

作用：布局网页，摆放盒子和内容。

3.3.1盒子模型-组成

内容区域 – width & height
内边距 – padding（出现在内容与盒子边缘之间）
边框线 – border
外边距 – margin（出现在盒子外面）

div {
  margin: 50px;
  border: 5px solid brown;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

3.3.2边框线

3.3.2.1四个方向

属性名：border（bd）

属性值：边框线粗细线条样式颜色（不区分顺序）

3.3.2.2单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

属性值：边框线粗细线条样式颜色（不区分顺序）

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

3.3.3内边距

作用：设置内容与盒子边缘之间的距离。

属性名：padding / padding-方位名词

div {
  /* 四个方向 内边距相同 */
  padding: 30px;
  /* 单独设置一个方向内边距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

提示：添加 padding 会撑大盒子。

padding 多值写法

技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

3.3.4尺寸计算

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会撑大盒子

解决：

手动做减法，减掉 border / padding 的尺寸
內减模式：box-sizing: border-box

3.3.5外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同

3.3.6版心居中

左右 margin 值为 auto（盒子要有宽度）//自适应

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

3.3.7清除默认样式

/* 清除默认内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
  list-style: none;
}

3.3.8元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

3.3.9外边距问题

3.3.9.1合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

3.3.9.2外边距塌陷

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动

解决方法：

取消子级margin，父级设置padding
父级设置 overflow: hidden
父级设置 border-top

3.3.10行内元素--内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

span {
  /* margin 和 padding 属性，无法改变垂直位置 */
  margin: 50px;
  padding: 20px;
  /* 行高可以改变垂直位置 */
  line-height: 100px;
}

3.3.11圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

提示：属性值是圆角半径

多值写法

技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%

胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半

3.3.12盒子阴影（拓展）

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影

注意：

X 轴偏移量和 Y 轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

Flex布局

4.1标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

4.2浮动

4.2.1基本使用

作用：让块元素水平排列。

属性名：float

属性值

left：左对齐
right：右对齐

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置

4.2.2清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

额外标签法（了解）：在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both
单伪元素法：

准备 after 伪元素
父级使用 clearfix 类

双伪元素法：

准备 after 和 before 伪元素

父级使用 clearfix 类

overflow法：

4.3Flex布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

4.3.1Flex组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器
弹性盒子
主轴：默认在水平方向
侧轴 / 交叉轴：默认在垂直方向

4.3.2主轴对齐方式

属性名：justify-content

4.3.3侧轴对齐方式

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

4.3.4修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

4.3.5弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

4.3.6弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值

wrap：换行
nowrap：不换行（默认）

4.3.7行内对齐方式

属性名：align-content

注意：该属性对单行弹性盒子模型无效。

CSS高级

5.1定位

作用：灵活的改变盒子在网页中的位置

实现：

1.定位模式：position

2.边偏移：设置盒子的位置

left
right
top
bottom

5.1.1相对定位

position: relative

特点：

不脱标，占用自己原来位置
显示模式特点保持不变
设置边偏移则相对自己原来位置移动

div {
  position: relative;
  top: 100px;
  left: 200px;
}

5.1.2绝对定位

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

脱标，不占位
显示模式具备行内块特点
设置边偏移则相对最近的已经定位的祖先元素改变位置
如果祖先元素都未定位，则相对浏览器可视区改变位置

.father {
  position: relative;
}

.father span {
  position: absolute;
  top: 0;
  right: 0;
}

5.1.3定位居中

实现步骤：

绝对定位
水平、垂直边偏移为 50%
子级向左、上移动自身尺寸的一半

左、上的外边距为 –尺寸的一半
transform: translate(-50%, -50%)

img {
  position: absolute;
  left: 50%;
  top: 50%;

  /* margin-left: -265px;
  margin-top: -127px; */

  /* 方便： 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);
}

5.1.4固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

脱标，不占位
显示模式具备行内块特点
设置边偏移相对浏览器窗口改变位置

div {
  position: fixed;
  top: 0;
  right: 0;

  width: 500px;
}

5.1.5堆叠层级z-index

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：整数数字（默认值为0，取值越大，层级越高）

.box1 {
  background-color: pink;
  /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
  z-index: 1;
}

.box2 {
  background-color: skyblue;
  left: 100px;
  top: 100px;

  z-index: 2;
}

5.2高级技巧

5.2.1CSS精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图
添加 background-position 属性，改变背景图位置

　　　　3.1 使用 PxCook 测量小图片左上角坐标

　　　　3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

5.2.2案例-京东服务

5.2.2.1HTML结构

<div class="service">
  <ul>
    <li>
      <h5></h5>
      <p>品类齐全，轻松购物</p>
    </li>
    <li>
      <h5></h5>
      <p>多仓直发，极速配送</p>
    </li>
    <li>
      <h5></h5>
      <p>正品行货，精致服务</p>
    </li>
    <li>
      <h5></h5>
      <p>天天低价，畅选无忧</p>
    </li>
  </ul>
</div>

5.2.2.2CSS样式

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  li {
    list-style: none;
  }

  .service {
    margin: 100px auto;
    width: 1190px;
    height: 42px;
    /* background-color: pink; */
  }

  .service ul {
    display: flex;
  }

  .service li {
    display: flex;
    padding-left: 40px;
    width: 297px;
    height: 42px;
    /* background-color: skyblue; */
  }

  .service li h5 {
    margin-right: 10px;
    width: 36px;
    height: 42px;
    /* background-color: pink; */
    background: url(./images/sprite.png) 0 -192px;
  }

  .service li:nth-child(2) h5 {
    background-position: -41px -192px;
  }

  .service li:nth-child(3) h5 {
    background-position: -82px -192px;
  }

  .service li:nth-child(4) h5 {
    background-position: -123px -192px;
  }

  .service li p {
    font-size: 18px;
    color: #444;
    font-weight: 700;
    line-height: 42px;
  }
</style>

5.2.3字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点

灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：先下载再使用

5.2.3.1下载字体

iconfont 图标库：https://www.iconfont.cn/

5.2.3.2使用字体

引入字体样式表（iconfont.css）

标签使用字体图标类名

iconfont：字体图标基本样式（字体名，字体大小等等）
icon-xxx：图标对应的类名

5.2.3.3上传矢量图

作用：项目特有的图标上传到 iconfont 图标库，生成字体

上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核

5.3CSS修饰属性

5.3.1垂直对齐方式

属性名：vertical-align

5.3.2过渡

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性花费时间 (s)

提示：

过渡的属性可以是具体的 CSS 属性
也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
transition 设置给元素本身

img {
  width: 200px;
  height: 200px;
  transition: all 1s;
}

img:hover {
  width: 500px;
  height: 500px;
}

5.3.3透明度opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0 – 1

0：完全透明（元素不可见）
1：不透明
0-1之间小数：半透明

5.3.4光标类型

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

标签：color,标签,前端,background,选择器,CSS,属性
From： https://www.cnblogs.com/jinjunweii/p/17500252.html

前端-CSS

CSS