7/22/2025
本教程尝试使用简单通俗的叙事方式、遵循思维运行路线，通过介绍大部分的CSS规则，抓大放小，形成对 CSS 的快速印象，建立稳固的 CSS 知识结构。
简明 CSS 教程
写在开头：写给自己看的技术教程。相当于把知识要点梳理一遍，建立知识框架，差缺补漏。用自己的话、自己的行文方式说一遍、写一遍。如果遇到卡壳、说不清楚，说明自己没有真的懂。
正名：从名称说开去
CSS，Cascading Style Sheets，层叠样式表。是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。
CSS代码长什么样
div {
color: red;
}
规则集
CSS 用描述某些元素，它的展示方式。
选择器
需要用一种表达来指定元素，它称为选择器。意思是，通过这个表达式，告诉浏览器，选择哪些元素。
可以通过多方式来表示。 比如，标签名。 比如，id。当，某个元素配置 id 属性，就可以用 id 来指代它。通常，id在文档中是唯一的。
现代Web，很少用 id 了。 常用的是class，因为往往是同类的一组标签元素。
tag
#id
.class
声明
选择好元素后，可以开始指定某个展示属性了。
格式是 key: value; 。
这里的 key 有多种类型。
可以给它们做一下分类。
盒子模型
在这之前，提一下盒子模型。这是 CSS 的典型模型。 它把 HTML 文档看成是大盒套小盒。 整个文档流，就盒子怎么摆放的问题。 通常，盒子按顺序摆放。横着放不下，就换下一行摆放。
显然，每个盒子，都有大小。也就是高度和宽度。height width 。不仅可以固定大小。还可以指定最大或最小。min-xx max-xx 。 盒子还有边界。称为 border 。边界可以指定大小（厚度），可以指定是否圆角、弧度。这就是 border-width border-radius 。 盒子里有东西，也就是标签包含的内容，它们之间有间距。盒子外面还有跟其他和盒子的间距。这就是内间距和外间距。也可以称空间。padding margin 。 盒子可以指定背景色、背景图片。 background-color background-url 。
文字排版
对文本，有多个属性可以指定。 文字大小、行高、字体、字体粗细、文字颜色。分别是 font-size line-height font-family font-weight color 。 还有，文本过长，是换行还是省略，还是隐藏。 单词能不能断行，空白符能不能断行。
其他
隐藏，滚动条。
布局
有 flex grid 等。 现代CSS，大量使用 flex 布局和 grid 布局。
flex 布局
中文称为弹性盒子布局。是一维布局。
grid 布局
中文称为网格布局。是二维布局。
一些单位和参照物
屏幕。 vh vw 分别是屏幕高度和宽度。
响应式
现代CSS
- css layer
- 变量
- 函数
- 指令
级联层
对于一个元素，如果有多个规则集定义了它，按什么顺序或规则来处理？ 这就引出了级联层。
早期的CSS，用 !import 强行改变声明的优先级。
流行的CSS框架
- BootStrap
- Tailwind CSS
变体和扩展
- SCSS
- SASS
怎么精通CSS
当你看到一个网页，想一下，它的布局怎么实现，背后的CSS代码是什么样的；这个显示效果，背后的CSS代码是什么样的。
如果达到这个境界，说明你已经精通 CSS 了。 在这之前，勤加练习。
最后
记得经常回来看这篇教程，回顾、巩固你的 CSS 知识。温故而知新。