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

【CSS】快速入门笔记

news 2026/2/9 15:20:00

视频链接：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

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...

编程新知 2025/10/6 4:03:40

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2026/2/4 2:08:30

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

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

编程新知 2026/1/29 11:40:13

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...

编程新知 2025/9/3 19:14:38

dify打造数据可视化图表

一、概述在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

AI，如何重构理解、匹配与决策？

AI 时代，我们如何理解消费？ 作者｜王彬封面｜Unplash 人们通过信息理解世界。曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。但 AI 时代的来…...

编程新知 2026/1/30 2:33:11

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...

编程新知 2026/1/24 14:43:35

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南：从入门到实战一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

MySQL 主从同步异常处理

阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示&#xff…...

编程新知 2025/11/7 10:02:17

文章目录

一、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

相关文章：