关于 CSS 和 R 中的 YAML 的问题

Question

首先，我知道可以使用 CSS 来格式化 YAML 中的内容。通过一些尝试和错误，发现下面示例 YAML 中的标题是一个 h1。副标题在 p.试图让标题和副标题以最小的 space 彼此重叠。我尝试了各种各样的事情。比如调整padding-bottom和margin-bottom（标题）和padding-top和margin-top（副标题）。此外，在两个部分都添加了行高，但并没有解决问题。我读过您可以使用 div 标签做一些事情，但我不确定我将如何走这条路。任何想法将不胜感激。至于可重现性，这是R-Studio自带的sample presentation。文件>新建文件>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 选择器来设置日期样式，因为该元素没有唯一标识信息，例如标题、副标题和作者元素的属性。

您的主要问题是关于标题和副标题元素之间的间距，以及您希望这个 space 更小的间距。在使用 inspect element 功能时，我能够看到这些元素周围的 padding、border 和 margin 都设置为 0。因此我决定将 title 元素的高度从 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)
```

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

关于 CSS 和 R 中的 YAML 的问题

Questions concerning CSS and the YAML in R

html

css

r

margin