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

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

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

基本 font-size 语法selector {

font-size: value;

color: value;

}

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

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

freeCodeCamp

body {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

在浏览器中是这样的：

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

freeCodeCamp

在浏览器中显示如下：

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

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

freeCodeCamp

在浏览器中显示如下：

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

代码：

freeCodeCamp

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

基本语法如下所示：

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

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

freeCodeCamp

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

h1 {

color: #2ecc71;

font-size: 4rem;

}

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

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

感谢你阅读本文。

原文：HTML Font Style – How to Change Text Color and Size with an HTML Tag，作者：Kolade Chris