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

CSS基础知识学习指南

news 2025/11/2 20:08:52

CSS基础知识学习指南

1. 介绍

CSS（层叠样式表）是用于描述HTML文档的呈现样式的语言。通过CSS，可以控制网页的布局、颜色、字体等各种样式，使得网页更加美观和用户友好。

2. CSS基础语法

CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，声明块则包含样式的属性和值。

选择器 {属性: 值;
}

例如：

p {color: blue;font-size: 14px;
}

上述CSS规则将所有<p>元素的文本颜色设置为蓝色，字体大小设置为14像素。

3. 引入CSS

有三种方式可以将CSS引入到HTML文档中：内联样式、内部样式表和外部样式表。

3.1. 内联样式

内联样式使用style属性直接在HTML元素中定义样式。

<p style="color: blue; font-size: 14px;">这是一个段落。</p>

3.2. 内部样式表

内部样式表使用<style>标签在HTML文档的<head>部分定义样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>p {color: blue;font-size: 14px;}</style><title>CSS基础学习</title>
</head>
<body><p>这是一个段落。</p>
</body>
</html>

3.3. 外部样式表

外部样式表将CSS规则定义在单独的文件中，通过<link>标签将其引入HTML文档。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>CSS基础学习</title>
</head>
<body><p>这是一个段落。</p>
</body>
</html>

styles.css文件内容：

p {color: blue;font-size: 14px;
}

4. 选择器

CSS选择器用于选择要应用样式的HTML元素。

4.1. 元素选择器

元素选择器根据HTML标签名选择元素。

p {color: blue;
}

4.2. 类选择器

类选择器根据HTML元素的class属性选择元素，使用.符号。

.intro {color: green;
}

<p class="intro">这是一个带有类选择器的段落。</p>

4.3. ID选择器

ID选择器根据HTML元素的id属性选择元素，使用#符号。

#unique {color: red;
}

<p id="unique">这是一个带有ID选择器的段落。</p>

4.4. 属性选择器

属性选择器根据HTML元素的属性选择元素。

a[href] {color: orange;
}

<a href="https://www.example.com">这是一个带有属性选择器的链接。</a>

4.5. 组合选择器

组合选择器用于选择多种条件的元素。

/* 后代选择器 */
div p {color: blue;
}/* 子选择器 */
div > p {color: green;
}/* 相邻兄弟选择器 */
h1 + p {color: red;
}/* 普通兄弟选择器 */
h1 ~ p {color: purple;
}

<div><p>这是一个段落，属于div的后代。</p><p>这是一个段落，属于div的子元素。</p>
</div>
<h1>这是一个标题。</h1>
<p>这是一个段落，属于h1的相邻兄弟元素。</p>
<p>这是一个段落，属于h1的普通兄弟元素。</p>

5. 颜色

CSS允许使用颜色名称、十六进制值、RGB、RGBA、HSL和HSLA定义颜色。

/* 颜色名称 */
p {color: red;
}/* 十六进制 */
h1 {color: #00ff00;
}/* RGB */
h2 {color: rgb(0, 0, 255);
}/* RGBA */
div {background-color: rgba(255, 0, 0, 0.5);
}/* HSL */
span {color: hsl(120, 100%, 50%);
}/* HSLA */
section {background-color: hsla(240, 100%, 50%, 0.3);
}

6. 字体

CSS提供了多种字体相关的属性。

6.1. 字体系列

font-family属性指定元素的字体系列。

p {font-family: Arial, sans-serif;
}

6.2. 字体大小

font-size属性指定元素的字体大小。

h1 {font-size: 2em;
}p {font-size: 16px;
}

6.3. 字体样式

font-style属性指定元素的字体样式。

p {font-style: italic;
}

6.4. 字体粗细

font-weight属性指定元素的字体粗细。

h1 {font-weight: bold;
}p {font-weight: 700;
}

6.5. 文本对齐

text-align属性指定元素的文本对齐方式。

p {text-align: center;
}

6.6. 文本装饰

text-decoration属性用于添加文本装饰，如下划线、上划线和删除线。

a {text-decoration: none;
}p {text-decoration: underline;
}

6.7. 文本变换

text-transform属性用于控制文本的大小写。

p {text-transform: uppercase;
}

6.8. 字母间距和行高

letter-spacing属性用于控制字母间距，line-height属性用于控制行高。

p {letter-spacing: 2px;line-height: 1.5;
}

7. 背景

CSS提供了多种背景相关的属性。

7.1. 背景颜色

background-color属性指定元素的背景颜色。

div {background-color: lightblue;
}

7.2. 背景图像

background-image属性指定元素的背景图像。

body {background-image: url('background.jpg');
}

7.3. 背景重复

background-repeat属性指定背景图像的重复方式。

body {background-image: url('background.jpg');background-repeat: no-repeat;
}

7.4. 背景位置

background-position属性指定背景图像的位置。

body {background-image: url('background.jpg');background-position: center;
}

7.5. 背景尺寸

background-size属性指定背景图像的尺寸。

body {background-image: url('background.jpg');background-size: cover;
}

8. 边框

CSS提供了多种边框相关的属性。

8.1. 边框样式

border-style属性指定边框的样式。

div {border-style: solid;
}

8.2. 边框宽度

border-width属性指定边框的宽度。

div {border-width: 2px;
}

8.3. 边框颜色

border-color属性指定边框的颜色。

div {border-color: blue;
}

8.4. 简写属性

border属性用于简写边框的样式、宽度和颜色。

div {border: 2px solid blue;
}

8.5. 圆角边框

border-radius属性指定圆角边框的半径。

div {border-radius: 10px;
}

9. 外边距和内边距

外边距（margin）和内边距（padding）用于控制元素的外部和内部空间。

9.1. 外边距

margin属性指定元素的外部空间。外边距可以单独设置，也可以使用简写属性。

/* 单独设置 */
div {margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 20px;
}/* 简写属性 */
div {margin: 10px 20px;
}

上述代码将元素的上下外边距设置为10像素，左右外边距设置为20像素。

9.2. 内边距

padding属性指定元素的内部空间。内边距也可以单独设置或使用简写属性。

/* 单独设置 */
div {padding-top: 10px;padding-right: 20px;padding-bottom: 10px;padding-left: 20px;
}/* 简写属性 */
div {padding: 10px 20px;
}

上述代码将元素的上下内边距设置为10像素，左右内边距设置为20像素。

10. 布局

CSS提供了多种布局方式，用于控制网页元素的排列和显示。

10.1. 浮动布局

float属性用于将元素从正常的文档流中移出，并将其浮动到容器的左侧或右侧。

img {float: left;margin-right: 10px;
}

<img src="example.jpg" alt="示例图像">
<p>这是一个带有浮动图像的段落。</p>

10.2. 定位布局

CSS提供了四种定位方式：静态定位、相对定位、绝对定位和固定定位。

/* 静态定位（默认） */
div {position: static;
}/* 相对定位 */
div {position: relative;top: 10px;left: 10px;
}/* 绝对定位 */
div {position: absolute;top: 50px;left: 50px;
}/* 固定定位 */
div {position: fixed;bottom: 0;right: 0;
}

10.3. Flexbox布局

Flexbox布局是一种一维布局模型，用于创建灵活和高效的布局。

.container {display: flex;justify-content: center;align-items: center;height: 100vh;
}.item {background-color: lightcoral;padding: 20px;margin: 10px;
}

<div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>

10.4. Grid布局

Grid布局是一种二维布局模型，用于创建复杂的布局。

.container {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px;
}.item {background-color: lightseagreen;padding: 20px;
}

<div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>

11. 过渡与动画

CSS提供了过渡和动画，用于实现元素的动态效果。

11.1. 过渡

transition属性用于定义元素的过渡效果。

button {background-color: blue;transition: background-color 0.5s ease;
}button:hover {background-color: green;
}

<button>鼠标悬停按钮</button>

11.2. 动画

animation属性用于定义元素的动画效果。

@keyframes example {0% {background-color: red;left: 0px;top: 0px;}100% {background-color: yellow;left: 200px;top: 200px;}
}div {position: absolute;animation: example 5s infinite;
}

<div style="width:100px;height:100px;background-color:red;"></div>

12. 媒体查询

媒体查询用于根据设备的特性（如宽度、高度）应用不同的样式，实现响应式设计。

body {background-color: lightblue;
}@media screen and (max-width: 600px) {body {background-color: lightgreen;}
}

<p>调整浏览器窗口的宽度查看背景颜色的变化。</p>

13. 伪类和伪元素

CSS伪类和伪元素用于选择元素的特定状态或部分。

13.1. 伪类

伪类用于选择元素的特定状态。

a:link {color: blue;
}a:visited {color: purple;
}a:hover {color: red;
}a:active {color: green;
}

13.2. 伪元素

伪元素用于选择元素的特定部分。

p::first-line {color: blue;font-weight: bold;
}p::first-letter {color: red;font-size: 2em;
}

14. 表格样式

CSS提供了多种属性用于美化表格。

table {width: 100%;border-collapse: collapse;
}th, td {border: 1px solid black;padding: 8px;text-align: left;
}th {background-color: lightgray;
}

<table><tr><th>姓名</th><th>年龄</th><th>城市</th></tr><tr><td>John Doe</td><td>30</td><td>New York</td></tr><tr><td>Jane Smith</td><td>25</td><td>Los Angeles</td></tr>
</table>

15. 表单样式

CSS提供了多种属性用于美化表单元素。

input[type="text"], input[type="password"], textarea {width: 100%;padding: 10px;margin: 5px 0 10px 0;border: 1px solid #ccc;box-sizing: border-box;
}button {background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;
}button:hover {background-color: #45a049;
}

<form><label for="username">用户名:</label><input type="text" id="username" name="username" required><label for="password">密码:</label><input type="password" id="password" name="password" required><button type="submit">登录</button>
</form>

16. 图像和媒体

CSS提供了多种属性用于控制图像和其他媒体元素的显示。

16.1. 图像大小

width和height属性用于控制图像的大小。

img {width: 100px;height: auto;
}

16.2. 媒体查询

使用媒体查询可以根据屏幕大小调整图像的显示。

img {width: 100%;height: auto;
}@media screen and (max-width: 600px) {img {width: 50%;}
}

16.3. 背景图像

background-image属性用于为元素设置背景图像。

div {width: 300px;height: 200px;background-image: url('background.jpg');background-size: cover;
}

17. CSS预处理器

CSS预处理器如Sass和LESS提供了更高级的功能，使CSS开发更加高效。

17.1. Sass示例

$primary-color: #333;body {font: 100% Helvetica, sans-serif;color: $primary-color;
}.alert {padding: 10px;margin: 10px;border: 1px solid red;@extend .message;
}.message {border: 1px solid #ccc;
}

17.2. LESS示例

@primary-color: #333;body {font: 100% Helvetica, sans-serif;color: @primary-color;
}.alert {padding: 10px;margin: 10px;border: 1px solid red;.message;
}.message {border: 1px solid #ccc;
}

18. 实践示例

结合以上内容，通过实践示例来巩固学习。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS实践示例</title><style>body {font-family: Arial, sans-serif;line-height: 1.6;margin: 0;padding: 0;background-color: #f4f4f4;}.container {width: 80%;margin: auto;overflow: hidden;}header {background: #333;color: #fff;padding-top: 30px;min-height: 70px;border-bottom: #0779e4 3px solid;}header a {color: #fff;text-decoration: none;text-transform: uppercase;font-size: 16px;}nav {float: right;margin-top: 10px;}nav ul {margin: 0;padding: 0;list-style: none;}nav ul li {display: inline;margin-left: 5px;}#showcase {min-height: 400px;background: url('showcase.jpg') no-repeat 0 -400px;text-align: center;color: #fff;}#showcase h1 {margin-top: 100px;font-size: 55px;margin-bottom: 10px;}#showcase p {font-size: 20px;}section {padding: 20px;margin: 20px 0;background: #fff;}footer {background: #333;color: #fff;text-align: center;padding: 10px 0;margin-top: 20px;}@media(max-width: 600px) {nav ul {text-align: center;float: none;}nav ul li {display: block;margin: 0;}#showcase h1 {margin-top: 50px;font-size: 30px;}}</style>
</head>
<body><header><div class="container"><div id="branding"><h1>学习CSS</h1></div><nav><ul><li><a href="#showcase">展示区</a></li><li><a href="#section1">部分1</a></li><li><a href="#section2">部分2</a></li></ul></nav></div></header><div id="showcase"><div class="container"><h1>欢迎学习CSS</h1><p>掌握网页设计的基本技能</p></div></div><section id="section1" class="container"><h2>部分1</h2><p>这是CSS基础知识的第一部分内容。</p></section><section id="section2" class="container"><h2>部分2</h2><p>这是CSS基础知识的第二部分内容。</p></section><footer><p>学习CSS &copy; 2024</p></footer>
</body>
</html>

19. 结论

通过本指南，我们深入了解了CSS的基础知识、语法和应用。CSS是一门非常强大的语言，通过不断实践和探索，可以设计出美观且功能强大的网页。

20. 参考资料

W3Schools CSS Tutorial
MDN Web Docs - CSS
CSS-Tricks

这篇博客详细介绍了CSS基础知识及其实践应用，旨在帮助初学者掌握CSS的核心概念和技巧。如果有任何问题或建议，请在评论区留言。

CSS基础知识学习指南

CSS基础知识学习指南 1. 介绍 CSS（层叠样式表）是用于描述HTML文档的呈现样式的语言。通过CSS，可以控制网页的布局、颜色、字体等各种样式，使得网页更加美观和用户友好。 2. CSS基础语法 CSS由选择器和声明块组成。选择器用于选…...

编程日记 2024/7/2 12:38:40

力扣hot100 -- 贪心算法

👂 ▶ 逍遥叹 - 胡歌&沈以城【Mashup】 (163.com) 👂 庐州月 - 许嵩 - 单曲 - 网易云音乐 2.7 小时，加上写博客，4 道题，😂 -- 希望二刷时，可以 3 小时，8 道题.... 目录 &…...

编程日记 2024/7/2 12:36:38

P2P文件传输协议介绍

P2P文件传输协议是一种基于对等网络（Peer-to-Peer，简称P2P）的文件共享和传输技术。以下是关于P2P文件传输协议的详细介绍： 一、定义与原理 P2P文件传输协议允许网络中的各个节点（即计算机或其他设备）之间…...

编程日记 2024/7/2 12:35:37

Spring Boot集成Spring Mobile快速入门Demo

1.什么是Spring Mobile？ Spring Mobile是一个基于Spring Web MVC框架扩展的一个针对不同移动终端的应用开发框架。通过它我们在适配不同终端方面，就不用费劲心思了。 Spring Mobile的主要功能自动设备检测: Spring Mobile在 server端内置了一个设备解…...

编程日记 2024/7/2 12:33:35

走进开源企业 | 湖南大学OpenHarmony技术实训活动在开鸿智谷顺利举办！

6月24日-6月26日，2024开放原子校源行之湖南大学信息科学与工程学院师生走进开源企业实训交流活动顺利落下帷幕。湖南大学信息科学与工程学院的师生代表团一行90人参与了湖南开鸿智谷数字产业有限公司（以下简称“开鸿智谷”）与母公司拓维信息系…...

编程日记 2024/7/2 12:32:34

TCP单进程循环服务器程序与单进程客户端程序

实验目的理解并掌握以下内容：网络进程标识(即套接字地址)在Linux中的数据结构与地址转换函数。网络字节序与主机字节序的定义、转换以及相关函数在网络编程中的应用。数据结构内存对齐的基本规则，以及基于数据结构构建PDU的基本方法。TCP单进程循环服务器与单进程客户端的…...

编程日记 2024/7/2 12:28:31

QT+winodow 代码适配调试总结（二）

已经好多年了， linux环境下不同版本的QT程序开发和部署，突然需要适配window环境程序调试，一堆大坑，还真是一个艰巨的任务，可是kpi下的任务计划，开始吧！！ 1、首先我们自定义的动态库…...

编程日记 2024/7/2 12:26:29

百家讲坛 | 裴伟伟：企业中安全团队应当如何反馈漏洞

作者简介：裴伟伟，洞源实验室创始人，国家网安基地网络安全行业专家，网安加社区特聘专家，持有CISSP、PMP证书，曾在HITCON、可信云大会、开源产业大会等安全论坛发表演讲。曾任国内某安全实验室负责人、某互金…...

编程日记 2024/7/2 12:25:28

巧用Fiddler中的Comments提升接口测试效率

有没有同学在使用Fiddler时跟我遇到了同样的问题，就是想给某个抓包的请求进行注释！！！但是奇怪的是，根本没有Comments相关信息呀？ 设置Comments 设置Comments非常容易，选中一个请求&#xff0c…...

编程日记 2024/7/2 12:23:26

停车场车牌识别计费系统，用Python如何实现？

关注星标，每天学习Python新技能前段时间练习过的一个小项目，今天再看看，记录一下~ 项目结构说明： datefile文件夹：保存车辆信息表的xlsx文件 file文件夹：保存图片文件夹。ic_launcher.jpg是窗体的右上角…...

编程日记 2024/7/2 12:22:25

Linux内核——Linux内核体系模式（二）

1 Linux系统的中断机制 Linux内核将中断分为两类：硬件中断和软件中断（异常）。每个中断是由0-255之间的一个数字进行标识。中断int0-int31（0x00-0x1f）作为异常int32-int255由用户自己设定 int32-int47对应与8259A中断…...

编程日记 2024/7/2 12:17:20

Spring MVC的高级功能——异常处理（一）简单异常处理器

一、HandlerExceptionResolver接口如果希望对Spring MVC中所有异常进行统一处理，可以使用Spring MVC提供的异常处理器HandlerExceptionResolver接口。Spring MVC内部提供了HandlerExceptionResolver的实现类SimpleMappingExceptionResolver。它实现了简单的异常处理…...

编程日记 2024/7/2 12:15:18

【面试干货】Static关键字的用法详解

【面试干货】Static关键字的用法详解 1、Static修饰内部类2、Static修饰方法3、Static修饰变量4、Static修饰代码块5、总结 💖The Begin💖点点关注，收藏不迷路💖 在Java编程语言中，static是一个关键字，它可…...

编程日记 2024/7/2 12:13:16

软件工程实验

实验环境和需求用户可以对相片进行按类别管理，用户可以设定不同的类别，然后上传照片到相应的类别中，并能进行照片的删除，注释运行运行并访问 localhost 8090,图片在数据库中的信息是D：/upgrade 后面的内容 se…...

编程日记 2024/7/2 12:11:14

对于复杂的网页布局，如多列布局和网格布局，CSS 有哪些最佳实践和技巧？

对于复杂的网页布局，如多列布局和网格布局，以下是一些CSS的最佳实践和技巧： 使用Flexbox或CSS Grid布局：Flexbox和CSS Grid是两个强大的CSS布局模型，可用于实现复杂的网页布局。Flexbox适用于单行或单列布局&#xff0…...

编程日记 2024/7/2 12:10:12

Spring Boot中集成Redis实现缓存功能

Spring Boot中集成Redis实现缓存功能大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！今天我们将深入探讨如何在Spring Boot应用程序中集成Redis，实现…...

编程日记 2024/7/2 12:08:11

arco disign vue 日期组件的样式穿透

问题描述: 对日期组件进行样式穿透. 原因分析: 如图,日期组件被展开时它默认将dom元素挂载到body下, 我们的页面在idroot的div 里层, 里层想要穿透外层是万万行不通的. 解决问题: 其实官网提供了参数,但是并没有提供例子, 只能自己摸索着过河. 对于日期组件穿透样式,我们能…...

编程日记 2024/7/2 12:07:09

【深度学习】pytorch训练中的一个大坑

使用的命令：iostat -x 5 可以看到 ssd的利用率已经满了。之前在的数据集放在了 hdd上，训练结果特别慢。所以我把它移动到了ssd上，然后训练参数用的 resume， 但是！！！！它把历史记住…...

编程日记 2024/7/2 12:06:08

python全局解释器锁（GIL）

文章目录 1.cpu工作方式2.python全局解释器锁与多线程3.其他语言的多线程4.如何解决假的多线程 1.cpu工作方式先来先服务（First Come, First Served，FCFS）： 最简单的调度算法，按照作业或进程到达的顺序依次执行。没有…...

编程日记 2024/7/2 12:04:06

无人机的起源

无人机起源于20世纪初的早期实验阶段，并随着技术进步逐步发展。无人机，作为现代科技领域中的一项重要创新，已经在全球范围内展现出其巨大的潜力和应用价值。无人机的历史可以追溯到1917年，美国人艾德温.奥斯特林发明了“飞行训练…...

编程日记 2024/7/2 12:03:05

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。一、遭遇攻击的紧急应…...

编程新知 2025/10/30 10:46:47

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2025/10/30 3:38:33

css3笔记（1）自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

基于 TAPD 进行项目管理

起因自己写了个小工具，仓库用的Github。之前在用markdown进行需求管理，现在随着功能的增加，感觉有点难以管理了，所以用TAPD这个工具进行需求、Bug管理。操作流程注册 TAPD，需要提供一个企业名新建一个项目&#…...

编程新知 2025/10/25 12:56:40

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/10/27 6:22:43

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版，莫兰迪调色板清新简约工作汇报PPT模版，莫兰迪时尚风极简设计PPT模版，大学生毕业论文答辩PPT模版，莫兰迪配色总结计划简约商务通用PPT模版，莫兰迪商务汇报PPT模版，…...

编程新知 2025/10/29 1:49:43

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时，没有加载所有类库。插件运行过程中用到某个类库，会从CAD的安装目录找，找不到就报错了。【方案2】让CAD在加载过程中把类库加载到内存【方案3】是发现缺少了哪个库，就用插件程序加载进…...

编程新知 2025/7/8 18:12:44

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍传统滑模观测器采用如下结构： 传统SMO中LPF会带来相位延迟和幅值衰减，并且需要额外的相位补偿。采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)，可以去除高次谐波，并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2025/10/22 2:08:09

CSS基础知识学习指南

1. 介绍

2. CSS基础语法

3. 引入CSS

3.1. 内联样式

3.2. 内部样式表

3.3. 外部样式表

4. 选择器

4.1. 元素选择器

4.2. 类选择器

4.3. ID选择器

4.4. 属性选择器

4.5. 组合选择器

5. 颜色

6. 字体

6.1. 字体系列

6.2. 字体大小

6.3. 字体样式

6.4. 字体粗细

6.5. 文本对齐

6.6. 文本装饰

6.7. 文本变换

6.8. 字母间距和行高

7. 背景

7.1. 背景颜色

7.2. 背景图像

7.3. 背景重复

7.4. 背景位置

7.5. 背景尺寸

8. 边框

8.1. 边框样式

8.2. 边框宽度

8.3. 边框颜色

8.4. 简写属性

8.5. 圆角边框

9. 外边距和内边距

9.1. 外边距

9.2. 内边距

10. 布局

10.1. 浮动布局

10.2. 定位布局

10.3. Flexbox布局

10.4. Grid布局

11. 过渡与动画

11.1. 过渡

11.2. 动画

12. 媒体查询

13. 伪类和伪元素

13.1. 伪类

13.2. 伪元素

14. 表格样式

15. 表单样式

16. 图像和媒体

16.1. 图像大小

16.2. 媒体查询

16.3. 背景图像

17. CSS预处理器

17.1. Sass示例

17.2. LESS示例

18. 实践示例

19. 结论

20. 参考资料

相关文章：