学习 CSS（Cascading Style Sheets）是前端开发的重要部分，它用于控制网页的样式和布局。以下是学习 CSS 过程中需要掌握的基本概念、符号和对应的意义。
CSS 基础知识
1. CSS 的基本结构
CSS 规则由选择器和声明块组成，基本结构如下：
selector {
property: value;
/* more properties and values */
}
- 选择器（selector）：指定要应用样式的 HTML 元素。
- 声明块（declaration block）：包含一个或多个声明，每个声明由属性和值组成。
2. 选择器
基础选择器：
- 元素选择器：选择所有指定的 HTML 元素。例如，
p { color: red; }选择所有<p>元素。 - 类选择器：选择所有指定类名的元素，使用
.表示。例如，.className { color: blue; }选择所有类名为className的元素。 - ID 选择器：选择具有指定 ID 的元素，使用
#表示。例如，#idName { color: green; }选择 ID 为idName的元素。
- 元素选择器：选择所有指定的 HTML 元素。例如，
组合选择器：
- 后代选择器：选择某个元素内的所有指定元素，使用空格分隔。例如，
div p { color: yellow; }选择所有在<div>内的<p>元素。 - 子选择器：选择某个元素的直接子元素，使用
>分隔。例如，ul > li { color: purple; }选择所有<ul>的直接子元素<li>。 - 相邻兄弟选择器：选择紧接在某元素后的指定元素，使用
+分隔。例如，h1 + p { color: orange; }选择紧接在<h1>后的第一个<p>元素。 - 通用兄弟选择器：选择某元素后面的所有指定元素，使用
~分隔。例如，h1 ~ p { color: pink; }选择<h1>后的所有<p>元素。
- 后代选择器：选择某个元素内的所有指定元素，使用空格分隔。例如，
伪类和伪元素选择器：
- 伪类选择器：选择特定状态的元素。例如，
:hover选择鼠标悬停状态的元素，:first-child选择父元素的第一个子元素。 - 伪元素选择器：选择元素的特定部分。例如，
::before和::after用于在元素内容的前后插入内容。
- 伪类选择器：选择特定状态的元素。例如，
3. 常用 CSS 属性
文本样式：
color：设置文本颜色。font-size：设置文本大小。font-family：设置字体系列。font-weight：设置字体粗细。text-align：设置文本对齐方式。text-decoration：设置文本装饰（如下划线）。line-height：设置行高。
背景样式：
background-color：设置背景颜色。background-image：设置背景图片。background-repeat：设置背景图片是否重复。background-position：设置背景图片的位置。background-size：设置背景图片的大小。
边框和间距：
border：设置边框，包括宽度、样式和颜色。margin：设置元素外边距。padding：设置元素内边距。
布局：
display：设置元素的显示类型（如block、inline、inline-block、flex）。position：设置元素的定位类型（如static、relative、absolute、fixed）。top、right、bottom、left：设置定位元素的偏移。z-index：设置元素的堆叠顺序。
尺寸：
width：设置元素的宽度。height：设置元素的高度。max-width：设置元素的最大宽度。max-height：设置元素的最大高度。min-width：设置元素的最小宽度。min-height：设置元素的最小高度。
灵活盒子布局（Flexbox）：
display: flex：将元素变为 flex 容器。flex-direction：设置主轴方向（如row、column）。justify-content：设置主轴上的对齐方式（如flex-start、center、space-between）。align-items：设置交叉轴上的对齐方式（如flex-start、center）。flex-wrap：设置是否换行（如nowrap、wrap）。
网格布局（Grid）：
display: grid：将元素变为 grid 容器。grid-template-columns：定义列结构。grid-template-rows：定义行结构。grid-gap：设置网格间距。
过渡与动画：
transition：设置过渡效果。animation：定义动画，包括名称、持续时间、计时函数等。
4. CSS 单位
绝对单位：
px（像素）：常用的单位，适用于大多数情况。cm（厘米）、mm（毫米）：适用于打印媒体。in（英寸）、pt（磅）、pc（派卡）：适用于打印媒体。
相对单位：
%（百分比）：相对于父元素的尺寸。em：相对于元素的字体大小。rem：相对于根元素（<html>）的字体大小。vw（视口宽度）、vh（视口高度）：相对于视口的百分比。vmin、vmax：相对于视口较小或较大的那一个百分比。
5. CSS 盒模型
- 内容区（Content Box）：包含实际内容的区域。
- 内边距（Padding）：内容区和边框之间的空间。
- 边框（Border）：包围内容和内边距的边缘。
- 外边距（Margin）：边框和相邻元素之间的空间。
总结
掌握 CSS 是前端开发的重要环节。通过理解选择器、属性、单位、盒模型以及布局技术，我们就可以创建出具有良好视觉效果和用户体验的网页。
![[html]<span style='color:red;'>基础</span><span style='color:red;'>知识</span>点<span style='color:red;'>汇总</span>](https://img-blog.csdnimg.cn/direct/25af7f9a08d2405f99d5b1205ff4d618.png)
