css - 是否有任何 RMarkdown“ioslides-CSS”参考指南？

Question

我用谷歌搜索了一下，但似乎找不到 RMarkdown-CSS 参考的“完整”参考。

我发现了以下（且有用的）资源：

• RMarkdown 备忘单
• RMarkdown 参考
• RMarkdown HTML 文档格式
• RMarkdown，带有 ioslides 的演示文稿

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

例如，我想更改幻灯片背景颜色、标题颜色和数字格式。我通过阅读 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;
}

最后的问题：

如何使幻灯片编号变为绿色？

更一般地说

是否有可以通过 CSS 设置样式的 RMarkdown ioslides HTML 标签的完整参考？

Answer 1

要回答您的第一个问题：

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

关于第二个问题，或者我是如何得出第一个问题的答案的：

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

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

您可以清楚地识别属性内幻灯片编号的定义content。所以这个 CSS 影响的不是幻灯片元素，而是它“正下方”的空间。只需复制并粘贴 CSS 选择器并添加或编辑您需要的样式。

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

Answer 2

我找不到适合 ioslides（或一般的 RMarkdown）的教程。尽管如此，这里还是一个很好的、友好的、非常实用的教程，教你如何编写自己的 CSS。