如何更改html中的字体大小？

Question

我正在尝试制作一个网站，我想知道如何更改段落中文本的大小。我希望第 1 段比第 2 段大。大多少并不重要，只要大就行。我该怎么做？

我的代码如下：

p {
  color: red;
}

<p>Paragraph 1</p>
<p>Paragraph 2</p>

Answer 1

给他们上课，并将您的风格添加到课程中。

<style>
  p {
    color: red;
  }
  .paragraph1 {
    font-size: 18px;
  }
  .paragraph2 {
    font-size: 13px;
  }
</style>

<p class="paragraph1">Paragraph 1</p>
<p class="paragraph2">Paragraph 2</p>

检查这个示例

Answer 2

或者添加内联样式：

<p style="font-size:18px">Paragraph 1</p>
<p style="font-size:16px">Paragraph 2</p>

Answer 3

如果您只是想增加任何文档第一段的字体大小（在线出版物使用的效果），那么您可以使用第一个子伪类来实现所需的效果。

p:first-child
{
   font-size:   115%; // Will set the font size to be 115% of the original font-size for the p element.
}

但是，这将更改作为任何其他元素的第一个子元素的每个 p 元素的字体大小。如果您有兴趣设置 body 元素的第一个 p 元素的大小，请使用以下内容：

body > p:first-child
{
   font-size:   115%;
}

上面的代码仅适用于作为 body 元素的子元素的 p 元素。

Answer 4

如果您想在不添加类的情况下执行此操作...

p:first-child {
    font-size: 16px;
}

p:last-child {
    font-size: 12px;
}

或

p:nth-child(1) {
    font-size: 16px;
}

p:nth-child(2) {
    font-size: 12px;
}

Answer 5

您无法在 HTML 中执行此操作。你可以在 CSS 中。创建一个新的 CSS 文件并写入：

p {
 font-size: (some number);
}

如果这不起作用，请确保您没有任何“pre”标签，这会使您的代码变得更小。

Answer 6

您可以通过在段落标签中设置样式来做到这一点。例如，如果您想将字体大小更改为 28px。

<p style="font-size: 28px;"> Hello, World! </p>

您还可以通过设置来设置颜色：

<p style="color: blue;"> Hello, World! </p>

但是，如果您想在将字体大小和颜色添加到网站并使用它们之前预览它们（我建议这样做）。我建议提前测试它们，以便选择与背景形成鲜明对比的良好字体大小和颜色。如果您想这样做，但找不到其他任何内容，我建议您使用此网站：http://fontpreview.herokuapp.com/