2017-10-13 79 views
2

我google了一下,但我似乎无法找到RMarkdown-CSS参考的“完整”引用。是否有任何RMarkdown“ioslides-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; 
} 

最后一个问题:

我怎么能使幻灯片数字绿色?

一般多

是否有任何完整参考它可以通过CSS设置样式RMarkdown ioslides HTML标签?

回答

2

要回答你的第一个问题:

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

关于第二个或我怎么拿出回答第一个问题

没有参考本身。这里的问题是,幻灯片编号的外观被定义为pseudo class(如:after):

enter image description here

如果你点击了这条线,你找到那个伪元素对应的样式:

enter image description here

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

在这种情况下,如果我无法通过树木看到森林,我通常会检查可在github处找到的默认样式表。如果你Ctrl + F:after(知道它可能被定义为这样)或只是slide-num你会发现相应的代码行相当快。

+0

谢谢,我只是希望比原来的CSS更“结构化”...... –

相关问题