[英]How can I target specific slides with custom CSS in ioslide presentation?
Reading this introductory text, I thought it is straightforward to color the body or bullet points on a specific slide green. 阅读此介绍性文字,我认为在特定的幻灯片绿色上为正文或项目符号着色很简单。 I created my own css file containing the following lines: 我创建了自己的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;
}
and referred to the css-class change by adding {.change} to my header in the rmarkdown file. 并通过在我的rmarkdown文件的标头中添加{.change}来引用CSS类更改。 However, this is completely ignored. 但是,这被完全忽略了。 I am lost and would very much appreciate a hint in how to solve this. 我迷路了,非常感谢如何解决此问题的提示。
Here is a simple reproducible example. 这是一个简单的可复制示例。 Please make sure that the css is located in the same folder than the rmd. 请确保css与rmd位于同一文件夹中。
This really depends on what exactly would you like to style. 这实际上取决于您想要的样式。 The ioslides manage the "content"** of each slide with an <article>
that is given an id
with the name of the slide. 幻灯片通过<article>
管理每个幻灯片的“内容” **,该<article>
被赋予id
和幻灯片的名称。 For example, if you do in your R Markdown file: 例如,如果在R Markdown文件中进行操作:
## Introduction
* Bullet 1
* Bullet 2
This will (after knit
) render into a html similar to: (在knit
之后)将呈现为类似于以下内容的html:
<hgroup> <h2>Introduction</h2> </hgroup>
<article id="introduction">
<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
</ul>
</article>
This means you can use your .css to target the <li>
bullets on that slide like so - very silly example, but you immediately see if you got it right (proper doc on this here ): 这意味着您可以像这样-非常愚蠢的示例,使用.css将幻灯片上的<li>
符号作为目标,但是您会立即知道它是否正确( 此处的正确文档):
#introduction ul li {
font-size: 50px;
}
** I said content there vaguely, as the management of the entire <slide>
is done via classes such as "current" which is variable and makes it more difficult to target a specific slide **我在那里模糊地说内容,因为整个<slide>
的管理都是通过诸如“ current”之类的类来完成的,该类是可变的,因此更难针对特定的幻灯片
EDIT: If you really want, you can also include the css directly in the .Rmd, using the example above you could do in your .Rmd: 编辑:如果您确实想要,也可以使用上面的示例在.Rmd中直接将CSS包含在.Rmd中:
<style type="text/css">
#introduction ul li {
font-size: 50px;
}
</style>
## Introduction
* Bullet 1
* Bullet 2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.