css - 如何在 ioslide 演示文稿中使用自定义 CSS 定位特定幻灯片？

Question

阅读 this介绍性文本，我认为将特定幻灯片上的正文或元素符号点涂成绿色很简单。我创建了自己的包含以下行的 css 文件:

body p {
 font-size: 24px;
 font-family: Frutiger Light;
 color: orange;
}

li {
 font-family: Frutiger Light;
 font-size: 20px;
 color: green;
}

.change {
 color: green;
}

并通过将 {.change} 添加到我在 rmarkdown 文件中的标题来引用 css 类更改。然而，这完全被忽略了。我迷路了，非常感谢有关如何解决此问题的提示。

Here是一个简单的可重现的例子。请确保 css 位于与 rmd 相同的文件夹中。

Answer 1

这实际上取决于您想要设计什么风格。 ioslides 使用 <article> 管理每张幻灯片的“内容”**给定一个 id与幻灯片的名称。例如，如果您在 R Markdown 文件中执行以下操作:

## Introduction

* Bullet 1
* Bullet 2

这将(在 knit 之后)呈现为类似于以下内容的 html:

<hgroup> <h2>Introduction</h2> </hgroup>
<article  id="introduction">
<ul>
  <li>Bullet 1</li>
  <li>Bullet 2</li>
</ul>
</article>

这意味着您可以使用您的 .css 来定位 <li>幻灯片上的元素符号就像这样 - 非常愚蠢的例子，但你会立即看到你是否做对了(关于这个 here 的正确文档):

#introduction ul li {
    font-size: 50px;
}

** 我说的内容那里含糊不清，作为整个<slide>的管理是通过诸如“current”之类的可变类完成的，这使得定位特定幻灯片变得更加困难

编辑:如果你真的想要，你也可以直接在 .Rmd 中包含 css，使用上面的例子你可以在你的 .Rmd 中做:

<style type="text/css">
#introduction ul li {
  font-size: 50px;
} 
</style>

## Introduction

* Bullet 1
* Bullet 2