HTML 字体样式——如何使用 HTML 标签更改文本颜色和大小

当你在 HTML 中编码并添加一些文本时，你想让文本看起来不错。

为此，你需要通过 CSS 的 color 和 font-size 属性更改它们的外观。

在本教程中，我将向你展示两种美化 HTML 文本的方法。

基本 `font-size` 语法

selector {
     font-size: value;
     color: value;
}

你可以使用 color 和 font-size 属性在文本标签内更改文本的颜色和大小。这被称为内联 CSS。你可以使用 HTML 中的 style 属性来实现。

在下面的 HTML 代码中，我们将更改 freeCodeCamp 文本的颜色和大小。

<h1>freeCodeCamp</h1>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

在浏览器中是这样的：

要更改文本的大小，你将使用 style 属性，然后使用 font-size 属性设置一个值，如下所示：

<h1 style="font-size: 4rem">freeCodeCamp</h1>

在浏览器中显示如下：

如果你想知道 4rem 是什么，它是一个度量单位，等于 64px，因为 16px 等于 1rem，除非您将根 font-size（html）更改为另一个值。

要更改文本的颜色，可以使用 style 属性，然后使用 color 属性设置一个值：

<h1 style="color: #2ecc71">freeCodeCamp</h1>

在浏览器中显示如下：

结合 font-size 和 color 属性在浏览器中显示如下：

代码：

<h1 style="font-size: 4rem; color: #2ecc71">freeCodeCamp</h1>

你还可以更改外部样式表中文本的颜色和大小。最重要的是，你必须在 HTML 的 head 部分链接外部 CSS。

基本语法如下所示：

<link rel="stylesheet" href="path-to-css-file">

现在，要更改 freeCodeCamp 文本的大小和颜色，你需要在样式表中选择它并为其应用适当的属性和值。

记住这是我们简单的 HTML 代码：

<h1>freeCodeCamp</h1>

你可以通过选择元素（h1）并为颜色和字体大小属性赋值来更改文本的颜色和大小：

 h1 {
    color: #2ecc71;
    font-size: 4rem;
}

浏览器中显示一样的效果：

我希望本教程能让你了解如何更改 HTML 文本的大小和颜色，从而使它们看起来更好。

感谢你阅读本文。