有没有RMarkdown "ioslides-CSS"参考指南？

Question

我用谷歌搜索了一下，但似乎找不到 "full" 参考 RMarkdown-CSS 参考。

我找到了以下（有用的）资源：

但我真的找不到所有可自定义元素的完整参考。

例如，我想更改幻灯片背景颜色、标题颜色和数字格式。我通过阅读 HTML 输出（使用浏览器检查器）设法设置了前者的 CSS 属性（背景和标题 -headers btw-），但我真的不知道我在做什么必须设置幻灯片编号的样式。

下面是一个小例子：

---
title: "The title"
author: "Zamengo Bruno"
date: '`r format(Sys.Date(), "%d/%m/%Y")`'
output: 
  ioslides_presentation: 
    css: styles.css
    widescreen: yes
    theme: yeti
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## First slide 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor neque ac euismod ornare. Cras scelerisque ante velit, volutpat rhoncus massa vehicula vitae. Donec viverra tincidunt velit id egestas. Quisque a aliquam quam. Phasellus lorem lectus, imperdiet ut libero a, vulputate lobortis arcu. Sed consequat fringilla nulla sed tempor. Proin laoreet massa sed vestibulum tristique. Nulla non volutpat arcu, a semper arcu. Etiam lobortis augue in felis commodo condimentum. Quisque interdum sed lorem in varius. Sed at massa quis ipsum semper vestibulum pharetra vel nisl. 

## Second one 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor neque ac euismod ornare. Cras scelerisque ante velit, volutpat rhoncus massa vehicula vitae. Donec viverra tincidunt velit id egestas. Quisque a aliquam quam. Phasellus lorem lectus, imperdiet ut libero a, vulputate lobortis arcu. Sed consequat fringilla nulla sed tempor. Proin laoreet massa sed vestibulum tristique. Nulla non volutpat arcu, a semper arcu. Etiam lobortis augue in felis commodo condimentum. Quisque interdum sed lorem in varius. Sed at massa quis ipsum semper vestibulum pharetra vel nisl.

这是（非常非常简单）CSS 文件 styles.css:

slide {
    background-color: #E0E9E3;
}

h1, h2, h3, h4, h5, h6, h7, h8 {
    color: #99CC00;
}

最后的问题：

How can I make slide numbers green?

更普遍

Is there any complete reference to RMarkdown ioslides HTML tags which can be styled via CSS?

Answer 1

回答你的第一个问题：

<style>
slides > slide:not(.nobackground):after {
  color: green;
}
</style>

关于第二个或者我是怎么想出第一个问题的答案的:

本身没有参考。这里的问题是幻灯片编号的外观定义为pseudo class（例如:after）：

如果您单击该行，您会找到该伪元素的相应样式：

您可以清楚地识别属性 content 中幻灯片编号的定义。所以这个 CSS 影响的不是幻灯片元素，而是 space "right underneath" 它。只需复制并粘贴 CSS 选择器并添加或编辑您需要的样式。

在这种情况下，如果我不能透过树木看到森林，我通常会检查可以在 github 找到的默认样式表。如果你 Ctrl + F for :after （知道它可能被定义为这样）或者只是 slide-num 你会很快找到相应的代码行。

Answer 2

我找不到针对 ioslides（或一般的 RMarkdown）量身定制的教程。尽管如此，here is 一个不错的、友好的、非常实用的教程，关于如何编写您自己的 CSS 一般情况。

有没有RMarkdown "ioslides-CSS"参考指南？

Is there any RMarkdown "ioslides-CSS" reference guide?

css

r

r-markdown

ioslides