Scoped CSS 样式

默认主题能满足多数场景，但自定义配色、间距、强调效果时需要在幻灯片中直接写 CSS。Slidev 提供灵活的分层样式机制：页级局部样式、全局样式与独立样式块。

style 块语法

在 slides.md 中，使用 HTML 的 style 标签即可嵌入 CSS：

<style>
h1 {
  color: #42b883;
}
</style>

• style 块写在幻灯片的任意位置
• 默认行为：样式作用域限定在该页之后的所有页面（Slidev 的继承式作用域）
• 块内是标准 CSS，可写任意选择器

局部样式 style scoped

scoped 让样式只作用于当前幻灯片，不会泄漏到后续页面：

<style scoped>
h1 {
  font-size: 3rem;
}
p {
  color: gray;
}
</style>

作用规则：

写法	作用范围
<style>	当前页及之后所有页（继承）
<style scoped>	仅当前页
<style global>	全部幻灯片（全局）

实际使用中推荐优先 scoped，避免样式互相污染；需要全稿统一的基调再考虑全局。

全局样式 style global

global 作用于整份演示文稿，适合定义通用变量、统一字体、复用的工具类：

<style global>
:root {
  --brand-color: #42b883;
}
h1 {
  font-family: 'Noto Sans SC', sans-serif;
}
.badge {
  background: #f3f4f6;
  border-radius: 6px;
  padding: 4px 10px;
}
</style>

• 写在任意页都会全稿生效
• 配合 CSS 变量（--xxx）实现主题化设计

分隔符 ---css---

Slidev 支持用 ---css--- 分隔符把样式独立成块，与页面内容解耦，结构更清晰：

# 标题页

内容...

---css---

<style>
h1 {
  text-align: center;
}
</style>

• ---css--- 之后的内容作为纯样式区，不渲染为幻灯片
• 适合集中管理全局样式与自定义类

自定义幻灯片样式示例

重点强调框

<style scoped>
.box {
  border-left: 4px solid #42b883;
  background: #f6fffa;
  padding: 12px 16px;
  border-radius: 6px;
}
</style>

::div{class="box"}

**注意**：这里是一条强调信息。

::

统一页面间距

<style scoped>
.slide-content {
  padding: 2rem 3rem;
}
</style>

字体与配色

<style global>
h1, h2, h3 {
  color: #2c3e50;
}
code {
  color: #e74c3c;
}
</style>

样式优先级速查

来源	优先级	说明
主题自带样式	最低	默认外观
<style>（继承式）	中	当前页起生效
<style scoped>	中	仅当前页
<style global>	中	全稿生效
组件类 / 内联属性	高	MDC 附加 class 与内联 style
!important	最高	慎用，破坏可维护性

CSS 选择器的具体性（specificity）仍按标准规则生效，同级来源时越靠后定义的规则覆盖越靠前。

样式组织建议

场景	推荐方式
单页微调	<style scoped>
全稿统一基调	<style global> 或 ---css--- 块
主题级定制	弹出主题目录修改主题样式文件
跨文稿复用	自定义布局（layouts 目录）内置样式

掌握 Scoped CSS 后，演示文稿就能脱离默认模板的"千人一面"，做出贴合主题的视觉设计。