为reveal.js 演示缩小字体大小和右对齐字体

问题描述

你好：我正在用 Markdown 编写一些讲座并将它们转换为 Reveal.js 幻灯片。老实说，它工作得很好，除了我想修改一些基本功能，但我不知道如何处理 CSS。

我该怎么做：

左对齐幻灯片上的大部分文本。
缩小大多数幻灯片正文的字体大小。我想在一般情况下这样做，但我特别必须为参考页面这样做。

谢谢！！

解决方法

第一步是转到 <head></head> 部分。在底部为您的自定义 CSS 样式创建一个新的 <style></style> 标记。

在reveal.js中对齐幻灯片上的一段文本

创建一个名为 left 的新类。 .left { } 在您的班级中，输入 text-align: left;。您的代码应如下所示：

<style>
  .left {
    text-align: left;
  }
</style>

在您的 HTML 中，将 left 类添加到您的任何元素。例如。

<section class="left">Slide 1</section>

或者：

<section>
  I'm just normal text.
  <p class="left">But I'm not!</p>
</section>

在reveal.js中改变元素的字体大小

首先要做的是创建一个新类，就像我们为对齐文本所做的那样。

<head>
  <!-- Custom Styles For Our Presentation -->
  <style>
    .left {
      text-align: left;
    }
    
    .size {
      
    }
  </style>
</head>

然后添加以下内容： font-size: /*custom font size*/; 您可以在那里更改大小。 CSS 还为此提供了一些内置样式，例如 large、medium 和 small。之后，只需将该类添加到您选择的元素中。您还可以将类添加到一个元素，如下所示：<section class="left size">Slide 1</section>。您的完成代码可能是这样的：

<head>
  <!-- Custom Styles For Our Presentation -->
  <style>
    .left {
      text-align: left;
    }
    
    .size {
      font-size: 80px;
    }
  </style>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section class="left size">Slide 1</section>
      <section>Slide 2 <p class="left">Text aligned left</p></section>
    </div>
  </div>
</body>

pandoc reveal.js