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

CSS语法介绍

news 2026/5/25 15:15:47

文章目录

前言
一、CSS引入方式
- 1.行内操作
- 2.内部操作
- 3.外部操作
二、常用选择器
- 1.标签选择器
- 2.类选择器
- 3.id选择器
- 4.群组选择器
- 5.后代选择器
三、字体常用设置
- 1.字体类型
- 2.字体大小
- 3.字体样式
- 4.字体粗细
四、div盒子模型
- 1.盒子边框
- 2.外边距
- 3.内边距
- 4.浮动
综合实战案例

前言

以盖房子比喻我们的网页，HTML就是房屋主体，CSS就是给房屋装修，JS就是给房屋买家具，今天介绍CSS语法部分。

一、CSS引入方式

1.行内操作

CSS引入方式的第一种是行内操作，首先我们先写一组HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title>
</head>
<body><p>我是P标签 -- 1</p>
<p>我是P标签 -- 2</p>
</body>
</html>

运行结果如下：
在这里插入图片描述

我们会发现字体没有颜色，大小也很单调，接下来给字体加上颜色及修改大小，用到style属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title>
</head>
<body>
<!--1、行内CSS操作-->
<p style="color: red">我是P标签 -- 1</p>
<p style="color: green; font-size: 30px">我是P标签 -- 2</p>
</body>
</html>

代码运行结果如下：
在这里插入图片描述

这时候我们也会发现如果要定义的样式非常多，写在标签内部就很长很乱，代码阅读性很差，接下来会用到第二种CSS引入方式。

2.内部操作

内部操作也叫头部操作，在head里面使用style标签，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title><!--2、头部CSS操作--><style>span {color: purple;font-family: 宋体;}</style>
</head>
<body>
<span>学习：头部CSS操作</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述

假设现在样式标签很多，全部都写在该HTML文件中，也会显得代码很冗长，接下来介绍第三种CSS引入方式。

3.外部操作

外部CSS操作，在外部单独新建一个css文件，名字随便起，比如这里取名为demo.css，然后回到HTML文件中继续写代码，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title><!--3、外部CSS操作--><link rel="stylesheet" href="demo.css">
</head>
<body>
<!--i标签是斜体标签-->
<i>好好学习，天天向上</i>
</body>
</html>

CSS代码如下：
在这里插入图片描述

运行HTML代码后结果如下：
在这里插入图片描述
三种CSS引入方式根据自己喜好选择即可，如果项目非常大，一定是使用外部CSS引入的方式。

二、常用选择器

选择器就是选中标签的方式，分为5种。

1.标签选择器

标签选择器是通过标签名选中标签，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签选择器</title><!--标签选择器通过标签名选中标签--><style>b {color: red;}span {color: green;}</style>
</head>
<body>
<!--b标签是粗体标签-->
<b>我是b标签 -- 1</b> <hr>
<span>我是span标签</span> <hr>
<b>我是b标签 -- 2</b>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.类选择器

类选择器是通过class属性值选中标签，现在有代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器.: class</title><style>p {color: red;}</style>
</head>
<body>
<p>我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p>我是p标签 -- 3</p>
</body>
</html>

运行结果如下：
在这里插入图片描述

假如我现在只想让标签1和3改变颜色，2不变，这时候就要对1和3加上属性class，class类用.点指代，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器.: class</title><style>.p1 {color: red;}</style>
</head>
<body>
<p class="p1">我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p class="p1">我是p标签 -- 3</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
代码做进一步升级：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器.: class</title><style>.p1 {color: red;}</style>
</head>
<body>
<p class="p1">我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p class="p1">我是p标签 -- 3</p>
<span class="p1">我是span -- 3</span>
</body>
</html>

这时候span标签的内容也会变颜色，因为类选择器选中的是同一类，而不管是不是同一种标签，运行结果如下：
在这里插入图片描述

3.id选择器

id选择器用#号来指代，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器 -- #</title><style>#p1 {font-size: 20px;color: red;}</style>
</head>
<body>
<p id="p1">id选择器 -- 1</p>
<p>id选择器 -- 2</p>
<p>id选择器 -- 3</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
这时候我们继续修改代码，为下面的p标签也设置同样的id和属性值，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器 -- #</title><style>#p1 {font-size: 20px;color: red;}</style>
</head>
<body>
<p id="p1">id选择器 -- 1</p>
<p id="p1">id选择器 -- 2</p>
<p>id选择器 -- 3</p>
</body>
</html>

但是里面代码很明显是有错误的，因为id值是唯一的，类似于我们的身份证号码，不能有重复的，而类class是可以有多个重复的，这就是id选择器的特殊之处。

4.群组选择器

群组选择器用,逗号来指代，我们来写一组代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>群组选择器 -- ,</title><style>span {color: red;}p {color: red;}</style>
</head>
<body>
<span>我爱你</span>
<p>好天气</p>
</body>
</html>

这组代码实现的功能就是给span标签和p标签内容都改颜色，虽然可以实现，但是我们会发现代码变的冗长了，如果有多个不同标签，那么会更长，这时候可以使用群组选择器，将代码缩短，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>群组选择器 -- ,</title><style>span, p {color: green;}</style>
</head>
<body>
<span>我爱你</span>
<p>好天气</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

5.后代选择器

我们可以看这样一组代码：

<head><meta charset="UTF-8"><title>后代选择器</title><style>span {color: red;}</style>
</head>
<body>
<p><a href=""><span>学习后代选择器</span></a>
</p>
<span>我是span标签</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述
假如我们只想让a标签里面的span标签改变颜色，这里就要用到后代选择器，当然也可以单独设置id或者class，但是我们用后代选择器来看看怎么改，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器</title><style>p > a > span {color: blue;}</style>
</head>
<body>
<p><a href=""><span>学习后代选择器</span></a>
</p>
<span>我是span标签</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述

三、字体常用设置

1.字体类型

字体类型用font-family属性，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体类型*/font-family: 宋体;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
可以继续改为黑体，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体类型*/font-family: 黑体;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.字体大小

字体大小用属性font-size，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体大小*/font-size: 30px;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

3.字体样式

字体样式使用属性font-style，属性值常用的有italic(斜体)和normal(正常)，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体样式*/font-style: italic;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

4.字体粗细

字体粗细使用font-weight属性，常用属性值就是normal(正常)和bold(粗)，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体粗细*/font-weight: bold;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

四、div盒子模型

盒子模型就是给网页划分不同区域，每个区域有特定的功能，盒子里面的标签如果要转移位置，只需挪动盒子即可，不用一个个标签去挪动，说白了，就是便于管理。

1.盒子边框

盒子模型的标签是div，具体用法代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框</title><style>div {/*盒子宽度width*/width: 200px;/*盒子高度height*/height: 200px;/*盒子边框border*//*border有三个参数：粗细 线的类型 颜色*//*线类型有：实线(solid) 虚线(dashed) 点线(dotted)*/border: 1px solid red;}</style>
</head>
<body>
<div></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

盒子建好之后，我们可以在里面写一些标签内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框</title><style>div {width: 200px;height: 200px;border: 1px solid red;}</style>
</head>
<body>
<div><p>天气真好</p><p>天气真好</p><p>天气真好</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

还可以给盒子添加背景颜色，使用background-color属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框</title><style>div {width: 200px;height: 200px;border: 1px solid red;background-color: orange;}</style>
</head>
<body>
<div></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.外边距

接下来看看外边距，外边距是盒子与盒子之间的边距，以及盒子与浏览器之间的边距，我们先创建两个盒子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;}</style>
</head>
<body>
<div id="d1"></div><div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

div标签是默认从上往下展示，可以看到两个盒子目前是挨在一起，接下来为他们设置边距，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;/*上边距*/margin-top: 50px;/*左边距*/margin-left: 50px;}</style>
</head>
<body>
<div id="d1"></div><div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

接下来很关键的是如何让盒子居中，这里用到margin属性，属性值是auto，意思就是自动根据浏览器大小居中显示，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距</title><style>#d2 {width: 300px;height: 300px;background-color: orange;/*盒子居中*/margin: auto;}</style>
</head>
<body>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

3.内边距

内边距是盒子里面内容与盒子之间的边距，可以先看下面这组代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内边距</title><style>.d1 {width: 300px;height: 300px;border: 2px solid red;}</style>
</head>
<body>
<div class="d1"><p>学习内边距</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

接下来把盒子里面内容上下左右距离调整，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内边距</title><style>.d1 {width: 300px;height: 300px;border: 2px solid red;/*内容距离盒子上边的边距*/padding-top: 50px;/*内容距离盒子左边的边距*/padding-left: 50px;}</style>
</head>
<body>
<div class="d1"><p>学习内边距</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述
这时候我们会注意到盒子整体变大了，这是因为内边距会撑大盒子，以保持除开刚才上边和左边撑开的内边距，盒子整体大小依然是我们设置的尺寸300px。

4.浮动

浮动就是把原有默认的位置进行移动，比如我们上面定义的两个盒子默认是上下挨着展示，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

现在我将下面的盒子位置移动到右边，称为浮动，用到float属性，值为right，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;float: right;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

综合实战案例

实战案例需求：编写注册页面，先看效果图如下：
在这里插入图片描述

附上全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册页面(案例)</title><style>div {width: 300px;height: 320px;border: 1px solid grey;border-radius: 5px;border: 1px solid grey;padding: 10px;margin: auto;}span {border-bottom: 5px solid purple;padding-bottom: 6px;}#a1 {float: right;color: deepskyblue;text-decoration: none;}.A {width: 290px;height: 30px;margin-bottom: 8px;border-radius: 5px;border: 1px solid grey;}.B {width: 190px;height: 30px;margin-bottom: 8px;border-radius: 5px;border: 1px solid grey;}.C {width: 90px;height: 30px;border-radius: 5px;border: 1px solid grey;color: purple;}.D {width: 90px;height: 30px;border-radius: 5px;border: 1px solid grey;background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzhuangjiba.com%2Fd%2Ffile%2Fhelp%2F2018%2F08%2Fcfdefaddb3f47d78f8c66a7de28720aa.png&refer=http%3A%2F%2Fzhuangjiba.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655473640&t=3942417cfe379e590c48a9340d06952b");background-size: 85px 30px;vertical-align: middle;}.E {width: 290px;height: 30px;border-radius: 5px;border: 1px solid grey;color: deepskyblue;}</style>
</head>
<body><div><form action=""><span>请注册</span><a id="a1" href="">立即登录></a><hr><input type="text" placeholder="请输入手机号" class="A"> <br><input type="text" placeholder="请输入短信验证码" class="B"><input type="button" value="发送验证码" class="C"> <br><input type="text" placeholder="请输入用户名"  class="A"> <br><input type="password" placeholder="请输入密码"  class="A"> <br><input type="password" placeholder="请再次输入密码"  class="A"> <br><input type="text" placeholder="请输入图形验证码" class="B"><input type="button" class="D"><br><input type="submit" value="立即注册" class="E"></form>
</div>
</body>
</html>

CSS语法介绍

文章目录前言一、CSS引入方式1.行内操作2.内部操作3.外部操作二、常用选择器1.标签选择器2.类选择器3.id选择器4.群组选择器5.后代选择器三、字体常用设置1.字体类型2.字体大小3.字体样式4.字体粗细四、div盒子模型1.盒子边框2.外边距3.内边距4.浮动综合实战案例前言以…...

编程日记 2024/5/27 2:59:02

Jeecg | 完成配置后，如何启动整个项目？

前端启动步骤： 1. 以管理员身份打开控制台，切换到前端项目目录。 2. 输入 pnpm install 3. 输入 pnpm dev 4. 等待前端成功运行。可以看到此时前端已经成功启动。后端启动步骤： 1. 启动 mysql 服务器。管理员身份打开控制台&#…...

编程日记 2024/5/27 2:58:01

Kubectl 的使用——k8s陈述式资源管理

一、kebuctl简介: kubectl 是官方的CLI命令行工具，用于与 apiserver 进行通信，将用户在命令行输入的命令，组织并转化为 apiserver 能识别的信息，进而实现管理 k8s 各种资源的一种有效途径。对资源的增、删、查操作比较方便&…...

编程日记 2024/5/27 2:57:00

多天线技术

多天线技术可以分为两类：分集技术和空间复用技术。分集技术利用多天线接收或者发射载有同一信息的信号，提高传输的可靠性。分集技术是将瑞利衰落无线信道换成更加稳定的信道。发射端未知CSI时的信道容量发射端已知CSI时的信道容量信道估计&#xff…...

编程日记 2024/5/27 2:55:59

Meta发布Chameleon模型预览，挑战多模态AI前沿

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2024/5/27 2:54:58

声压级越大，STIPA 越好，公共广播就越清晰吗？

在公共广播中，有些朋友经常问到是不是声压越大，广播清晰度就越高，下面我从搜集了一些专业技术资料，供大家参考。一、声压级越大，STIPA 越好吗？ 不完全是。最初，人们认为当声压级达到 60 dBA 以…...

编程日记 2024/5/27 2:52:55

基于springboot+vue的4S店车辆管理系统

开发语言：Java框架：springbootJDK版本：JDK1.8服务器：tomcat7数据库：mysql 5.7（一定要5.7版本）数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包：…...

编程日记 2024/5/27 2:51:54

深入理解 HTTP 缓存

浏览器缓存不是本地存储，要分清。浏览器缓存分为强缓存和协商缓存。本篇文章参考：使用 HTTP 缓存防止不必要的网络请求讲解之前，我画了个简图来解释浏览器从缓存中获取资源的过程。 1. 强缓存强缓存是浏览器缓存机制中的一种，…...

编程日记 2024/5/27 2:50:53

upload-labs 通关方法

目录 Less-1（JS前端验证） Less-2（MIME验证） Less-3（黑名单，特殊过滤） Less-4（黑名单验证，.htaccess） Less-5（黑名单，点空格点绕过…...

编程日记 2024/5/27 2:49:50

5-26 Cpp学习笔记

1、如果子类实现了基类的函数，返回值、参数都相同，就覆盖了基类的函数。 2、使用作用域解析运算符来调用基类的函数。myDinner.Swim(); —— 调用子类的。myDinner.Fish::Swim(); —— 调用基类的(基类是Fish) 3、在子类中使用关键字using解除对Fish::…...

编程日记 2024/5/27 2:48:49

YOLOv8_pose的训练、验证、预测及导出[关键点检测实践篇]

1.关键点数据集划分和配置从上面得到的数据还不能够直接训练，需要按照一定的比例划分训练集和验证集，并按照下面的结构来存放数据，划分代码如下所示，该部分内容和YOLOv8的训练、验证、预测及导出[目标检测实践篇]_yolov8训练测试验证-CSDN博客是重复的，代码如下： …...

编程日记 2024/5/27 2:44:44

架构师必考题--软件系统质量属性

软件系统质量属性 1.质量属性2.质量属性场景描述3.系统架构评估这个知识点是系统架构师必考的题目，也是案例分析题第一题， 有时候会出现在选择题里面，考的分数也是非常高的。 1.质量属性属性说明可用性错误检测/恢复/避免性能资源需求/管理…...

编程日记 2024/5/27 2:43:43

使用AWR对电路进行交流仿真---以整流器仿真为例

使用AWR对电路进行交流仿真—以整流器仿真为例生活不易，喵喵叹气。马上就要上班了，公司的ADS的版权紧缺，主要用的软件都是NI 的AWR，只能趁着现在没事做先学习一下子了，希望不要裁我。本AWR专栏只是学习的小小记录而…...

编程日记 2024/5/27 2:42:42

在UbuntuLinux系统上安装MySQL和使用

前言最近开始计划在Ubuntu上写一个webserver的项目，看到一些比较好的类似的项目使用了MySQL，我就打算先把环境搞好跑一下试试，方便后面更进一步的学习。其实在本机windows上我已经有一个mysql，不过在Unbuntu上安装MySQL 首先…...

编程日记 2024/5/27 2:40:40

React 如何自定义 Hooks

自定义 Hooks React 内部自带了很多 Hooks 例如 useState、useEffect 等等，那么我们为什么还要自定义 Hooks？使用 Hooks 的好处之一就是重用，可以将代码从组件中抽离出来定义为 Hooks，而不用每个组件中重复去写相同的代码。首先是…...

编程日记 2024/5/27 2:39:39

智能家居完结 -- 整体设计

系统框图前情提要: 智能家居1 -- 实现语音模块-CSDN博客智能家居2 -- 实现网络控制模块-CSDN博客智能家居3 - 实现烟雾报警模块-CSDN博客智能家居4 -- 添加接收消息的初步处理-CSDN博客智能家居5 - 实现处理线程-CSDN博客智能家居6 -- 配置 ini文件优化设备添加-CS…...

编程日记 2024/5/27 2:37:37

双指针用法练习题（2024/5/26）

1三数之和给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。注意：答案中不可以包含重复的三元…...

编程日记 2024/5/27 2:33:33

目录写在前面4. Ansible Modules 模块4.1 Ansible常用模块4.1.1 Command模块4.1.2 shell模块4.1.3 scrpit模块4.1.4 file模块4.1.5 copy模块4.1.6 lineinfile模块4.1.7 systemd模块4.1.8 yum模块4.1.9 get_url模块4.1.10 yum_repository模块4.1.11 user模块4.1.12 group模块4.…...

编程日记 2024/5/27 2:31:31

【Python特征工程系列】一文教你使用PCA进行特征分析与降维（案例+源码）

这是我的第287篇原创文章。一、引言主成分分析（Principal Component Analysis, PCA）是一种常用的降维技术，它通过线性变换将原始特征转换为一组线性不相关的新特征，称为主成分，以便更好地表达数据的方差。在特征重要…...

编程日记 2024/5/27 2:30:30

【Linux】Ubuntu系统挂载NAS文件夹

测试系统：Ubuntu24.02 1. 安装必要的软件包 sudo apt update sudo apt install cifs-utils 2. 创建挂载点 sudo mkdir -p /mnt/nas 3. 获取当前用户的 UID 和 GID id -u id -g 4. 挂载：设置用户名/密码/nas地址 sudo mount -t cifs -o username,…...

编程日记 2024/5/27 2:29:29

让B站缓存视频重获自由：一个简单实用的格式转换工具

让B站缓存视频重获自由：一个简单实用的格式转换工具【免费下载链接】m4s-converter 一个跨平台小工具，将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 还记得那个周末的下午吗&#xf…...

编程新知 2026/5/25 14:45:27

UE4插件开发实战：手把手教你为自定义资源创建独立的3D预览窗口（基于SEditorViewport）

UE4插件开发实战：打造自定义资源的3D预览视口在虚幻引擎4的编辑器扩展开发中，为自定义资源提供直观的3D预览功能是提升工具链效率的关键环节。想象一下，当技术美术师调整一把自定义武器的参数时，能够实时看到模型变化，…...

编程新知 2026/5/25 12:42:33

用Playwright自动化测试工具，5分钟搞定网站短信验证码接口的批量测试

用Playwright实现短信验证码接口的自动化测试实战指南短信验证码作为现代Web应用的核心安全组件，其稳定性和防护能力直接影响用户体验和系统安全。根据2023年DevOps状态报告，超过60%的线上身份验证故障源于短信服务接口的异常。本文将带你用Playwright这…...

编程新知 2026/5/25 11:55:02

Unity场景交互动画工程化实践：触发、动画、物理与渲染四层协同

1. 这不是“加个动画”那么简单：为什么90%的Unity场景交互动画最终显得廉价又生硬？ “用 Unity 打造超酷场景交互动画”——这句话在B站、知乎和独立游戏开发群里的出现频率，大概和“三分钟学会Python”差不多。但真正跑完一个完整流程、让玩…...

编程新知 2026/5/25 10:30:37

MiGPT终极教程：如何让小爱音箱秒变你的专属AI语音助手

MiGPT终极教程：如何让小爱音箱秒变你的专属AI语音助手【免费下载链接】mi-gpt 🏠 将小爱音箱接入 ChatGPT 和豆包，改造成你的专属语音助手。项目地址: https://gitcode.com/GitHub_Trending/mi/mi-gpt 还在为小爱音箱的"人工智…...

编程新知 2026/5/25 10:21:35

如何免费破解百度网盘限速：Python直链解析工具终极指南

如何免费破解百度网盘限速：Python直链解析工具终极指南【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 还在为百度网盘的龟速下载而烦恼吗？想要免费享受…...

编程新知 2026/5/25 10:06:29

BetterJoy：三步搞定Windows玩转任天堂Switch控制器的终极方案

BetterJoy：三步搞定Windows玩转任天堂Switch控制器的终极方案【免费下载链接】BetterJoy Allows the Nintendo Switch Pro Controller, Joycons and SNES controller to be used with CEMU, Citra, Dolphin, Yuzu and as generic XInput 项目地址: https://gitco…...

编程新知 2026/5/25 10:06:25

智慧树自动刷课插件终极指南：3步安装教程，彻底告别手动刷课烦恼！

智慧树自动刷课插件终极指南：3步安装教程，彻底告别手动刷课烦恼！ 【免费下载链接】zhihuishu 智慧树刷课插件，自动播放下一集、1.5倍速度、无声项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 还在为智慧树平台的…...

编程新知 2026/5/25 9:20:42

Burp Suite实战配置指南：HTTPS抓包与Proxy深度调优

1. 这不是又一篇“点开就关”的Burp教程——为什么你总在重复安装、配置、抓不到包？ “Burp Suite 保姆级指南”——看到这标题，你可能已经下意识划走：又是一篇打开后三分钟就关掉的“安装截图菜单翻译‘点击Proxy→Intercept→On’”式流水账…...

编程新知 2026/5/25 7:05:14

DMA优化与MIMO系统性能分析：6G通信关键技术

1. DMA优化与MIMO系统性能分析概述动态超表面天线（Dynamic Metasurface Antenna, DMA）作为6G通信系统的关键技术突破，正在重新定义大规模MIMO系统的设计范式。与传统的相控阵天线相比，DMA通过可编程的超表面单元实现对电磁波的精确…...

编程新知 2026/5/25 5:36:19

文章目录

前言

一、CSS引入方式

1.行内操作

2.内部操作

3.外部操作

二、常用选择器

1.标签选择器

2.类选择器

3.id选择器

4.群组选择器

5.后代选择器

三、字体常用设置

1.字体类型

2.字体大小

3.字体样式

4.字体粗细

四、div盒子模型

1.盒子边框

2.外边距

3.内边距

4.浮动

综合实战案例

相关文章：