海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

在定制您的网站时,字体颜色经常被忽视。 在大多数情况下,网站所有者会保留默认字体颜色,如黑色或他们为正文和标题文本颜色定义的任何主题样式。

但是,出于多种原因,最好更改网站上的 HTML 字体颜色。 更改 HTML 字体颜色可能看起来令人生畏,但它非常简单。 有多种方法可以更改您网站上的字体颜色。

在这篇文章中,我们将向您展示更改网站字体颜色的不同方法,并首先讨论您为什么要这样做。

为什么要更改 HTML 字体颜色?

您可能希望更改字体颜色,因为这样做有助于提高您网站的可读性和可访问性。 例如,如果您的网站使用较深的配色方案,将字体颜色保留为黑色会使您网站上的文本难以阅读。

您要考虑更改字体颜色的另一个原因是,如果您要使用品牌调色板中的较深颜色。 这是强化品牌的又一个机会。 它建立了品牌一致性并确保您所有营销渠道中的文本看起来都相同。

顺便说一下,让我们看看如何定义和更改 HTML 字体颜色。

在定制您的网站时,字体颜色经常被忽视……但它是一个简单的编辑,可以添加很多个性! ✨🎨点击推文

海外社媒SNS代运营Tiktok代运营公司

定义颜色的方法

在网页设计中有多种定义颜色的方法,包括名称、RGB 值、十六进制代码和 HSL 值。 让我们来看看它们是如何工作的。

颜色名称

颜色名称是在 CSS 样式中定义颜色的最简单方法。 颜色名称是指 HTML 颜色的特定名称。 目前,支持 140 种颜色名称,您可以在样式中使用这些颜色中的任何一种。 例如,您可以使用“blue”将单个元素的颜色设置为蓝色。

HTML 颜色名称
HTML 颜色名称。

但是,这种方法的缺点是并非所有颜色名称都受支持。 换句话说,如果您使用的颜色不在支持的颜色列表中,您将无法通过颜色名称在您的设计中使用它。

RGB 和 RGBA 值

接下来,我们有 RGB 和 RGBA 值。 RGB 代表红色、绿色和蓝色。 它通过混合红色、绿色和蓝色值来定义颜色,类似于在实际调色板上混合颜色的方式。

RGB 值
RGB 值。

RGB 值如下所示:RGB(153,0,255)。 第一个数字指定红色输入,第二个指定绿色输入,第三个指定蓝色。

每种颜色输入的值范围在 0 到 255 之间,其中 0 表示根本不存在颜色,而 255 表示特定颜色处于其最大强度。

RGBA 值在混合中再增加一个值,即表示不透明度的 alpha 值。 它的范围从 0(不透明)到 1(完全透明)。

十六进制值

HEX 代码是另一个易于使用的颜色选择选项。
HEX 代码是另一个易于使用的颜色选择选项。

十六进制颜色代码的工作方式类似于 RGB 代码。 它们由 0 到 9 的数字和 A 到 F 的字母组成。十六进制代码如下所示:#800080。 前两个字母指定红色的强度,中间的两个数字指定绿色的强度,最后两个数字设置蓝色的强度。

HSL 和 HSLA 值

在 HTML 中定义颜色的另一种方法是使用 HSL 值。 HSL 代表色调、饱和度和亮度。

HSL 颜色值
HSL 颜色值。

色调使用从 0 到 360 的度数。在标准色轮上,红色约为 0/360,绿色约为 120,蓝色约为 240。

饱和度使用百分比来定义颜色的饱和度。 0代表黑白,100代表全彩。

最后,亮度使用与饱和度类似的百分比。 在这种情况下,0% 代表黑色,100% 代表白色。

例如,我们在本文中一直使用的紫色在 HSL 中看起来像这样: hsl(276, 100%, 50%).

HSL 与 RGB 一样,支持不透明度。 在这种情况下,您将使用 HSLA 值,其中 A 代表 alpha 并定义为从 0 到 1 的数字。如果我们想降低示例紫色的不透明度,我们将使用以下代码: hsl(276, 100%, 50%, .85).

既然您知道如何定义颜色,让我们看看更改 HTML 字体颜色的不同方法。

老人: <font> 标签

在 HTML5 被引入并设置为编码标准之前,您可以使用字体标签更改字体颜色。 更具体地说,您将使用带有颜色属性的字体标记来设置文本颜色。 这 color 用其名称或十六进制代码指定。

这是此代码如何使用十六进制颜色代码的示例:

<font color="#800080">This text is purple.</font>

这就是如何使用颜色名称将文本颜色设置为紫色。

<font color="purple">This text is purple.</font> 

但是,那 <font> 标签在 HTML5 中已弃用,不再使用。 改变字体颜色是一个设计决定,设计不是 HTML 的主要目的。 因此,这是有道理的 <font> HTML5 不再支持标签。

那么如果不再支持 标签,你如何更改 HTML 字体颜色? 答案是使用级联样式表或 CSS。

新:CSS 样式

要使用CSS更改HTML字体颜色,您将使用与相应选择器配对的CSS颜色属性。 CSS 允许您使用颜色名称、RGB、十六进制和 HSL 值来指定颜色。 可以通过三种方式使用 CSS 更改字体颜色。

内联 CSS

内联 CSS 直接添加到您的 HTML 文件中。 您将使用诸如

之类的 HTML 标记,然后使用 CSS 颜色属性对其进行样式设置,如下所示:

<p style="color: purple">This is a purple paragraph.</p>

如果您想使用十六进制值,您的代码将如下所示:

<p style="color:#800080">This is a purple paragraph.</p>

如果你打算使用 RGB 值,你会这样写:

<p style="color:RGB(153,0,255)">This is a purple paragraph.</p>

最后,使用 HSL 值,您将使用以下代码:

<p style="color:hsl(276, 100%, 50%)">This is a purple paragraph.</p>

上面的示例向您展示了如何更改网站上段落的颜色。 但是您不仅限于段落。 您可以更改标题和链接的字体颜色。

例如,替换 <p> 用上面的标签 <h2> 将更改该标题文本的颜色,同时将其替换为 <a> 标签将改变该链接的颜色。 您还可以使用 元素为任意数量的文本着色。

如果要更改整个段落或标题的背景颜色,这与更改字体颜色的方式非常相似。 你必须使用 background-color 属性,并使用颜色名称、十六进制、RGB 或 HSL 值来设置颜色。 下面是一个例子:

<p style="background-color: purple">

嵌入式 CSS

嵌入式 CSS 位于 <style> 标签并放置在 HTML 文档的 head 标签之间。

如果要使用颜色名称,代码将如下所示:

<!DOCTYPE html>
<html>
<head>
  <style>
    <p> {
        color: purple;
    }
</style>
</head>

上面的代码会将页面上每个段落的颜色更改为紫色。 与内联 CSS 方法类似,您可以使用不同的选择器来更改标题和链接的字体颜色。

如果要使用十六进制代码,代码如下所示:

<!DOCTYPE html>
<html>
<head>
  <style>
    <p> {
        color: #800080;
    }
  </style>
</head>

下面的示例使用 RBGA 值,因此您可以看到设置不透明度的示例:

<!DOCTYPE html>

<html>

<head>

<style>

<p> {

color: RGB(153,0,255,0.75),

}

</style>

</head>

HSL 代码如下所示:

<!DOCTYPE html>
<html>
<head>
  <style>
    <p> {
        color: hsl(276, 100%, 50%),
    }
  </style>
</head>

外部 CSS

最后,您可以使用外部 CSS 更改网站上的字体颜色。 外部 CSS 是放置在单独的样式表文件中的 CSS,通常称为 style.css 或 stylesheet.css。

此样式表负责您网站上的所有样式,并指定字体颜色和字体大小、边距、填充、字体系列、背景颜色等。 简而言之,样式表负责您的网站在视觉上的外观。

要使用外部 CSS 更改字体颜色,您需要使用选择器来设置您想要的 HTML 部分的样式。 例如,此代码将更改您网站上的所有正文:

body {color: purple;}

请记住,您可以使用 RGB、十六进制和 HSL 值而不仅仅是颜色名称来更改字体颜色。 如果要编辑样式表,建议在代码编辑器中进行。

内联、嵌入式还是外部?

所以现在您知道如何使用 CSS 来更改字体颜色了。 但是您应该使用哪种方法?

如果您使用内联 CSS 代码,您将直接将其添加到您的 HTML 文件中。 一般来说,这种方法适用于快速修复。 如果您想更改单个页面上特定段落或标题的颜色,此方法是最快且最简单的方法。

但是,内联样式会使 HTML 文件的大小变大。 HTML 文件越大,加载网页所需的时间就越长。 除此之外,内联 CSS 会使您的 HTML 变得混乱。 因此,通常不鼓励使用 CSS 更改 HTML 字体颜色的内联方法。

嵌入式 CSS 位于 标签之间和