前端笔记（二）：CSS 选择器与特性

CSS（层叠样式表）是一种样式表语言，用于描述HTML或XML文档的呈现方式。它定义了如何在屏幕、纸张或其他媒体上显示文档的样式、布局和外观。
里面的代码由 选择器 + { } 组成

体验 CSS

CSS 可以让我们界面变得更加美观，这是 CSS 的一个效果展现

<!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>
        p {
            /* 文字颜色 */
            color: red;
            /* 字号 */
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

image.png

CSS 的引入方式

CSS 有三种引入方式，内部样式表、外部样式表和行内样式

  1. 内部样式表：学习使用
    1. 将代码写在 style 标签中
  2. 外部样式表
    1. 再单独的 CSS 文件中写代码
    2. 再 HTML 中使用 link 标签引入
  3. 行内样式：配合 JavaScript 使用
    1. CSS 写在标签的 style 属性之里面

下面是这三种方式的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./02.CSS的引入方式.css">
</head>
<body>
    <p>使用外部样式表</p>
    <div style="color: green; font-size: 30px;">使用行内样式表</div>
</body>
</html>

image.png

选择器

因为我们一般不使用行内样式来规范标签的样式，所以如何告诉浏览器我们想更改哪个标签的样式格外重要，需要用到 CSS 的选择器。

标签选择器

使用标签名作为选择器，选中同名的标签来设置相同的样式

例如：p h1 div a img 等等

类选择器

查找标签，差异化的设置标签中的显示效果

定义类选择器 .类名
使用类选择器 class=“类名”
注意：

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

id 选择器

查找标签，差异化设置标签的显示效果

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

  • 定义 id 选择器 #id名
  • 使用 id 选择器，标签添加 id = “id 名”

同一个 id 名再一个页面只能用一次

通配符选择器

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

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

<!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>
          /* 标签选择器 */
          p {
              color: red;
          }
          /* 类选择器 */
          .class {
              color: green;
          }
          /* id 选择器 */
          #p1 {
              color: yellow;
          }
          * {
              color: blueviolet;
          }
      </style>
  </head>
  <body>
      <p>标签选择器的使用1</p>
      <p class="class">标签选择器的使用2</p>
      <p id="p1">标签选择器的使用2</p>
      <div>测试通配符选择器</div>
  </body>
</html>

文字控制属性

通过文字控制器，我们可以让界面中的文字更加的美观

这里列出常用的控制字体的 CSS 属性：

描述属性
字体大小font-size
字体粗细font-weight
字体倾斜font-style
行高line-height
字体族font-family
字体复合属性font
文本缩进text-indent
文本对齐text-align
修饰线text-decoration
颜色color

字体大小

  • 属性名：font-size
  • 属性值：常用的为 px
<!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>
          p {
              /* 谷歌浏览器默认的字体大小为 16px */
              font-size: 30px;
          }
      </style>
  </head>
  <body>
      <p>这是一个文字</p>
      <div>这是一段文字</div>
  </body>
</html>

谷歌浏览器默认的字体大小为 16px
image.png

字体粗细

属性名：font-weight
属性值：

  • 数字（开发使用）

image.png
原本的字体样式就是 400，如果要设置加粗的话可以设置为 700，注意不需要加 px。

  • 关键字

image.png

字体倾斜

属性名：font-style
属性值：

  • 正常 nomal
  • 倾斜 italic

行高

作用：设置多行文本之间的间距

属性名：line-height
属性值

  • 数字 + px
  • 只写数字（当前标签的 font-size 属性值的倍数）

image.png
行高包括上线间距和文本高度， 从一行文字的上方到下一行文字的上方就是一个行高

让文件实现垂直居中

使得行高和盒子的高度一样

字体组

属性名：font-family
属性值：字体名
可以书写多个字体名，中间用逗号隔开，浏览器会从左到右依次查找，找到哪一种就生成哪种字体。
image.png

font 复合属性

使用场景：设置网页文字的公共样式

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性之间用空格隔开
font 是否倾斜 是否加粗 字号 / 行高 字体（必须按顺序书写）
注意：字号和字体必须书写，否则 font 属性不生效

<!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>
        p {
            font: italic 700 200px / 2 楷体;
        }
    </style>
</head>
<body>
    <p>这是一段文字</p>
</body>
</html>

文本缩进

属性名：text-indent
属性值：

  • 数字 + px
  • 数字 + em（推荐：1em 就是当前标签字号的大小）
<!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 {
            background-color: aquamarine;
            width: 600px;
        }
        p {
            font-size: 100px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <p>
            这是一段文字
        </p>
    </div>
</body>
</html>

文本对齐方式

作用：控制内容的水平对齐放hi

属性名：text-align
属性值：
image.png
图片居中也和这种方式相同，text-align 本质是控制内容的对齐方式，不只是文本内容，要设置给内容的父级

<!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>
        h1 {
            background-color: aquamarine;
            text-align: center;
            font-size: 100px;
        }
        div{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>这是一段文字</h1>
    <div>
        <img src="../DAY1/jpg/Redis.jpg" alt="一个图片">
    </div>
</body>
</html>

文字的修饰线

属性名：text-decoration
属性值：image.png，红线标注的是常用的属性。

文字的颜色

属性名：color
属性值：
image.png
在实际的开发工作中，使用后面两种比较多。

调试工具

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

打开调试工具：鼠标右键选择检查或者直接按 F12
使用调试工具

复合选择器

作用： 由两个或者多个基础的选择器，通过不同的方式组合而成，更准确更高效的找到标签

后代选择器

写法：父选择器 子选择器（CSS 属性）富子选择器之间用空格隔开
选择的是父选择器中的所有标签，如下面的代码，后代中所有的 span 都被选中，不管是不是直接的子代

<!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 span {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>你好</span>
        <div>
            <span>你好</span>
        </div>
    </div>
</body>
</html>

子代选择器

如果只想仅仅选择子代的 span 就可以使用子代选择器，这样与父类间接的子类就不会被选择
父选择器 > 子选择器

<!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 span {
              color: red;
          } */
          /* 子代选择器 */
          div > span {
              color: red;
          }
      </style>
  </head>
  <body>
      <div>
          <span>你好</span>
          <p>
              <span>你好</span>
          </p>
      </div>
  </body>
</html>

并集选择器

多组标签有相同的样式

选择器写法：选择器1, 选择器2, 选择器N

<!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 span {
            color: red;
        } */
        /* 子代选择器 */
        /* div > span {
            color: red;
        } */
        span,
        p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>你好</span>
        <p>你好呀</p>
    </div>
</body>
</html>

使用,来分割两个标签，不同的标签之间敲一个回车。

交集选择器（了解）

同时符合多个条件的元素

选择器1选择器2
两个选择器中间连这写，不需要符号，注意遇到标签选择器的时候要放到最前面

伪类选择器

伪类表示元素的状态，选中元素的某个状态来设置样式，比如我们看到网易新闻的界面，当鼠标悬停在某个超链接的时候就可以给它变换颜色来告诉用户自己点击会进入哪条新闻。

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

<!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>
        a {
            text-decoration: none;
            font-size: 10px;
        }

        a:hover {
            text-decoration: underline;
            color: blue;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <a href="http://baidu.com" target="_self">跳转到百度</a>
</body>
</html>

比如上面的代码，默认情况下显示的是绿色，当鼠标悬停的时候就显示下划线加上蓝色
image.pngimage.png

超链接（拓展）

超链接一共有四个状态
image.png
如果需要设置多个效果，需要按照 LVHA 的顺序，即上面哪个表格的顺序，否则可能不生效，这个访问过的状态在 target 为 _blank 是不生效的。

CSS 特性

CSS 有三个特性：继承性、层叠性、优先级

继承性

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

在实际的应用中，我们一般将文字的属性写在 body 标签里面，其他需要额外设置的再去设置即可，标签有自己的样式就不会在继承父级的文字属性

<!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: normal 700 20px/50px 宋体;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
    <div>这是一段文字</div>
</body>
</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;
        }
        div {
            color: blue;
        }
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

优先级

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

这个选择器的覆盖范围越广，它的优先级就越低

  1. !important ：是一个提权功能，可以加到属性上，看下面示例代码，实际开发中慎用
  2. 行内样式
  3. id 选择器
  4. 类选择器
  5. 标签选择器
  6. 通配符选择器

从上到下优先级逐渐降低

<!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 {
          /* 添加 !important */
            color: red !important;
        }
        #a1 {
            color: green;
        }
    </style>
</head>

<body>
    <div class="div" id="a1">这是一段文字</div>
</body>
</html>
叠加计算规则

叠加计算：如果是复合选择器，需要权重叠加计算
公式（每一级之间不存在仅为）
（行内样式，id 选择器，类选择器，标签选择器），计算这几个的个数总和。
规则：
从左到右依次比较选个数，同一级个数多的优先级高，如果个数相同， 就向后比较
!important 的权重是最高的
继承的权重是最低的

Emmet 写法

Emmet 代码的简写方式，输入简写 VSCode 会自动生成对应的代码

image.png
div 比较特殊带类名可以直接 .类名来简写。

  • CSS：大多数 CSS 的简写方式为单词的首字母，和代码提示类似。

背景属性

需要设置更好看的网页效果，仅仅有背景色是不够的，我们可以通过设置背景图使我们的网页更有特色

image.png

背景图

网页中出现了装饰性的图片可以使用背景实现

属性名：background-image
属性值：url（）
背景图默认是平铺的效果，即如果图片比盒子要小的话，就会重复防止图片直到铺满为止

<!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: 1000px;
            height: 1000px;
            line-height: 1000px;
            background-image: url("../DAY1/jpg/Redis.jpg");
        }
    </style>
</head>
<body>
    <div>
        这是一段带背景图的文字
    </div>
</body>
</html>

背景图位置

属性名：background-position
属性值：水平方向位置 垂直方向位置

  • 关键字
关键字位置
left左侧
right右侧
center居中
top顶部
bottom底部
  • 坐标（数字 + 像素，正负都可以）

水平：正数向右，负数向左
垂直：正数向下，负数向上
提示：

  • 关键字取值的写法，可以颠倒顺序，比如我们习惯写右上方，但是上右方其实也是相同的位置
  • 如果只写一个关键字的话，另一个方向默认是居中的，数字只写一个值表示水平方向，竖直方向是居中的

背景图缩放

background-size 是CSS属性之一，用于控制背景图像的大小和缩放方式。它允许你调整背景图像的尺寸以适应元素的大小或达到特定的视觉效果。
长度

  • 可以使用像素（px）、百分比（%）、视口宽度单位（vw）、视口高度单位（vh）等指定具体的尺寸。

关键词

  • auto：默认值，浏览器根据背景图像的实际尺寸自动调整。
  • cover：缩放图像，保持图像比例，使其完全覆盖背景区域，可能会裁剪图像。
  • contain：缩放图像，保持图像比例，使整个图像都可以完整地显示在背景区域内，可能会留有空白。

背景图复合属性

属性名：background
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 （使用空格隔开属性值，不区分顺序）
背景图固定一般很少出现

显示模式

显示模式（Display Modes）是CSS中用于控制元素如何在文档布局中展示的属性。这些模式定义了元素的渲染方式、占据空间的方式以及如何与其他元素交互。

常见的显示模式

块级元素（Block）：

  1. 默认情况下，块级元素会独占一行，会在前后添加换行符
  2. 通过 display: block; 可以显式地设置元素为块级。

行内元素（Inline）：

  1. 行内元素不会独占一行，会在同一行上排列。
  2. 通过 display: inline; 可以显式地设置元素为行内。

内联块级元素（Inline-Block）：
1. 常见的内联块级元素包括 、 等。
2. 类似于行内元素，但可以设置宽度、高度等属性，且会独占一行。
3. 通过 display: inline-block; 可以显式地设置元素为内联块级。

显示模式的转化

display: none;

将元素设置为 display: none; 可以隐藏该元素，使其在页面中不可见且不占据空间。
与 visibility: hidden; 不同，display: none; 完全将元素从渲染树中移除，而不仅仅是使其不可见。
display: block;、display: inline;、display: inline-block; 转换：

修改 display 属性

可以通过修改 display 属性，将一个元素从一个显示模式转换为另一个。
例如，将一个块级元素转换为行内元素：display: inline; 或 display: inline-block;。
display: flex; 和 display: grid;：
这些是新的布局模式，分别用于创建弹性布局和网格布局。
display: flex; 用于创建弹性盒子，让元素更容易地进行灵活布局。
display: grid; 用于创建网格布局，更容易地在二维空间中对元素进行布局。
显示模式的转化能够让开发者更灵活地控制元素的表现形式和布局方式，使网页设计更加丰富和适应不同的需求。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/214691.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

flutter使用动态路由传参的最小案例

flutter使用动态路由传参的最小案例

flutter中使用动态路由传递参数的封装案例&#xff0c;子组件页面只需要接收arguments参数即可&#xff0c;参数是一个map&#xff0c;里面包含有所需要的参数&#xff0c;类似于json。在MaterialApp中配置onGenerateRoute&#xff0c;然后动态判断传递参数&#xff1a; route…
阅读更多...
MobaXterm连接相关

MobaXterm连接相关

其实最终解决的方法&#xff0c;还是&#xff0c;因为要远程连接的是个局域网ip&#xff0c;我所在的ip和要连接的这个不在同一个局域网内&#xff0c;需要实验室搭的VPN才行。 甚至&#xff0c;我连防火墙都没关&#xff0c;也可以连接 至于修改密码&#xff0c;passwd&#…
阅读更多...
猜数字赢金币

猜数字赢金币

充值金币后开始游戏&#xff0c;猜中奖励10金币退出&#xff0c;不中扣除1金币继续。 (笔记模板由python脚本于2023年12月03日 21:52:23创建&#xff0c;本篇笔记适合熟悉程序函数式编程&#xff0c;熟练掌握基本数据类型的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&…
阅读更多...
RocketMQ-RocketMQ集群实践

RocketMQ-RocketMQ集群实践

搭建RocketMQ可视化管理服务 下载可视化客户端源码下载 | RocketMQ 这里只提供了源码&#xff0c;并没有提供直接运行的jar包。将源码下载下来后&#xff0c;需要解压并进入对应的目录&#xff0c;使用maven进行编译。(需要提前安装maven客户端) mvn clean package -Dmaven.t…
阅读更多...
项目实战一-性能测试筑基

项目实战一-性能测试筑基

这里写目录标题 一、为什么程序会出现性能问题、性能问题是怎么出现的&#xff1f;二、功能测试和性能测试的区别是什么&#xff1f;三、核心性能指标1、用户角度核心a、响应时间&#xff1a;b、并发量 2、成本角度3、运维角度面试题、并发量和吞吐量得区别&#xff1f;a、吞吐…
阅读更多...
一些后端测试的东西

一些后端测试的东西

后端测试都测试些什么 接口测试最小单元测试联调测试 接口测试 接口测试要素 可重复性 异常覆盖 环境一致 如何进行方便的接口测试 测试工具&#xff1a; idea-httpRequest &#xff0c; apifox , postman, jmeter 如何使用idea进行高效的接口测试 编写接口 启动项目直接…
阅读更多...
AD生产BOM表时如何隐藏不需要的器件记录

AD生产BOM表时如何隐藏不需要的器件记录

在完成图纸设计号通常需要生产BOM表&#xff0c;以便采购等&#xff0c;如果不做一些操作&#xff0c;往往输出的BOM表中包含一些非需要采购的器件&#xff0c;如下图 这时就需要对原理图或者PCB图做一些处理&#xff0c;以原理图为例&#xff0c;在需要屏蔽的器件上双击&#…
阅读更多...
【C语言】扫雷小游戏初学者版

【C语言】扫雷小游戏初学者版

成功的秘诀就是每天都比别人多努力一点。 今天给大家带来一款非常经典的小游戏——扫雷的实现和讲解 这里是目录 前言整体框架1.打印菜单2.创建二维数组3.初始化棋盘4.打印棋盘5.布置棋盘中的雷6.排查雷和统计雷总体代码test.cgame.cgame.h 进阶&#xff08;递归展开&#xff0…
阅读更多...
力扣572：另一棵树的子树

力扣572：另一棵树的子树

力扣572&#xff1a;另一棵树的子树 给你两棵二叉树 root 和 subRoot 。检验 root 中是否包含和 subRoot 具有相同结构和节点值的子树。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 二叉树 tree 的一棵子树包括 tree 的某个节点和这个节点的所…
阅读更多...
SpringBootAdmin

SpringBootAdmin

SpringBootAdmin 文章目录 SpringBootAdmin创建SpringBootAdmin服务端创建SpringBootAdmin客户端启动应用 总结 github地址 https://github.com/codecentric/spring-boot-admin 可以查到所有的版本号 创建SpringBootAdmin服务端 创建springBoot项目的时候&#xff0c;在ops选项…
阅读更多...
【Vue】Vue CLI 脚手架（Vue Command Line Interface）安装教程（通过npm）

【Vue】Vue CLI 脚手架（Vue Command Line Interface）安装教程（通过npm）

前言 Vue CLI&#xff08;Vue Command Line Interface&#xff09;是一个基于Vue.js的官方脚手架工具&#xff0c;用于快速搭建和管理Vue.js项目。它提供了一套完整的开发工具和配置&#xff0c;包括项目初始化、开发服务器、热重载、构建和打包等功能。 Vue CLI使用了Webpac…
阅读更多...
使用PCSS实现的实时阴影效果

使用PCSS实现的实时阴影效果

PCSS的技术可以使得阴影呈现出近硬远软的效果&#xff0c;并且能够实时实现。 其核心理念是通过模拟光源的面积来产生更自然、更柔和的阴影边缘。 具体步骤&#xff1a; 1、生成shadowmap 2、在进行阴影的比较时候进行平均&#xff0c;并非之前的shadow map 或者之后完全的阴影…
阅读更多...
laraval6.0 GatewayWorker 交互通信

laraval6.0 GatewayWorker 交互通信

laravel 6.0 GatewayWorker 通讯 开发前准备下载 GatewayWorker 及操作方式前端demo测试效果项目中安装GatewayClient 开发前准备 GatewayClient 官网&#xff1a;https://www.workerman.net/ 当前使用的是宝塔操作 下载 GatewayWorker 及操作方式 前端demo 测试效果 项目中安…
阅读更多...
unordered_map与unordered_set的实现（含迭代器）

unordered_map与unordered_set的实现（含迭代器）

unordered_map与unordered_set的实现 文章目录 unordered_map与unordered_set的实现前言一、问题一HashTable.h 二、问题二&问题三1.封装时如何取出key2.不同类型key如何建立对应关系 三、问题四&问题五问题四问题五 四、实现代码MyUnorderedSet.hMyUnorderedMap.hHash…
阅读更多...
文案二次创作软件，文案二次创作的软件

文案二次创作软件，文案二次创作的软件

文案创作成为品牌传播和营销不可或缺的一环。对于许多从业者而言&#xff0c;文案创作常常是一项既耗时又耗力的工作。为了解决这一文案创作的难题&#xff0c;市场上涌现出了众多的智能文案生成工具。我们通过对这些工具的介绍和分析&#xff0c;希望能够为你提供一些在文案创…
阅读更多...
Kafka 架构深度解析：生产者（Producer）和消费者（Consumer）

Kafka 架构深度解析：生产者（Producer）和消费者（Consumer）

Apache Kafka 作为分布式流处理平台&#xff0c;其架构中的生产者和消费者是核心组件&#xff0c;负责实现高效的消息生产和消费。本文将深入剖析 Kafka 架构中生产者和消费者的工作原理、核心概念以及高级功能。 Kafka 生产者&#xff08;Producer&#xff09; 1 发送消息到…
阅读更多...
【C++】异常处理 ⑦ ( 异常类的继承层次结构 | 抛出 / 捕获 多个类型异常对象 | 抛出子类异常对象 / 捕获并处理 父类异常对象 )

【C++】异常处理 ⑦ ( 异常类的继承层次结构 | 抛出 / 捕获 多个类型异常对象 | 抛出子类异常对象 / 捕获并处理 父类异常对象 )

文章目录 一、抛出 / 捕获 多个类型异常对象1、抛出 / 捕获 多个类型异常对象2、操作弊端3、完整代码示例 二、异常类的继承层次结构1、抛出子类异常对象 / 捕获并处理 父类异常对象2、完整代码示例 - 抛出子类异常对象 / 捕获并处理 父类异常对象 自定义的 异常类 , 可能存在 …
阅读更多...
prometheus部署及与grafana结合应用

prometheus部署及与grafana结合应用

一、prometheus 介绍 prometheus server 是 Prometheus组件中的核心部分&#xff0c;负责实现对监控数据的获取&#xff0c;存储以及查询。它会定期从静态配置的监控目标或者基于服务发现自动配置的自标中进行拉取数据&#xff0c;当新拉取到的数据大于配置的内存缓存区时&…
阅读更多...
Python 入门

Python 入门

目录 编译性语言 解释型语言 Python语言介绍 Python安装 配置环境变量 Pycharm安装 Pycharm基本使用 编译性语言 解释型语言 计算机是不能理解高级语言的&#xff0c;更不能直接执行高级语言&#xff0c;它只能直接理解机器语言&#xff0c;所以使用任何高级语言编写的程…
阅读更多...
vue3项目脚手架如何使用swiper， ‘vue-awesome-swiper‘报错解决（简单示例）

vue3项目脚手架如何使用swiper， ‘vue-awesome-swiper‘报错解决（简单示例）

目录 前言 使用方法 效果图 1.下载swiper 2. 写入需要的页面 3.在对应页面引入组件 4.推荐页完整代码 前言 Vue3和Vue2在使用swiper时是有差别的&#xff0c;Vue3引入swiper需要注意Vu3的版本和swiper的版本&#xff0c;如果不匹配通常会报错 如下&#xff1a;当引用版本过…
阅读更多...
最新文章

Copyright @ 2022~2023