本文档介绍了 reveal.js 的样式系统和主题功能。它涵盖了核心 CSS 的结构、主题的应用方式，以及如何自定义或创建自己的主题。关于片段或背景等特定演示文稿元素的更多信息，请参阅 创建演示文稿。有关打印和 PDF 导出配置的详细信息，请参阅 打印和 PDF 导出。
reveal.js 的样式系统建立在模块化架构之上，将核心演示功能与视觉主题分离开来。这种分离使得在保持功能一致性的同时，能够轻松切换主题。
来源
reveal.js 的核心 CSS 组织成几个功能区
该框架使用 CSS 变量（前缀为 --r-）来允许主题轻松覆盖默认样式。这些变量控制演示文稿的颜色、排版、间距和其他视觉方面。
来源
reveal.js 的主要样式表组件包括
| 组件 | 目的 | 主要功能 |
|---|---|---|
| 全局容器 | 定义视口和演示文稿容器 | 响应式尺寸、背景设置 |
| 幻灯片元素 | 幻灯片内容的样式 | 排版、列表、代码块、表格 |
| 导航 | 控件、进度条 | 用于导航的交互元素 |
| 过渡效果 | 幻灯片过渡 | 各种动画类型（淡入淡出、滑动、凸起等） |
| 打印 | 打印和 PDF 导出 | 优化打印材料的布局 |
来源
reveal.js 的主题系统采用模板化方法，所有主题都继承自通用的基础模板。这确保了主题之间的一致性，同时允许进行视觉自定义。
主题是通过一个包含以下组件的模板系统构建的
来源
Reveal.js 包含多个内置主题，可以通过加载相应的 CSS 文件来应用
| 主题名称 | 样式特点 | 最适合 |
|---|---|---|
| 黑色 | 深色背景，白色文字 | 通用演示 |
| 白色 | 白色背景，深色文字 | 打印友好型演示 |
| League | 深蓝色背景 | 技术演示 |
| 米色 | 浅中性背景 | 更柔和的正式演示 |
| Sky (天空) | 浅蓝色渐变 | 活泼的演示 |
| 夜色 | 深色背景，醒目的高亮 | 戏剧化演示 |
| 衬线 | 衬线字体，经典风格 | 正式或学术内容 |
| 简单 | 极简风格 | 干净、专注的内容 |
| Solarized | Ethan Schoonover 的配色方案 | 代码密集型演示 |
要应用主题，请在演示文稿 HTML 中包含相应的 CSS 文件
来源
reveal.js 的样式灵活性核心在于其全面的 CSS 变量系统。这些变量（前缀为 --r-）允许主题自定义演示文稿外观的几乎所有方面。
来源
在 reveal.js 中，可以通过扩展主题模板系统来创建自定义主题。
.scss 文件，导入主题模板主题模板提供了自定义演示文稿各种方面的钩子
| 自定义区域 | 变量 |
|---|---|
| 颜色 | 背景、文本、链接、选择 |
| 排版 | 字体、大小、行高、变换 |
| 元素样式 | 标题、链接、块、代码 |
| 过渡效果 | 动画类型和速度 |
| 控制 | 导航控件样式 |
基本自定义主题 SCSS 文件示例
来源
Reveal.js 为各种演示文稿元素提供样式
该框架通过字体、大小、颜色和间距的变量来设置一致的排版。标题（h1-h6）、段落、列表和其他文本元素具有特定的样式，可以通过主题进行自定义。
来源
代码块具有特殊的样式，通过 highlight.js 插件支持语法高亮
来源
该框架为表格、图片和媒体元素提供了响应式样式，以确保它们在不同大小的演示文稿中都能正确显示。
来源
Reveal.js 在幻灯片之间导航时包含多种过渡类型
| 过渡 | 描述 | 效果 |
|---|---|---|
| 滑动 | 默认水平滑动 | 幻灯片水平移动 |
| 淡入淡出 | 简单的淡入淡出过渡 | 当前幻灯片淡出，下一张淡入 |
| 凸起 | 3D 旋转（默认） | 幻灯片在 3D 空间中旋转 |
| 凹陷 | 反向 3D 旋转 | 替代 3D 旋转 |
| 缩放 | 缩放过渡 | 幻灯片放大/缩小 |
| 无 | 无过渡 | 幻灯片之间的即时切换 |
来源
样式系统包含针对打印和 PDF 导出的特定调整
来源
Reveal.js 包含响应式设计功能，可确保演示文稿在不同屏幕尺寸上都能正常显示
来源
reveal.js 的样式和主题系统为创建视觉吸引力的演示文稿提供了灵活的基础。通过将核心功能与主题分开，并广泛使用 CSS 变量，该框架允许在需要时轻松切换主题和进行深度定制。
有关特定演示文稿元素的更多信息，请参阅 创建演示文稿。有关打印和 PDF 的特定配置，请参阅 打印和 PDF 导出。