简体   繁体   English

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

[英]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.

相关问题 我可以使用特定参数定位CSS样式吗? - Can I target CSS styles with specific parameters? 我可以按特定顺序定位 css 选择器吗? - Can I target css selectors in specific order? CSS 动画:如何在向上滑动时显示图像? - CSS Animations: How can I reveal an image as it slides up? 如何使用html-inline将我的css中添加的自定义字体添加到我的reveal.js演示文稿中? - How can I add the custom fonts added in my css to my reveal.js presentation with html-inline? 如何加快CSS垂直滑块中的幻灯片? - How can I speed up the slides in my CSS vertical slider? 如何在不使用indexOf方法的情况下定位具有特定内联样式的特定dom css类 - How can I target a specific dom css class that has a specific inline style without using indexOf method 如何使用 CSS3 媒体查询定位特定的 iPad 设备? - How can I target specific iPad devices with CSS3 media queries? 如何在CSS中定位这些tds? - How can I target these tds in css? 我可以将CSS中另一个元素悬停的特定元素作为目标 - Can I target a specific element from another element hover in css 我可以使用react或CSS来定位特定组件以更改onclick吗? - Can I use react or CSS to target a specific component to change onclick?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM