2

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

我怎样才能：

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

谢谢！！

4

1 回答 1

2

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

在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>
于 2021-01-19T13:20:54.573 回答