关于 R 中的 CSS 和 YAML 的问题

Question

首先，我知道可以使用 CSS 来格式化 YAML 中的内容。通过一些试验和错误，发现下面示例 YAML 中的标题是一个 h1。副标题在 p 下。试图让标题和副标题以最小的空间相互重叠。我尝试了各种各样的事情。比如调整 padding-bottom 和 margin-bottom （用于标题）和 padding-top 和 margin-top （用于字幕）。此外，在两个部分都添加了行高，但这并不能解决问题。我读过你可以用 div 标签做一些事情，但我不确定我将如何走这条路。任何想法将不胜感激。至于可重现性，这是 R-Studio 附带的示例演示文稿。文件>新文件>R markdown>ioslides。

   Something
   December 2020

目前是这样的

  Something
   

  December 2020

这就是现在的 YAML。

  title: Market Briefing
  subtitle: <span style="font-size:22px; font-family:'Arial'; color:#0A0A0A; font- 
  weight:normal">December 2020</span><br></br>
  author: <span style="font-size:18px; font-family:'Arial'; color:#0A0A0A; float:left; 
  font-weight:normal">Analysis Bureau</span>
  date: <span style="font-size:18px; font-family:'Arial'; color:#0A0A0A;font-style:normal; 
  float:left">2/2/2021</span>
  output: 
  ioslides_presentation:
  css: styles.css


  Here is the CSS that I am using

  h1{
 font-family:'Arial';
 font-size:52px !important;
 padding-bottom:0px;
 margin:0px;
 margin-bottom:-1000em
 color: #0A0A0A;
 }

 p{
 font-family:"Arial";
 font-size:18px !important;
 padding-bottom:0px;
 padding-top:0px;
 margin-top:-100px;
 margin:1px;
 color: #0A0A0A;
 line-height:1;
 }

Answer 1

不是答案，但我认为我正在寻找的东西无法完成。它不是 HTML 或 CSS 项目.. 不是真的。

Answer 2

CSS selectors 可以比您在 css 文件中使用的元素选择器更复杂。例如，您的 css 将为整个文档中的所有 h1 元素设置样式，但您可能只对标题幻灯片上的 h1 元素的样式感兴趣。

您知道许多浏览器（包括 RStudio 浏览器）中都提供的“检查元素”功能吗？这将帮助您确定引用您希望设置样式的元素的方式。大多数浏览器在右键菜单下提供此功能。

我建议不要在您的 yaml 中包含内联 css。将它包含在您的 css 文件中同样容易，而且只要您可以识别要使用的好的 css 选择器，这种方式就会更加简洁。

虽然我不确定您想要实现什么样的外观，但这里尝试实现您共享的内容。你可能不得不玩弄这个才能得到你想要的东西。

首先是css：

[data-config-title] {
  height: 60px;
}

[data-config-subtitle] {
  font-size: 22px;
  font-family: 'Arial';
  color: #0A0A0A;
  font-weight: normal
}

[data-config-presenter] {
  font-size: 18px; 
  font-family: 'Arial'; 
  color: #0A0A0A; 
  float:left; 
  font-weight: normal
}

body > slides > slide.title-slide.segue.nobackground.current > hgroup > p:nth-child(4) {
  font-size: 18px; 
  font-family: 'Arial'; 
  color: #0A0A0A;
  font-style: normal; 
  float: left;
}

在那里，我使用了 css 属性选择器来设置标题、副标题和作者元素的样式。我还使用了一个更复杂的 CSS 选择器来设置日期样式，因为该元素没有唯一的标识信息，例如标题、副标题和作者元素的属性。

您的主要问题是关于标题和副标题元素之间的间距，以及您希望如何缩小这个空间。在使用检查元素功能时，我可以看到这些元素周围的内边距、边框和边距都设置为 0。所以我决定将标题元素的高度从 91px 更改为 60px。这具有根据需要向上移动字幕的效果。

现在是 RMarkdown：

---
title: Market Briefing
subtitle: December 2020
author: Analysis Bureau
date: 2/2/2021
output: 
  ioslides_presentation:
    css: styles.css
---

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

## R Markdown

This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document.

## Slide with Bullets

- Bullet 1
- Bullet 2
- Bullet 3

## Slide with R Output

```{r cars, echo = TRUE}
summary(cars)
```

## Slide with Plot

```{r pressure}
plot(pressure)
```

这会产生一个标题幻灯片，如下所示：