如何用HTML标签改变文本的颜色和大小

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

而要做到这一点，你需要通过CSS的color 和font-size 属性来改变其外观。

在本教程中，我将向你展示两种不同的方法，让你的HTML文本看起来更漂亮。

基本font-size 语法

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

如何在HTML标签中改变文本大小和文本颜色

你可以在标签内用颜色和字体大小属性来改变文本的颜色和大小。这就是所谓的内联CSS。你可以用HTML中的style属性来做这件事。

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

<h1>freeCodeCamp</h1>

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

它在浏览器中看起来像这样：

要改变文本的大小，你将使用样式属性，然后用font-size 属性设置一个值，像这样。

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

现在文本在浏览器中看起来是这样的：

如果你想知道4rem是什么，它是一个测量单位。它和64像素是一样的，因为16px就是1rem，除非你把根font-size (html)改为另一个值。

要改变文本的颜色，你可以使用样式属性，然后用颜色属性设置一个值：

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

这就是我们现在在浏览器中的情况：

结合font-size 和color 属性，我们在浏览器中得到了这个结果：

有了这个代码：

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

如何在外部CSS文件中改变文本大小和文本颜色

你也可以在一个外部样式表中改变文本的颜色和大小。最重要的是，你必须在你的HTML的标题部分链接外部CSS。

这样做的基本语法是这样的：

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

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

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

<h1>freeCodeCamp</h1>

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

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

我们在浏览器中也有同样的结果：

结论

我希望这个教程能给你带来知识，让你能够改变HTML文本的大小和颜色，从而使它们看起来更好。

谢谢你的阅读，并继续编码。