多个RMarkdown文件调用外部CSS为div设置样式失效问题求助

1 YAML配置缩进错误 #

RMarkdown的yaml头部中，css参数是html_document输出格式的子参数，必须缩进2个空格，你原代码中css参数和html_document平级，导致外部CSS没有被正确加载。

2 CSS代码语法错误 #

你现有CSS中存在两处语法问题，会导致整条样式规则失效：

• font-size属性和属性值被错误换行拆分
• padding属性末尾多了无效的80px独立行

3 空样式覆盖问题 #

你RMarkdown正文中写的空div.positive、div.negative样式优先级高于外部CSS的.positive、.negative规则，即使外部CSS加载成功也会被空样式覆盖。

修复后代码示例 #

修复后的style.css内容 #

div.positive {
  background-color: #006B35;
  color: #ffffff; 
  font-size: 16px; 
  text-align:left;
  vertical-align: middle;
  padding: 0 10px 80px 10px;
}

div.negative {
  background-color: #C83C4D;
  color: #ffffff; 
  font-size: 16px; 
  text-align:left;
  vertical-align: middle;
  padding: 0 10px 80px 10px;
}

修复后的RMarkdown文件内容 #

---
title: "Untitled"
output: 
  html_document:
    css: "style.css"
---

<div class="positive">
Green background div
</div>

<div class="negative">
Red background div
</div>

额外注意事项 #

• 确保style.css文件与RMarkdown文件放在同一目录下，若放在子目录需填写正确相对路径
• 后续所有需要复用该样式的RMarkdown文档，仅需在yaml头的html_document下增加缩进后的css: "style.css"配置即可，无需在正文中加任何style相关代码，修改样式时仅更新这一个css文件即可全量生效。

内容的提问来源于stack exchange，提问作者Ryan Garnett