当前位置：首页 > news >正文

【CSS】快速入门笔记

news 2025/8/28 0:13:38

视频链接：https://www.bilibili.com/video/BV1mS4y1Z7Ga/?spm_id_from=333.999.0.0&vd_source=1ad00d913eae8281cbadad6ae66fb06c

文章目录

- 一、CSS语法
- - 1.结构
  - 2.样式类型
  - - 1）内联样式 Inline Style
    - 2）内部样式 Internal Style
    - 3）外部样式 External Style
- 二、选择器（Selector）
- - 1.类型
  - - 1）类型选择器
    - 2）类选择器
    - 3）id选择器
    - 4）属性选择器
    - 5）通用选择器
  - 2.使用
  - - 1）组合使用
    - 2）优先级（Priority）
- 三、盒子模型（Box Model）
- - 1.边框 border
  - 2.内边距padding
  - 3.外边距margin

一、CSS语法

1.结构

在这里插入图片描述

2.样式类型

1）内联样式 Inline Style

特点：直接写到html元素上，没有选择器，直接就是声明，仅对当前的html元素有效

<p style="color:red">我是一段文字</p>

在这里插入图片描述

2）内部样式 Internal Style

特点：写在html文档的head标签中，使用style标签，包含一个或多个css规则

<head><meta charset="UTF-8"><style>.box{width:600px;height:1200px;}</style>
</head>

在这里插入图片描述

3）外部样式 External Style

特点：先在外部存储独立的css文件，通过把Link标签放在head标签内，指定其href属性，来指定外部css属性,使用最多

<!--主体代码-->
<html><head><meta charset="UTF-8"><title>我是标题</title><link rel="stylesheet" href="mystyle.css"></head><body>......</body>
</html>

/*css文件mystyle.css*/
h1{width:600px;height:1200px;margin:auto;
}

在这里插入图片描述

二、选择器（Selector）

描述：用于在css语句或文档中，选择html元素。

1.类型

1）类型选择器

特点：直接写元素标签的名称，例如上面的h1，可用于选择页面上所有的该类型标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2></body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}

在这里插入图片描述

2）类选择器

特点：点.+类名，类名可自定义，同时html对应元素中，有同名的class属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p></body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}

在这里插入图片描述

3）id选择器

特点：#加id名称，同时html对应元素中，有同名的id属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p></body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/}
#my_pid{color: orange;/*类选择器*/
}

在这里插入图片描述

4）属性选择器

特点1：不常用，标签[属性]，选择所有该类型标签并包含该属性的所有元素

<!DOCTYPE html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a></body>
</html>

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}

在这里插入图片描述
特点2：属性也可指定值，更精确选择

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}

在这里插入图片描述

5）通用选择器

特点：星号*，代表所有元素

/*css文件    mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}

在这里插入图片描述

2.使用

1）组合使用

组合1：以上选择器直接连写，需要满足所有同条件后生效；

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a></body>
</html>


h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}
h1.my_p{font-style: oblique;/*组合选择器，字体斜体*/
}

在这里插入图片描述
组合2：以上选择器用逗号连接，则对列出的选择器都生效


h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}
h1.my_p{font-style: oblique;/*组合选择器，字体斜体*/
}
h1,h2{font-size: 20px;/*组合选择器，字体大写变成20px*/
}

在这里插入图片描述
组合3：父子组合，需要一个父标签用空格连接一个子标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><div><h1>我是div里的h1标签 </h1></div>		</body>
</html>

h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器，更改字体为楷体*/
}
h1.my_p{font-style: oblique;/*组合选择器，字体斜体*/
}
h1,h2{font-size: 20px;/*组合选择器，字体大写变成20px*/
}
div h1{text-decoration: underline;/*组合选择器，字体加下划线*/
}

在这里插入图片描述

2）优先级（Priority）

a.相同的规则按照加载顺序，写在后面的优先级更高

h1{color: red;/*字体红色*/
}
h1{color: green;/*字体绿色*/
}

在这里插入图片描述
这里先定义了红色，后定义了绿色，以绿色为准

b.继承下来的样式优先级永远低于直接指定的样式
案例1：

body{color: skyblue;/*字体天空蓝色*/
}
h1{color: green;/*字体绿色*/
}

h1本来应该继承body的天空蓝，但它自己定义了绿色，自己指定的优先级高于继承，所以最终显示绿色
在这里插入图片描述

案例2：

h1{color: green;/*字体绿色*/
}
div h1{color: blue;/*字体蓝色*/
}

后面的标签对同一属性有自己的直接指定的时候就不再继承前面统一定义过的属性
在这里插入图片描述

c. 内联样式优先级最高，!important是个例外
内部样式和外部样式的优先级没有太大区别，主要是语句顺序导致的加载顺序，但内联样式的优先级最高

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试优先级.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1 style="color:red;">我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><div><h1>我是div里的h1标签 </h1></div></body>
</html>

在之前的基础上，单独给h2添加了内联样式，最后呈现的是内联样式指定的颜色
在这里插入图片描述
加了important,可以打破内联样式的优先级,颜色又被扳到外部样式的绿色

body{color: skyblue;/*字体蓝色*/
}
h1{color: green!important;/*字体绿色,并且!important*/
}

在这里插入图片描述

d. 类型选择器<类选择器<ID选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试优先级.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1 style="color:red;">我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid" class="my_p">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><div><h1>我是div里的h1标签 </h1></div></body>
</html>

.my_p{color:peru;/*字体褐色*/
}
p{color: green;/*字体绿色*/
}

类选择器高于类型选择器，与加载顺序无关
在这里插入图片描述

#my_pid{color: coral;/*字体珊瑚红色*/
}
.my_p{color:peru;/*字体褐色*/
}
p{color: green;/*字体绿色*/
}

在这里插入图片描述
id选择器的加载顺序最高

三、盒子模型（Box Model）

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型</title><link rel="stylesheet" href="myboxstyle.css"></head><body><div class="box">div内容</div></body>
</html>

.box{width: 100px;height: 100px;background-color: red;
}

在这里插入图片描述

1.边框 border

.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/
}

出现了3px的实线蓝色边框
在这里插入图片描述

2.内边距padding

.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/padding: 20px;/*内边距20px*/
}

文字和边框产生了距离，同时外框也变大
在这里插入图片描述

.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/padding: 20px;/*内边距20px*/padding-left: 5px;padding-top: 10px;padding-right: 15px;padding-bottom: 25px;padding: 10px 15px 25px 5px;/*简洁写法：上右下左*/
}

也可单独指定上下左右的内边距
在这里插入图片描述
右击-审查元素

3.外边距margin

.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/padding: 20px;/*内边距20px*/padding-left: 5px;padding-top: 10px;padding-right: 15px;padding-bottom: 25px;padding: 10px 15px 25px 5px;/*简洁写法：上右下左*/margin: 25px;margin-top: 20px;margin-bottom: 30px;margin-left: 15px;margin-right: 10px;margin: 20px 10px 30px 15px;/*简洁写法：上右下左*/}
}

外框和页面产生了距离
在这里插入图片描述

在这里插入图片描述

【CSS】快速入门笔记

视频链接：https://www.bilibili.com/video/BV1mS4y1Z7Ga/?spm_id_from333.999.0.0&vd_source1ad00d913eae8281cbadad6ae66fb06c 文章目录一、CSS语法1.结构2.样式类型1）内联样式 Inline Style2）内部样式 Internal Style3）外部…...

编程日记 2023/3/12 0:16:20

第161篇笔记-去中心化的含义

本文主要内容来自Vitalik Buterin的文章。“去中心化”这个词是在加密经济学领域用得最多的一个词，通常也作为辨别区块链的依据。然而，这个词也可能是被定义得最不恰当的一个词。数千小时的研究和价值数十亿美元哈希算力的投入都旨在实现去中心化&#x…...

编程日记 2023/3/12 0:15:17

「计算机组成原理」数据的表示和运算（二）

文章目录五、奇偶校验码六、算术逻辑单元ALU6.1 电路的基本原理6.2 加法器的设计6.2.1 一位全加器6.2.2 串行加法器6.2.3 串行进位的并行加法器6.2.4 并行进位的并行加法器七、补码加减运算器八、标志位的生成九、定点数的移位运算9.1 算数移位9.2 逻辑移位9.3 循环移位五、奇偶…...

编程日记 2023/3/12 0:14:15

建立自己的博客

环境安装： w10系统安装第一步：安装git Git 官网: https://git-scm.com/ 第二步：安装Node.js Node.js官网：https://nodejs.org/zh-cn/ 使用cmd检测： node -v 第三步：安装Hexo Hexo官网：htt…...

编程日记 2023/3/12 0:13:10

Docker 安装mysql Mac 环境下

已安装桌面端 Docker （Mac安装Docker） 安装方式一打开链接 https://www.docker.com/products/docker-desktop 选择平台下载安装方式二安装homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m…...

编程日记 2023/3/12 0:12:05

《C++代码分析》第三回：类成员函数覆盖父类函数的调用（分析this指针的变化）

一、前言在C的学习中我们知道，子类是可以覆盖父类的方法，这里我们探讨一下子类方法调用父类方法时this指针时如何变化的。二、示例代码 #include "windows.h" #include "windef.h" #include <iostream> #include <tch…...

编程日记 2023/3/12 0:11:03

Altium designer--软件简介及安装教程（Altium designer16）

一、软件介绍（完整安装包资源见文末链接，含破解license） Altium Designer 是一款简单易用、原生3D设计增强的一体化设计环境，结合了原理图、ECAD库、规则和限制条件、BoM、供应链管理、ECO流程和世界一流的PCB设计工具。通过原理…...

编程日记 2023/3/12 0:10:00

Windows系统下基于开源软件的多物理场仿真

Windows系统下基于开源软件的多物理场仿真实践技术应用随着计算机技术的发展，计算机仿真技术日益成为继实验和理论之后的第三种重要研究和设计手段。真实世界中遇到的问题往往是固体力学，流体力学，热，电磁等多种现象耦合而成&…...

编程日记 2023/3/12 0:08:58

【STL】list剖析及模拟实现

✍作者：阿润菜菜 📖专栏：C 初识list 1. list基本概况 list是可以在常数范围内在任意位置进行插入和删除的序列式容器，并且该容器可以前后双向迭代。list的底层是双向链表结构，双向链表中每个元素存储在互不相关的独立…...

编程日记 2023/3/12 0:07:54

Go打包附件内容到执行文件

前言如果我们的应用在启动的时候需要对数据库进行初始化(比如建表等), 可以通过读取.sql文件内容直接执行. 但是, 这样会带出一个问题: 在发送可执行文件的时候, 需要连带着附件文件, 并且相对路径还不能出错. 这样太麻烦了有时我们并不希望附件的内容被使用者看到处于种种…...

编程日记 2023/3/12 0:06:51

Spring的配置属性

介绍以前都是用XML来设置属性值，SpringBoot的自动配置可以简化Spring应用的开发。配置属性只是配置Spring应用上下文中bean的属性而已，可以通过多个源来配置，包括JVM系统属性、环境变量等。 Spring中有两种不同(但相关)的配置 bean装配&…...

编程日记 2023/3/12 0:05:49

132.《render-props, Hoc，自定义hooks 详解》

文章目录render-props 模式props 方式children 方式(推荐)Hoc（高阶组件）使用步骤示例props 丢失解决方案自定义 hook1.只执行一次2.防抖hook高阶组件与自定义hook有什么区别相同点不同点React 中代码逻辑复用有三种方式，render-props, Hoc&am…...

编程日记 2023/3/12 0:04:47

通过Session共享数据验证码进行用户登录

通过Session共享数据验证码进行用户登录需求： 访问带有验证码的登录页面login.jsp。用户输入用户名，密码以及验证码。 ①。如果用户名和密码输入有误，跳转登陆页面，提示：用户名或密码错误。 ②。如果验证码输入有误…...

编程日记 2023/3/12 0:03:45

C++STL详解（六）——stack和queue

文章目录空间适配器stackstack的定义方式stack的使用stack的模拟实现queuequeue的定义方式queue的使用queue的模拟实现空间适配器适配器是一种设计模式（设计模式是一套被反复使用的，多数人知晓的，经过分类编目的，代码设计经验的…...

编程日记 2023/3/12 0:02:43

javaEE 初阶 — CSS 的基本语法与引入方式

文章目录1. 基本语法规范2. 三种引入方式1. 基本语法规范 CSS 的基本语法规范是由选择器和若干个声明组成的。选择器选中一个元素之后，这些属性都是针对于这个元素展开的。先来看一个没有 CSS 的效果。 <body><p>这是一个段落</p> </bo…...

编程日记 2023/3/12 0:01:41

QEMU启动ARM32 Linux内核

目录前言前置知识ARM Versatile Express开发板简介ARM处理器家族简介安装qemu-system-arm安装交叉编译工具交叉编译ARM32 Linux内核交叉编译ARM32 Busybox使用busybox制作initramfs使用QEMU启动ARM32 Linux内核模拟vexpress-a9开发板模拟vexpress-a15开发板参考前言本文介绍采…...

编程日记 2023/3/12 0:00:38

than的用法合集

首先需要了解一下than的词性，其有两个词性，一个是介词，一个是连词。介词后面一定要接上名词性的词语，比如 i am taller then him 我比我的老师高连词就比较自由，一般用来连接两个句子；但是使用than连词词…...

编程日记 2023/3/11 23:59:35

Unet 基于TCGA颅脑肿瘤MRI分割(高阶API分割模型)

目录 1. 介绍 2. dice 指标 3. resnet34 作为 backbone 的分割 4. deeplabv3 图像分割 4.1 问题 4.2 训练 4.3 预测 5. MAnet 图像分割...

编程日记 2023/3/11 23:58:31

[NIPS 2017] Improved Training of Wasserstein GANs (WGAN-GP)

Contents IntroductionDifficulties with weight constraintsCapacity underuseExploding and vanishing gradientsGradient penaltyReferencesIntroduction WGAN 增加了 GAN 模型训练的稳定性，但有时仍然会有生成质量不高或难以收敛的问题。作者发现上述问题经常是由 WGAN 中…...

编程日记 2023/3/11 23:57:29

力扣-每天的领导和合伙人

大家好，我是空空star，本篇带大家了解一道简单的力扣sql练习题。文章目录前言一、题目：1693. 每天的领导和合伙人二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.…...

编程日记 2023/3/11 23:56:26

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/8/22 4:42:14

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/23 3:55:49

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...

编程新知 2025/8/22 10:12:19

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/8/4 11:36:24

OpenLayers 分屏对比(地图联动)

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/8/23 21:44:50

中医有效性探讨

文章目录西医是如何发展到以生物化学为药理基础的现代医学？传统医学奠基期（远古 - 17 世纪）近代医学转型期（17 世纪 - 19 世纪末）现代医学成熟期（20世纪至今） 中医的源远流长和一脉相承远古至…...

编程新知 2025/8/22 4:24:08

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/8/27 16:07:00

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤通用： 方法一：使用 Homebrew 安装 Git（推荐） 步骤如下：打开终端（Terminal.app） 1.安装 Homebrew…...

编程新知 2025/8/1 2:58:59

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一：使用Read()读取文件2.3、方式二：bufio读取文件2.4、方式三：os.ReadFile读取2.5、写…...

编程新知 2025/8/1 17:08:07

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

文章目录

一、CSS语法

1.结构

2.样式类型

1）内联样式 Inline Style

2）内部样式 Internal Style

3）外部样式 External Style

二、选择器（Selector）

1.类型

1）类型选择器

2）类选择器

3）id选择器

4）属性选择器

5）通用选择器

2.使用

1）组合使用

2）优先级（Priority）

三、盒子模型（Box Model）

1.边框 border

2.内边距padding

3.外边距margin

相关文章：