您好:我正在用 markdown 编写一些讲座并将它们转换为 reveal.js 幻灯片。老实说,它工作得很好,除了有一些我想修改的基本功能,但我只是不知道如何使用 CSS。
我怎样才能:
- 左对齐幻灯片上的大部分文本。
- 缩小大部分幻灯片正文的字体大小。一般来说,我想这样做,但我必须特别为引用页面这样做。
谢谢!!
最佳答案
第一步是转到 <head></head>
部分。在底部创建一个新的 <style></style>
自定义 CSS 样式的标记。
在 reveal.js 中对齐幻灯片上的一段文本
创建一个名为 left 的新类。
.left { }
在你的类(class)里,把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>
关于markdown - 为 reveal.js 演示文稿缩小字体大小和右对齐字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65585659/