本文档描述了 reveal.js 的 CSS 架构，重点关注样式的组织方式、主题系统的运作机制以及不同演示组件的样式设置。它解释了框架中使用的 SCSS 预处理、CSS 变量、组件结构和响应式设计原则。
有关使用内置主题的信息，请参阅 可用主题。有关创建自定义主题的信息，请参阅 创建自定义主题。
Reveal.js 使用 SCSS 作为 CSS 预处理器，它支持变量、嵌套、混合宏等高级功能，以创建可维护且灵活的样式系统。
来源：css/reveal.scss9-11 css/reveal.scss2188-2189
Reveal.js 使用带有 --r- 前缀的 CSS 自定义属性（变量）来进行主题设置和自定义。这些变量控制演示文稿的颜色、间距、尺寸和其他视觉方面。
来源：css/reveal.scss32-39 css/reveal.scss2077-2084
CSS 被组织成逻辑部分，每个部分负责设置演示框架的特定组件的样式。这种模块化方法使代码库更易于维护和理解。
| 组件部分 | 行范围 | 目的 |
|---|---|---|
| 全局样式 | 12-56 | 整个演示文稿的基础样式 |
| 片段 | 59-222 | 内容片段的动画和样式 |
| 默认元素样式 | 225-242 | HTML 元素的样式设置 |
| 控制 | 246-517 | 导航箭头和控件 |
| 进度条 | 570-603 | 幻灯片底部的进度指示器 |
| 幻灯片编号 | 606-629 | 幻灯片编号显示 |
| 幻灯片 | 632-749 | 核心幻灯片样式和定位 |
| 过渡效果 | 754-1107 | 幻灯片切换效果 |
| 背景 | 1126-1307 | 幻灯片背景处理 |
| 概览模式 | 1323-1392 | 缩略图概览样式 |
| 滚动视图 | 1953-2181 | 连续滚动视图 |
| 打印样式 | 2188-2189 | PDF 导出和打印的样式 |
主题系统使用 CSS 变量，可以轻松进行自定义，而无需修改核心样式。主题可以覆盖这些变量以创建不同的视觉外观。
Reveal.js 包含媒体查询，以适应不同屏幕尺寸和设备上的演示文稿。这确保了桌面、平板电脑和移动设备上的最佳体验。
CSS 使用定向的媒体查询，根据屏幕尺寸调整布局、尺寸和控件。
适用于较大屏幕上的边缘对齐控件
适用于较小屏幕上调整演讲者备注的布局
来源：css/reveal.scss42-46 css/reveal.scss520-566 css/reveal.scss1855-1871
Reveal.js 利用多种 SCSS 功能来创建可维护且灵活的样式。
SCSS 变量（使用 $ 前缀）用于保持值的一致性，而混合宏则提供可重用的样式模式。
复杂的混合宏系统处理幻灯片过渡，提供一致且可重用的过渡效果。
来源：css/reveal.scss267-283 css/reveal.scss758-798
Reveal.js 支持多种演示模式，每种模式都有特定的样式要求。
概览模式以网格形式显示幻灯片缩略图，并具有指示当前幻灯片的独特样式。
支持从右到左的文本方向，并有专门的样式。
滚动视图允许连续滚动幻灯片，具有专门的样式。
来源：css/reveal.scss1327-1362 css/reveal.scss1399-1422 css/reveal.scss1958-2010
片段是演示过程中逐步显示出的元素。它们具有特定的样式和过渡效果。
Reveal.js 包含用于打印和 PDF 导出的专用样式，确保演示文稿可以正确转换为静态格式。
打印样式在主样式表的末尾导入。
来源：css/reveal.scss1171-1174 css/reveal.scss2188-2189
reveal.js 的 CSS 架构是一个组织良好的系统，构建于 SCSS 之上，利用 CSS 变量、混合宏和组件式结构。这种架构能够轻松实现主题化、响应式设计以及对各种演示模式的支持，同时保持代码库的整洁和可维护性。
使用带有 --r- 前缀的 CSS 变量提供了一个一致的主题系统，主题可以利用该系统创建不同的视觉样式，而无需修改核心 CSS。组件式的组织将相关的样式放在一起，使代码库更易于导航和维护。