CSS 入门教程通过 9 个引导实验，带你动手学习如何为 HTML 添加样式。你将从创建并链接外部样式表开始，逐步掌握用于文本、颜色、背景、间距、尺寸和常见页面元素的选择器与属性。
每个实验都聚焦一个可以在浏览器预览中直接观察的小变化。课程从 CSS 基础推进到 Flexbox、横向列表导航、易读表格，并在最后通过 CDN 初步接触 Tailwind CSS 实用类。
你将学到什么
完成本课程后，你将能够：
- 创建外部样式表并链接到 HTML，使用元素、类、ID、分组和后代选择器定位内容
- 使用颜色、像素字号、字重、对齐、行高和字体系列属性设置文本样式
- 应用十六进制与 RGB 颜色、背景图像、重复控制和背景定位
- 根据 CSS 盒模型理解内容宽度、内边距、边框、外边距及
box-sizing: border-box - 使用方向、分布、对齐和换行控制构建基础 Flexbox 布局
- 将列表改造成横向导航，并通过边框、间距、表头和对齐提升表格可读性
- 通过 CDN 加载 Tailwind CSS，并组合基础背景、文本、内边距和 Flexbox 实用类
本课程适合谁
本课程适合完全没有 CSS 经验的初学者、准备为简单页面添加视觉样式的 HTML 学习者，以及希望快速复习核心样式机制的开发者。
前置要求： 建议了解基本 HTML 元素和属性。实验会提供准备好的 HTML 文件，但熟悉 head、body、div、列表、表格、class 和 ID，有助于你把注意力集中在 CSS 上。
学习环境： 全部 9 个实验都在基于浏览器的 Ubuntu 22.04 WebIDE 中运行，并提供项目文件和 Web 8080 预览。你将直接编辑 HTML 与 CSS，通过刷新或切换预览观察每次视觉变化。
常见问题
学习前需要掌握 HTML 吗？
无需高级 HTML，但基础知识很有帮助，因为 CSS 是针对 HTML 结构进行选择和样式设置的。练习主要关注 CSS，通常会提供页面标记，而不会深入教授如何从头创建 HTML 文档。
课程会完成一个完整网站或作品集吗？
不会。课程由 9 个聚焦明确的引导实验组成，没有结课项目或独立挑战。你会修改准备好的页面，从而观察单个选择器和属性的具体表现。
课程会教授响应式网页设计吗？
只涉及入门内容。Flexbox 实验涵盖方向、对齐、分布和换行，这些知识有助于构建灵活布局；但课程不包括媒体查询、CSS Grid、断点或完整的移动优先设计流程。
Tailwind CSS 会讲到什么程度？
一个实验通过 CDN 介绍 Tailwind，并使用少量背景、文本、内边距和 Flexbox 实用类。课程不涵盖构建工具安装、配置、响应式变体、状态变体、组件设计或生产环境优化。
