02CSS 基础

从「CSS 是什么」到「选择器进阶」，7 节课打牢样式地基。 每个属性都配属性值分析表，每个知识点都配可随手修改的实时实验台。

7 节课 40+ 个动手实验 建议按顺序学习

课程列表

01

CSS 是什么

装修队登场：语法句式解剖、浏览器生效流水线、层叠与继承两个灵魂概念。

概念语法层叠继承 02

引入与基础选择器

行内 / 内部 / 外部三种引入方式，元素、类、id、通配符与分组选择器。

linkclass / id权重初步 03

文本与字体

font 一族与 text 一族全解，颜色写法与 px / em / rem 单位抉择。

fonttext颜色单位 04

背景与边框

background 全家桶（颜色 / 图 / 平铺 / 定位 / 尺寸 / 简写）与 border 三件套、圆角、轮廓。

backgroundborderradius 05

盒模型

content / padding / border / margin 四层结构，box-sizing 两种算法，外边距折叠。

盒模型box-sizingmargin 折叠 06

显示与尺寸

display 三大门派（块级 / 行内 / 行内块），宽高与 min / max 约束，display 与 visibility 之别。

display宽高visibility 07

选择器进阶

四种组合器、高频伪类、伪元素，以及优先级（Specificity）的精确计算。

组合器伪类伪元素优先级

本章你将学会

  • 看懂并写出任何一条 CSS 规则，知道它何时生效、为何不生效
  • 熟练使用三种引入方式，能按场景选择并说出取舍
  • 文本、字体、背景、边框、盒模型、显示与尺寸六大类核心属性及其全部常用属性值
  • 用基础选择器 + 进阶选择器精准命中任何元素，并能口算优先级

实验台使用指南

本站每个知识点都配有「左代码、右预览」的实验台，几个隐藏技能先交底：

操作效果
直接改左侧代码右侧预览 0.35 秒内自动刷新，所见即所得
拖拽中间分隔条左右分屏比例任意调整，双击分隔条恢复 1:1
工具栏「主题」下拉暖墨 / 暖纸 / 夜幕 / 抹茶四套语法高亮主题，全站记忆
Tab 键在代码框内缩进 4 个空格
「重置」按钮改乱了也不怕，一键回到初始代码
顶栏「课程大纲 / 扩展阅读」左侧抽屉跳任意课时，右侧边栏去 MDN / 菜鸟深挖
学习建议：每个实验台都至少改三处值。看懂不如改懂，改懂不如改坏再修好。