🎨 CSS 学习路线

122 个互动教程

CSS 背景

学习 background-color/image/repeat/position/size

CSS 文本样式

学习 text-align/line-height/letter-spacing

CSS Position 定位

学习 static/relative/absolute/fixed/sticky

CSS 伪元素

学习 ::before/::after/::first-line/::selection

CSS 属性选择器

学习 [attr]/[attr=val]/[attr^=]/[attr$=]/[attr*=]

CSS 图标 — 使用图标字体

Font Awesome/Bootstrap Icons/Material Icons 集成

CSS object-fit 图片适配

contain/cover/fill/none/scale-down 控制图片填充

CSS 多列布局

column-count/column-gap/column-rule 报纸式排版

CSS 选择器完全指南 — 从基础到高级

系统学习CSS选择器：基础选择器、组合器、伪类、伪元素、属性选择器，精准定位任意页面元素

CSS 逻辑属性 Logical Properties

CSS逻辑属性：用inline/block替代物理方向left/right/top/bottom、margin-inline/padding-block/border-inline-start、国际化RTL布局自动适配、与物理属性对比

CSS color-scheme 颜色方案

CSS color-scheme属性：light dark模式切换、prefers-color-scheme媒体查询检测系统主题、与color-scheme配合实现自适应暗黑模式

CSS prefers-reduced-motion 减弱动画

CSS媒体特性prefers-reduced-motion：检测用户系统动画偏好、为无障碍提供静态替代方案、@media (prefers-reduced-motion: reduce) {}

CSS font-variant 字体变体

CSS font-variant属性详解：small-caps小型大写字母、numeric数字变体（lining/oldstyle）、ligatures连字控制、east-asian东亚字体变体

CSS Scroll-Driven Animations 滚动驱动动画

CSS滚动驱动动画：animation-timeline:scroll()基于滚动位置、view-timeline元素进入视图触发、scroll-driven动画性能、使用场景（视差/进度条）

CSS Subgrid 子网格

CSS Subgrid（CSS Grid Level 2）：子元素对齐到父网格线、grid-template-rows/columns:subgrid、嵌套网格对齐、实际布局案例

CSS text-wrap 文本换行控制

text-wrap属性：balance平衡换行（标题美观）、pretty避免孤行、wrap/nowrap、overflow-wrap/word-break/hyphens连字符、中文换行规则line-break

CSS @layer 级联层

@layer级联层：控制样式优先级（layer顺序>选择器权重）、@layer base/components/utilities分层策略、Tailwind CSS的layers实现、重置第三方样式

CSS backdrop-filter 背景滤镜

backdrop-filter：毛玻璃效果、blur()/brightness()/saturate()滤镜函数、与filter区别（作用于背后内容）、性能注意事项（GPU加速）

CSS 盒模型深入理解 — content、padding、border、margin

深入理解CSS盒模型：标准盒模型vs怪异盒模型、box-sizing属性、margin合并现象、盒子计算实战

CSS 动画时间线 scroll()

CSS scroll-timeline/@scroll-timeline：声明式滚动驱动动画、animation-timeline绑定、与JavaScript Intersection Observer对比、性能优势（compositor线程运行）

CSS mix-blend-mode 混合模式

CSS混合模式：mix-blend-mode元素混合（multiply/screen/overlay/darken/lighten等16种）、background-blend-mode背景混合、isolation隔离混合、创意视觉效果

CSS Masking 遮罩与裁剪

CSS遮罩：mask-image（PNG alpha/SVG/gradient）、mask-size/mask-position/mask-repeat、clip-path裁剪路径（circle/polygon/inset/ellipse）、clip-path动画、SVG clipPath

CSS @layer 实战项目组织

@layer实战：tailwind的base/components/utilities三层、设计系统token层/组件层/工具层、第三方库层override、无感知迁移现有CSS到layer

CSS 现代颜色函数

CSS Color Level 4：oklch()/oklab()感知均匀色彩空间（比RGB更符合人眼）、lch()亮度/色度/色相、color()函数P3广色域、color-mix()混合颜色、相对颜色语法

CSS 伪类大全

CSS伪类详解：:nth-child(an+b)/:nth-of-type/:first-child/:last-child/:only-child、:is()/:where()/:not()/:has()选择器列表、:enabled/:disabled/:checked/:indeterminate表单状态、:target/:focus-within/:focus-visible

CSS 容器查询单位

CSS容器查询单位：cqw/cqh/cqi/cqb（相对于查询容器尺寸）、cqmin/cqmax、与视口单位(vw/vh)对比、容器查询+容器单位实现组件自适应排版

CSS Popover API 弹出层

CSS Popover API：popover属性（auto/manual）/popovertarget触发/showPopover()/hidePopover()/togglePopover()、::backdrop伪元素、原生无JS弹出层、比dialog更适合悬浮层

CSS @starting-style 初始样式

@starting-style（CSS Transition新特性）：定义元素首次渲染时的起始状态、smooth transition on first render、与popover/dialog配合进入动画、替代JS的入场动画方案

CSS overscroll-behavior 滚动链

overscroll-behavior：contain阻止滚动链接（弹窗内滚动不传播到body）、none禁止过度滚动橡皮筋效果、auto默认、防止iOS橡皮筋弹跳、滚动容器边界控制

CSS Flexbox 实战 — 一维布局终极方案

全面掌握Flexbox弹性布局：主轴与交叉轴、对齐方式、弹性比例、常见布局模式（居中、圣杯、网格等）

CSS Grid 自动放置与隐式网格

CSS Grid自动放置：grid-auto-flow(row/column/dense)、grid-auto-rows/grid-auto-columns隐式轨道大小、auto-fill vs auto-fit区别、minmax(auto,1fr)响应式网格模板

CSS content-visibility 渲染性能

content-visibility:auto(跳过离屏元素渲染)/visible/hidden、contain-intrinsic-size防止滚动条跳动、大幅提升长列表渲染性能、与contain属性关系

CSS aspect-ratio 宽高比

CSS aspect-ratio属性：aspect-ratio:16/9固定宽高比、与padding-top hack对比（简洁/原生/动态内容）、img中的使用（防止CLS布局偏移）、视频容器响应式

CSS image-set() 响应式图片

image-set()函数：根据DPR选择图片(css image-set(url@1x,url@2x))、与type()配合格式选择WebP/AVIF、与background-image配合、比HTML srcset更适合CSS背景

CSS scroll-behavior 平滑滚动

scroll-behavior:smooth属性（无需JS平滑滚动）、scroll-padding-top配合fixed导航栏锚点偏移、scroll-margin-top元素滚动边距、scroll-snap-stop控制惯性滚动停止点

CSS inset 简写属性

CSS inset属性（top/right/bottom/left一次性设置）：inset:10px 20px 30px 40px、逻辑属性版本inset-inline/inset-block、与positioned元素absolute/fixed配合定位

CSS initial/inherit/unset/revert 关键字

CSS全局关键字：initial重置为初始值、inherit继承父元素值、unset(继承属性=inherit/非继承=initial)、revert回退到浏览器默认样式、all:unset;一次性重置所有属性

CSS Media Query 范围语法

CSS Media Query Level 4范围语法：@media (width >= 768px)比min-width更直观、and/or/not逻辑组合、(400px <= width <= 800px)区间语法、与旧写法向后兼容

CSS Anchor Positioning 锚点定位

CSS Anchor Positioning（CSSWG新特性/无需JS计算位置的tooltip/popover定位）：anchor()函数引用锚元素、anchor-name/position-anchor、inset-area/position-try-fallback自动翻转避免溢出

CSS Flexbox gap 间距属性

Flexbox gap属性深入（替代margin间距的现代方案）：gap/row-gap/column-gap在flex容器中设定子元素间距、与Grid gap属性通用、与margin方案对比（无外边距合并/不触及容器边缘）

CSS Grid 网格布局 — 二维布局终极方案

全面掌握CSS Grid布局：网格容器、行列定义、fr单位、网格区域、对齐方式、响应式网格、常见布局模式

CSS place-items/place-content/place-self

CSS简写对齐属性place-*系列：place-items(align-items+justify-items)、place-content(align-content+justify-content)、place-self(align-self+justify-self)、与Grid/Flexbox配合、单个值表示两个方向相同

CSS caret-color 光标颜色

caret-color属性设置文本输入光标颜色：caret-color:red（仅光标颜色不影响文本）、与color和background-color的对比（caret-color取color的auto值或不取transparent）、无障碍对比度考虑

CSS滚动条样式：scrollbar-width(thin/auto/none)/scrollbar-color(thumb颜色 track颜色)（CSS Scrollbars标准/Firefox支持/Chrome用::-webkit-scrollbar伪元素群::-webkit-scrollbar-track/::-webkit-scrollbar-thumb/::-webkit-scrollb

CSS animation-composition

animation-composition属性：replace(默认/覆盖)/add(叠加多个动画效果/同时位移和旋转不冲突)/accumulate(积累/基于先前动画值继续)、多个动画作用于同一属性的复合方式

CSS tab-size 制表符宽度

tab-size属性：自定义tab字符显示宽度(tab-size:4/tab-size:8)、在<pre><code>代码块中控制缩进显示、与white-space:pre配合、display:tab-size可设为长度值或数值

CSS 字体排版属性深入

CSS字体排版：letter-spacing字间距/word-spacing词间距/line-height行高(数值=乘数/百分比)/text-indent首行缩进/text-align-last最后一行对齐/vertical-align垂直对齐(text-top/text-bottom/middle/sub/super/具体长度)/font-kerning字距调整/ hanging-punctu

CSS counter 计数器

CSS Counter计数器自动编号无需JS：counter-reset命名计数器+初始值、counter-increment递增、counter()/counters(嵌套编号如1.1,1.2,1.2.1)、与::before/::after配合、自动编号目录/图题/章节

CSS shape-outside 形状环绕

shape-outside文字环绕非矩形形状：circle()/ellipse()/polygon()/inset()/url(图片alpha通道提取形状)、shape-margin形状外间距、与clip-path配合裁剪+环绕、杂志风格排版

CSS image-rendering 图像缩放算法

image-rendering属性：auto默认平滑、crisp-edges保持边缘清晰(pixel art像素画必备)、pixelated像素化放大、smooth高质量平滑、与Canvas imageSmoothingEnabled对比

CSS list-style 列表标记

CSS列表标记：list-style-type(预定义/disclosure-open/string/none/counter())、list-style-position(inside/outside标记是否包含在内)、list-style-image自定义图片标记url()、@counter-style自定义计数器样式规则(system/symbols/prefix/suffix/pad)

CSS user-select 文本选择控制

user-select属性控制文本能否被选中：none(禁止选择/按钮/拖动)、auto(默认)、text(文本可选)、contain(选择在元素内不扩展)、all(一键全选)、与::selection伪元素配合样式

CSS scroll-timeline 新属性

CSS scroll-timeline新属性：scroll-timeline-name/scroll-timeline-axis、与animation-timeline绑定、比旧语法更简洁、纯CSS实现滚动驱动动画、Chrome 115+支持

CSS @container 容器查询

CSS Container Queries：@container规则、container-type（inline-size/normal）、container-name命名容器、与@media的区别、基于父容器尺寸的响应式设计

CSS @layer 级联层

CSS @layer规则：创建样式层级、@layer framework/theme/utilities层的优先级、layer()在@import中指定层级、@layer解决样式冲突问题、Tailwind CSS的@layer使用

CSS :has() 父选择器

CSS :has()伪类（父选择器/反向选择）：选择包含特定子元素的父元素、组合选择器用法（:has(> img)、:has(+ p)）、表单状态联动、布局调整、浏览器兼容性

CSS 视口单位 dvh/svh/lvh

CSS新视口单位：dvh/lvh/svh（动态/大/小视口高度）、dvw/lvw/svw、解决移动端100vh溢出问题（地址栏影响）、与vh/vw的对比

CSS 打印样式 @page

CSS打印样式：@media print、@page页面设置（size/margin）、page-break分页控制、:left/:right/:first伪类、隐藏导航/显示完整URL、打印调试技巧

CSS accent-color 强调色

CSS accent-color属性：改变表单控件强调色（复选框/单选按钮/滑块/进度条）、auto和自定义颜色、与color-scheme配合、浏览器兼容性

CSS :focus-visible 智能聚焦

CSS :focus-visible伪类：仅键盘导航时显示聚焦环（鼠标点击不显示）、与:focus的区别、提升无障碍体验、自定义聚焦样式

CSS gap 属性在Flexbox中的应用

CSS gap在Flexbox中：设置flex项目间距（替代margin）、row-gap/column-gap分别设置、与旧版grid-gap的关系、浏览器兼容性（较新特性）

CSS overscroll-behavior 滚动边界

CSS overscroll-behavior：控制滚动到边界时的默认行为、contain阻止滚动链/auto允许/ none禁止下拉刷新、解决弹窗背景滚动穿透问题

CSS 自定义属性实战

从基础到动态主题切换，掌握 CSS 自定义属性的声明、继承与运行时修改。

CSS Grid 高级布局技巧

深入 Grid 的自动填充、网格区域与隐式网格，打造复杂且自适应的页面结构。

CSS 滚动驱动动画入门

利用 scroll() 和 view() 时间线，让动画跟随滚动进度自动播放，无需 JavaScript。

CSS 视图过渡 API 实战

学习使用 view-transition-name 和伪元素，在页面状态变化时创建流畅的动画过渡。

CSS 嵌套规则详解

使用原生 CSS 嵌套语法，像预处理器一样组织样式，减少重复并提高可维护性。

🎨 CSS 学习路线

CSS 入门 — 给网页上色

CSS 盒模型 — 边距与边框

CSS 阴影与圆角

CSS 颜色详解

CSS 背景

CSS 边框

CSS 内外边距

CSS 文本样式

CSS 字体

CSS Overflow 溢出

CSS 背景图像

CSS 文本装饰

CSS 文本间距

CSS 列表样式

CSS 表格样式

CSS Outline 轮廓

CSS 不透明度

CSS 书写模式

CSS 选择器 — 精准定位元素

CSS Flexbox 弹性布局

CSS Grid 网格布局

CSS 响应式设计 — 适配手机

CSS 动画 — 让网页动起来

CSS 过渡效果

CSS 伪类选择器

CSS 变量 (自定义属性)

CSS 优先级计算

CSS Display 属性

CSS Position 定位

CSS 渐变

CSS 2D/3D 变换

CSS 单位详解

CSS 导航栏

CSS 背景简写

CSS 链接样式

CSS Z-index 层级

CSS Float 浮动

CSS 组合器

CSS 伪元素

CSS 属性选择器

CSS 表单美化

CSS 下拉菜单

CSS !important

CSS calc/min/max/clamp

CSS filter 滤镜效果

CSS 混合模式

CSS 滚动捕捉

CSS 裁剪路径

CSS 背景模糊 backdrop-filter

CSS Shapes 形状布局

CSS 计数器

CSS 自定义属性实战

CSS 媒体查询深入

CSS 关键帧动画深入

CSS Container Queries

CSS 自定义字体 @font-face

CSS 图标 — 使用图标字体

CSS 图片画廊

CSS 提示框 Tooltip

CSS object-fit 图片适配

CSS 多列布局

CSS 选择器完全指南 — 从基础到高级

CSS 逻辑属性 Logical Properties

CSS color-scheme 颜色方案

CSS prefers-reduced-motion 减弱动画

CSS font-variant 字体变体

CSS Scroll-Driven Animations 滚动驱动动画

CSS Subgrid 子网格

CSS text-wrap 文本换行控制

CSS @layer 级联层

CSS backdrop-filter 背景滤镜

CSS 盒模型深入理解 — content、padding、border、margin

CSS 动画时间线 scroll()

CSS mix-blend-mode 混合模式

CSS Masking 遮罩与裁剪

CSS @layer 实战项目组织

CSS 现代颜色函数

CSS 伪类大全

CSS 容器查询单位