CSS 文档
简洁、以示例为主的 CSS 参考文档。先读概念，再看代码，然后在 Coddy 学习旅程中动手练习。
开始课程入门
- 内联 CSS内联 CSS 用 style 属性把声明直接写在元素上。本文讲解它的语法、什么时候适合使用内联样式、它为什么能胜过样式表，以及它与内部 CSS 和外部 CSS 的对比。
- 外部 CSS外部 CSS 写在一个 .css 文件里，每个页面用 <link rel="stylesheet"> 引入它；内部 CSS 写在单个页面内的 <style> 元素中。学习这两种写法、文件路径的规则，以及两者相遇时哪条规则生效。
- 注释CSS 只有一种注释语法：/* ... */，单行和多行都用它。了解注释可以写在哪里、如何注释掉一条规则，以及为什么 // 和嵌套注释会悄悄破坏下一条规则。
- !important!important 让一条声明胜过所有普通声明，无论它们的优先级如何。本文准确讲解它能压过什么、什么能压过它、底层的优先级是如何计算的，以及解决样式冲突更干净的办法。
- CSS 变量CSS 变量（自定义属性）把一个值存一次，再用 var() 反复使用。本文讲解如何在 :root 中声明变量、限定作用域并覆盖它们、提供后备值、用 JavaScript 切换主题，以及如何避开无效值陷阱。
选择器
- 选择器CSS 选择器决定一条规则要给哪些元素设置样式。本文讲解各种选择器类型、四种组合器（后代、子元素、相邻兄弟、通用兄弟）、属性选择器和分组，并让你在线测试选择器。
- 类选择器类选择器（.name）为所有带这个类的元素设置样式；ID 选择器（#name）为带这个 id 的那一个元素设置样式。学习它们的语法、多个类和链式类、class 与 id 的区别、命名规则，以及用 JavaScript 切换类。
- 伪类伪类按位置或状态选择元素：:nth-child()、:first-child、:not()、:focus、:checked、:has() 等。本文讲解伪类的语法、an+b 公式（附在线测试器），以及 nth-child 与 nth-of-type 的区别。
- ::before 和 ::after::before 和 ::after 直接用 CSS 在元素中插入生成内容，分别作为它的第一个和最后一个子元素。学习 content 属性、为什么必须写空的 content、如何定位它们、用 attr() 做提示框、计数器，以及它们在哪些地方不起作用。
- hover 悬停:hover 伪类在指针停在元素上时为它设置样式。本文讲解按钮和卡片的悬停效果、平滑过渡、按正确顺序使用 :link、:visited、:hover 和 :active 设置链接颜色，以及触摸屏上的悬停。
盒模型
- 盒模型每个元素都是一个由四层组成的盒子：内容、内边距、边框和外边距。学习每一层如何计入尺寸，box-sizing: border-box 如何改变计算方式，并实时查看每一层的测量结果。
- Paddingpadding 是元素内部的空间，位于内容和边框之间。本文讲解 1 到 4 个值的 padding 简写、单边属性、逻辑内边距、百分比，以及 padding 如何改变元素的尺寸。
- Marginmargin 是元素边框外侧的透明空间，用来把其他元素推开。本文讲解 margin 简写、用 margin: 0 auto 居中、负外边距、flexbox 中的 margin auto，以及垂直外边距为什么会折叠。
- margin 与 paddingpadding 是元素边框以内的空间，margin 是边框以外的空间。先在同一个盒子上实时并排看看两者，再了解背景、点击区域、元素间距和居中分别该用哪一个。
- 边框border 属性在元素的内边距外围画一条线。学习 border 简写、所有边框样式、颜色和单边边框、用 border-radius 做圆角，以及边框和轮廓（outline）有什么不同。
- 宽度和高度width 和 height 设置元素盒子的尺寸。本文讲解固定尺寸和百分比尺寸、为什么 height: 100% 常常不起作用、用 min-height 和 max-width 实现灵活布局、auto 与 100% 的区别，以及 fit-content 等关键字。
文本与字体
- 字体大小font-size 属性决定文字有多大。本文讲解它支持的单位（px、rem、em、%、关键字、vw），如何在 HTML 中修改字体大小，为什么 rem 是稳妥的默认选择，以及 em 的大小如何层层叠加。
- 字体粗细font-weight 属性让文字变粗、变细或介于两者之间。本文讲解从 100 到 900 的数值刻度、normal 和 bold、相对值 bolder 和 lighter，以及为什么有时设置了粗细却看不出变化。
- 行高line-height 设置每行文字的高度，也就决定了行与行之间的距离。本文讲解为什么无单位的数字是正确的默认选择，px、em 和 % 值在继承上有何不同，以及正文和标题的合适取值。
- 文字颜色<font color> 标签已经废弃；HTML 中的文字颜色要用 CSS 的 color 属性来设置。本文讲解如何给整个页面、一个词、一个链接或一个标题设置颜色，如何使用颜色名称、十六进制和 rgb，以及如何保证文字清晰可读。
- 下划线用 text-decoration 给文字加下划线，再控制这条线：颜色、样式、粗细以及与文字的距离。还会讲如何去掉链接的下划线，以及什么时候不该去掉。
- 文字阴影text-shadow 在文字后面绘制一个或多个阴影。本文讲解它的四个值（x 偏移、y 偏移、模糊、颜色），如何叠加多个阴影做出发光、描边和 3D 效果，以及如何用阴影让文字在复杂背景上保持清晰可读。
颜色与背景
- 颜色CSS 中写颜色的所有方式：颜色名、十六进制颜色码、rgb() 和 rgba()、hsl()、带 alpha 通道的透明度、currentColor，以及较新的 oklch() 和 color-mix()。每种都有实时示例，另附一个颜色转换器。
- 背景颜色background-color 用一种颜色填充元素的盒子。学习如何设置整个页面、一个 div、一行表格或一个词的背景颜色，透明度如何运作，为什么 bgcolor 已经过时，以及 background-color 和 background 简写有什么不同。
- 背景图片background-image 在元素内容的后面放置一张图片或渐变。学习 url() 和渐变、background-size（cover 与 contain）、background-position、background-repeat、多层背景叠加，以及 background 简写。
- 渐变CSS 渐变是浏览器用颜色画出来的图像。本文讲解 radial-gradient（形状、大小、位置）、linear-gradient（方向和角度）、conic-gradient、色标、用硬色标画条纹、重复渐变以及渐变文字。
- 盒子阴影box-shadow 在元素的盒子周围绘制阴影。学习五个值（x、y、模糊、扩展、颜色）、内阴影、叠加多层阴影营造真实的立体感、用扩展值做焦点环，以及会让阴影显得浑浊的常见错误。
布局
- display 属性display 属性决定元素如何参与布局。通过并排对比、实际测量的盒子，学习 block、inline 和 inline-block，display none 与 visibility hidden 的区别，以及 flex、grid、flow-root 和 contents 各自的用途。
- Positionposition: absolute 把元素放在最近的已定位祖先元素内部的精确坐标上。本文讲解 absolute 如何配合 position: relative 使用，然后介绍 fixed 和 sticky、top/right/bottom/left 和 inset 属性，以及 sticky 有时为什么粘不住。
- z-index 属性z-index 决定重叠的元素中哪个绘制在最上面。本文讲解它对哪些元素有效、层叠上下文如何把元素分组，以至于 z-index 9999 也可能输掉、哪些属性会创建层叠上下文，以及如何修复不起作用的 z-index。
- Overflowoverflow 决定放不进盒子的内容如何处理：照常显示、裁剪掉，还是加上滚动条。本文讲解 visible、hidden、scroll、auto 和 clip，overflow-x 与 overflow-y，文字省略号，以及 overflow 对布局的副作用。
- float 与 clearfloat 把元素推到一侧，让文字环绕在它周围，就像杂志排版里的配图。本文讲解 float 的 left、right 和 inline-start，clear 的用法，父元素为什么会在浮动元素周围塌陷、display: flow-root 如何解决，以及为什么页面布局不再使用浮动。
- div 居中让 div 水平居中、垂直居中或同时居中的所有方法：flexbox、grid、margin auto、absolute 定位加 transform、inset 加 margin auto，以及 align-content。每种方法都能实时运行并测量自己的居中效果，另附一张表告诉你什么时候用哪种。
- 图片居中<img> 是行内元素，所以它像文字一样居中：在父元素上写 text-align: center。也可以把它设为块元素再加 margin: 0 auto，或者用 flexbox、grid 让它居中，包括垂直居中。每种方法都能实时运行并测量结果。
Flexbox 与 Grid
- FlexboxFlexbox 把项目排成一行或一列，并控制它们如何分配空间、如何对齐。学习 display: flex、主轴和交叉轴、所有容器属性，以及 flex-grow、flex-shrink 和 flex-basis，另附一个能测量每个项目落在哪里的实时演练场。
- justify-content 属性justify-content 沿主轴排列 flex 元素，align-items 沿交叉轴排列它们。本文把每个取值并排展示并实际测量，附一个可点击的对齐网格，讲解 align-self，以及 justify-content 有时不起作用的原因。
- flex 换行flex-wrap 决定 flex 项目是挤在一行里还是换到下一行，flex-direction 决定它们按行还是按列排列。通过实时示例学习这两个属性、flex-flow 简写、align-content，以及一行不用媒体查询的响应式卡片。
- Grid 网格布局CSS grid 同时按行和列排列元素。本文讲解 display: grid、grid-template-columns、fr 单位、repeat() 和 minmax()、auto-fill 与 auto-fit 的区别、用 grid-column 放置元素，以及 grid-template-areas，并附一个可以编辑和测量的实时网格。
响应式设计
- 媒体查询媒体查询只在条件成立时应用 CSS，例如屏幕达到某个最小宽度、使用深色配色方案或者使用鼠标指针。本文讲解 @media 语法、移动优先的断点、范围语法、prefers-color-scheme、JavaScript 中的 matchMedia，以及容器查询。
- rem、em 与 pxrem 相对于根元素的字号，em 相对于当前元素的字号，px 是固定的，而 % 取决于具体属性。通过一个嵌套示例实测每种单位，看看 em 为什么会层层叠加、什么时候该用哪种单位，以及 vw、vh 和 dvh 的工作方式。
- clamp()clamp(MIN, PREFERRED, MAX) 返回首选值，但不会小于 MIN，也不会大于 MAX。了解它如何不用媒体查询就让字号和间距随屏幕流动变化，如何计算中间的值，以及 min() 和 max() 与它的关系。
- calc()calc() 让你在 CSS 中做数学运算并混合使用不同单位，比如 100% 减去一个固定 200px 宽的侧边栏。学习它的语法规则（空格很重要）、calc() 配合 CSS 变量、它能解决的常见布局问题，以及为什么无效的 calc() 会被悄悄忽略。
过渡与效果
- transition 过渡CSS 过渡会在属性值改变时（比如悬停时）把它从旧值平滑地变到新值。本文讲解 transition 简写、并排对比的所有缓动函数、哪些属性能过渡哪些不能、height: auto 的变通写法，以及减少动态效果。
- 动画CSS 动画让元素按照你在 @keyframes 中定义的步骤变化，自动播放，想重复几次都可以。学习 @keyframes 语法、全部八个 animation 属性、fill-mode 和 direction、加载动画、暂停动画，以及如何尊重“减少动态效果”设置。
- transform 变换transform 属性可以移动、缩放、旋转和倾斜元素，而不改变周围的布局。本文讲解每个 transform 函数、函数顺序为什么重要、transform-origin、独立的 translate、scale 和 rotate 属性，以及用 translate(-50%, -50%) 居中的技巧。
- Rotate用 transform: rotate(45deg) 或较新的 rotate 属性旋转元素。本文讲解角度单位（deg、turn、rad）、用 transform-origin 绕某个角旋转、旋转文字和图标、旋转加载动画，以及用 rotateX 和 rotateY 实现 3D 旋转。
- Opacityopacity 让整个元素及其内部的一切变得半透明，取值从 0（不可见）到 1（完全不透明）。本文讲解它的取值、为什么 opacity 会让文字也变淡、如何只让背景透明、opacity: 0 与 visibility 和 display 的区别，以及悬停时的淡入淡出。
- 模糊和滤镜filter: blur(5px) 让元素变模糊，backdrop-filter: blur() 让元素背后的内容变模糊。通过实时滑块学习所有滤镜函数（brightness、contrast、grayscale、sepia、saturate、hue-rotate、invert、drop-shadow）、如何组合使用，以及模糊边缘的问题。
