是否有任何RMarkdown「ioslides-CSS」參考指南？

Question

我google了一下，但我似乎無法找到RMarkdown-CSS參考的「完整」引用。

我發現下面的（和有用）資源：

• RMarkdown cheatsheet
• RMarkdown reference
• RMarkdown HTML document format
• RMarkdown, Presentations with 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> 

關於第二個或我怎麼拿出回答第一個問題：

沒有參考本身。這裏的問題是，幻燈片編號的外觀被定義爲pseudo class（如:after）：

如果你點擊了這條線，你找到那個僞元素對應的樣式：

您可以清楚地識別屬性content中的幻燈片編號的定義。所以這個CSS不會影響幻燈片元素，而是會影響「正下方」的空間。只需複製並粘貼CSS選擇器並添加或編輯您需要的樣式。

在這種情況下，如果我無法通過樹木看到森林，我通常會檢查可在github處找到的默認樣式表。如果你Ctrl + F爲:after（知道它可能被定義爲這樣）或只是slide-num你會發現相應的代碼行相當快。