CSS零基础入门教程
欢迎来到本教程，这是一篇专为初学者设计的CSS入门指南，在开始编写任何CSS代码之前，了解一些基础知识是非常重要的，让我们从最基本的开始，逐步探索CSS的世界。
1. CSS是什么？
CSS是"层叠样式表"（Cascading Style Sheets）的缩写，它是一种用于描述HTML（或XML和SVG等其他标记语言）文档样式的样式表语言，CSS使你能够控制文本的颜色、字体和大小，以及网页元素的布局和边距等。
2. CSS有哪些基本语法？
CSS规则由两个主要部分组成：选择器（selector）和声明块（declaration block）。
选择器是你想要样式化的HTML元素，声明块包含一个或多个声明，每个声明由属性和值组成。
p {
color: red;
font-size: 16px;
}
在这个例子中，“p”是选择器，表示我们想要样式化所有的段落元素。“{ color: red; font-size: 16px; }”是声明块，其中包含两个声明，第一个声明设置了文本颜色为红色，第二个声明设置了字体大小为16像素。
3. 如何将CSS应用到HTML？
有三种方法可以将CSS应用到HTML：内联样式、内部样式表和外部样式表。
* 内联样式：将样式直接添加到HTML元素中。 `This is a red paragraph.`，这种方法的优点是简单易用，但缺点是不利于样式的复用和管理。
* 内部样式表：在HTML文档的``部分中使用``标签，这种方法的优点是可以在单个HTML文档中重用样式，但缺点是不利于在多个页面之间共享样式。
* 外部样式表：将CSS代码写入单独的.css文件，然后在HTML文档中使用``标签引用它，这是最推荐的方法，因为它便于样式的复用和共享，也有利于页面的加载速度。
<head> <link rel="stylesheet" href="styles.css"> </head>
4. CSS的一些基本属性
* color：用于设置文本颜色，`color: red;`会将文本颜色设置为红色。
* font-size：用于设置字体大小，`font-size: 16px;`会将字体大小设置为16像素。
* margin：用于设置元素的外边距，`margin: 10px;`会将元素的外边距设置为10像素。
* padding：用于设置元素的内边距，`padding: 20px;`会将元素的内边距设置为20像素。
* background-color：用于设置元素的背景颜色，`background-color: yellow;`会将元素的背景颜色设置为黄色。
5. CSS布局基础 - Flexbox和Grid
Flexbox（弹性布局）和Grid（网格布局）是CSS提供的两种强大的布局方式，它们可以让你更轻松地控制页面布局。
* Flexbox：适用于一维布局（行或列），你可以使用属性如`flex-direction`（决定元素的方向）、`justify-content`（决定元素在行的对齐方式）和`align-items`（决定元素在列的对齐方式）来控制元素的布局。
* Grid：适用于二维布局（行和列），你可以使用属性如`grid-template-columns`（定义网格的列）和`grid-template-rows`（定义网格的行）来控制元素的布局。
