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

CSS基础知识学习指南

news 2025/12/18 9:26:43

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

vscode里如何用git

打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

Cursor实现用excel数据填充word模版的方法

cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中文章目录注意事项逐步生成程序1. 确定格式2. 调试程序注意事项直接给一个excel文件和最终呈现的word文件的示例，…...

编程新知 2025/8/23 5:46:26

MVC 数据库

MVC 数据库引言在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

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/12/14 8:37:22

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机传统的知识图谱补全（KGC）模型通过…...

编程新知 2025/12/17 23:32:03

微信小程序云开发平台MySQL的连接方式

注：微信小程序云开发平台指的是腾讯云开发先给结论：微信小程序云开发平台的MySQL，无法通过获取数据库连接信息的方式进行连接，连接只能通过云开发的SDK连接，具体要参考官方文档： 为什么？ 因为…...

编程新知 2025/12/11 19:08:52

浅谈不同二分算法的查找情况

二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。需要说明的是，以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...

编程新知 2025/12/15 20:52:13

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目做法启动靶机，点进去点进去查看URL，有 ?fileflag.php说明存在文件包含，原理是php://filter 协议当它与包含函数结合时，php://filter流会被当作php文件执行。用php://filter加编码，能让PHP把文件内容…...

编程新知 2025/12/14 1:44:27

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行： rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...

编程新知 2025/12/6 20:33:44

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. 参考资料

相关文章：