# Marp 主题 CSS 创建指南
如何基于官方 Marpit 主题 CSS 规范创建自定义主题。
官方文档：https://marpit.marp.app/theme-css
## 基础主题结构
### @theme 元数据 (必需)
主题 CSS 需要 `@theme` 元数据：
css
/* @theme 主题名称 */
没有此元数据，它将不会被识别为主题。
### 基础主题 CSS 示例
css
/* @theme 我的主题 */
section {
background-color: #fff;
color: #333;
font-size: 24px;
padding: 60px;
}
h1 {
color: #1e40af;
font-size: 48px;
}
h2 {
color: #3b82f6;
font-size: 36px;
}
## HTML 结构
Marp 生成的 HTML 结构：
html
每一页幻灯片都生成为一个 `
` 元素。
## 幻灯片尺寸
### 默认尺寸
css
section {
width: 1280px;
height: 720px;
}
16:9 比例 (1280x720) 是默认值。
### 自定义尺寸定义
css
/* @theme 我的主题 */
/* @size 4:3 960px 720px */
section {
width: 960px;
height: 720px;
}
可以使用 `@size` 元数据定义自定义尺寸。
## 分页
设置页码样式：
css
section::after {
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
position: absolute;
right: 30px;
bottom: 20px;
font-size: 16px;
color: #666;
}
**可用属性**：
- `data-marpit-pagination` - 当前页码
- `data-marpit-pagination-total` - 总页数
## 页眉和页脚
### 页眉
css
header {
position: absolute;
top: 30px;
left: 60px;
right: 60px;
font-size: 18px;
color: #666;
}
### 页脚
css
footer {
position: absolute;
bottom: 30px;
left: 60px;
right: 60px;
font-size: 18px;
color: #666;
}
## 主题扩展与继承
### 使用 @import 加载
css
/* @theme 我的扩展主题 */
@import 'default';
section {
background-color: #f0f0f0;
}
你可以扩展现有的主题。
### 使用 @import-theme 继承命名主题
css
/* @theme 我的主题 */
@import-theme 'default';
h1 {
color: red;
}
使用 `@import-theme` 允许按主题名称加载。
## 基于类的变体
### lead 类 (标题页)
css
section.lead {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
section.lead h1 {
font-size: 64px;
}
### invert 类 (反转颜色)
css
section.invert {
background-color: #000;
color: #fff;
}
sectio 
粤公网安备44030002003366号