📅 最后修改于: 2023-12-03 15:38:16.784000 🧑 作者: Mango
在 HTML 中，我们可以使用样式（style）属性来设置文本的颜色和字体样式。样式属性可以应用于任何 HTML 元素，并可以通过内联样式、嵌入式样式表和外部样式表来定义。
内联样式是在 HTML 元素中直接使用样式属性的方式来设置样式。使用内联样式的语法为：<标签名 style="属性名:属性值;">文本</标签名>。例如，以下代码将会以红色字体显示文本：
<p style="color:red;">这段文本将以红色字体显示。</p>
你可以在属性值中指定任何 CSS 样式属性，包括文本颜色和字体大小、字体样式等等。例如以下代码会使用 20px 大小、宋体字体、带下划线文本：
<p style="font-size:20px; font-family:SimSun; text-decoration:underline;">这段文本将使用宋体字体、20px 大小、带下划线显示。</p>
在 HTML 页面中可以使用 <style> 标签来定义嵌入式样式表。嵌入式样式表的样式定义可以应用于页面上的所有元素。
例如以下代码中，我们定义了一个 redText 类，应用于所有 p 元素，并设置它们的文本颜色为红色：
<!DOCTYPE html>
<html>
<head>
<style>
.redText {
color: red;
}
</style>
</head>
<body>
<p class="redText">这段文本将使用红色字体显示。</p>
</body>
</html>
当需要设置多个元素的样式时，嵌入式样式表可以更方便地进行管理和维护。
外部样式表是一个独立的 CSS 文件，可以在 HTML 页面中通过 <link> 标签来引用。使用外部样式表的优点是可以将样式与页面内容分离，使样式和布局更加清晰和易于维护。
假设我们有一个名为 style.css 的 CSS 文件，其中定义了一个 blueText 类，应用于所有 p 元素，并设置它们的颜色为蓝色：
.blueText {
color: blue;
}
在 HTML 页面中，我们可以使用以下代码来引用 style.css 文件，并将 p 元素应用于 blueText 类：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="blueText">这段文本将使用蓝色字体显示。</p>
</body>
</html>
注意我们在 <link> 元素的 href 属性中指定了 CSS 文件的路径，例如 href="style.css"。这里我们假设 style.css 文件与 HTML 文件在同一目录下。
在 HTML 页面中设置文本颜色和字体样式的方法有三种：内联样式、嵌入式样式表和外部样式表。其中，内联样式适用于单个元素的样式设置；嵌入式样式表适用于单个页面的样式定义；外部样式表适用于多个页面共享的样式定义。无论哪种方法，我们都可以通过 CSS 样式属性来设置文本的颜色、字体大小和样式等属性。