1. 选择器入门

CSS通过选择器定位HTML元素，常见的类型包括：

  • 元素选择器（如 p）
  • 类选择器（如 .header）
  • ID选择器（如 #main）
  • 属性选择器（如 [href*="example"]）
  • 通配符选择器（*）
css_selector

2. 盒模型结构

每个元素由四个部分组成：

  • 内容（content）
  • 内边距（padding）
  • 边框（border）
  • 外边距（margin）
box_model
[深入理解盒模型原理](/design-resources/learning-path/zh-cn/css-box-model)

3. 布局方式

掌握基础布局技巧：

  • Flex布局（弹性盒子）
  • Grid布局（网格系统）
  • 定位（position属性）
  • 浮动（float属性）
flex_layout
[探索CSS进阶布局](/design-resources/learning-path/zh-cn/css-layout)

4. 样式属性实践

常用属性包括：

  • 颜色（color/background-color）
  • 字体（font-family/font-size）
  • 背景（background-image/background-repeat）
  • 变换（transform属性）
css_properties
[实战CSS动画效果](/design-resources/learning-path/zh-cn/css-animation)