更改 HTML 文本字符串中一个单词的颜色
本文的主题是利用 CSS 突出显示或更改文本中任何特定单词的颜色。 我们将介绍几种实现此功能的技术。
我们将学习使用内部和内联 CSS 为文本着色。 稍后，我们将看看如何使用 JavaScript 来实现相同的功能。
更改 HTML 文本字符串中一个单词的颜色
我们经常在网站上看到文本中的单个单词与其他单词有不同的颜色； 当然，它吸引了用户的注意力。 让我们讨论如何在我们的网页上做同样的事情。
在早期版本的 HTML 中，我们有一个 <font> 标签可以用来实现这个特性，如下所示：
<font color="red">Red</font>
但该标签在 HTML5 中被移除，不再受支持。 因此，我们将了解 HTML <span> 标记来帮助我们完成任务。
<span> 元素是一个内联容器，用于标记文本的一部分或页面的一部分。 <span> 标签的 id 或 class 属性允许使用 CSS 进行简单的样式设置并使用 JavaScript 进行修改。
<span> 标签还允许我们应用内联样式，类似于 div 元素。 但是，<span> 是内联元素，而 div 是块级元素。
查看下面的示例以了解这一点。
<html>
<body>
<p>Hello, I am
<span style="color: red">Red</span>
</p>
</body>
</html>
CSS 的颜色属性赋予文本特定的颜色。 指定所需颜色的方法有很多种； 在上面的示例中，我们通过名称选择颜色。
HTML 可以识别 16 种颜色名称，它们是 black，white，grey，silver，maroon，red，purple，fuchsia，green，lime，olive，yellow，navy，blue，teal 和 aqua。 新的浏览器可以识别 140 个 CSS 颜色名称。
我们可以从此处检查所有 HTML 可识别的颜色名称。 正如我们所提到的，存在许多其他方法来指定所需的颜色。
让我们来看看不同的方法。
RGB 颜色
RGB 代表红、绿、蓝。 它使用加法配色方案，其中三种原色（红色、绿色和蓝色）组合在一起以创建每种颜色。
红色、绿色和蓝色参数各有一个介于 0 和 255 之间的值，用于描述颜色的强度。 这表示有 256 x 256 x 256 = 16,777,216 种不同的颜色。
例如，rgb(255, 0, 0) 被渲染为红色，因为红色被设置为其最大值 255，而其他两种颜色，绿色和蓝色，被设置为 0。像这样将所有颜色参数设置为零 rgb(0,0,0) 显示黑色。
您可以从这里看到不同颜色的 RGB 值。
<html>
<body>
<p>Hello, I am
<span style="color: rgb(241, 196, 15 )">Yellow</span>
</p>
</body>
</html>
RGBA 颜色
RGBA 颜色是 RGB 颜色的扩展，包括确定颜色不透明度的 Alpha 通道。 RGBA 颜色值的语法是：
rgba (red, green, blue, alpha)
alpha 参数的值范围从 0.0（完全透明）到 1.0（完全可见）。 我们还可以将此属性用于背景颜色，因为有时我们需要具有不同不透明度的不同背景颜色。
十六进制颜色
十六进制颜色使用十六进制值来表示来自不同颜色模型的颜色。 十六进制颜色由 #RRGGBB 表示，其中 RR 代表红色，GG 代表绿色，BB 代表蓝色。
指定颜色强度的十六进制整数范围从 00 到 FF； 一个简单的例子是#0000FF。 因为蓝色分量处于其最高值 FF 而红色和绿色部分处于其最低值 00，所以颜色完全是蓝色。
你可以从这里看到不同颜色的十六进制值。
<html>
<body>
<p>Hello, I am
<span style="color: #0000FF">Blue</span>
</p>
</body>
</html>
HSL 颜色
HSL 是代表色调、饱和度和亮度的首字母缩写词。 让我们更深入地了解每个术语。
- 色调：色调在色轮上的范围为 0 到 360 度。 红色为0； 黄色是 60； 绿色是120； 蓝色是240，等等。
- 饱和度：此数量以百分比衡量，100% 表示完全饱和（即没有灰色阴影），50% 表示 50% 灰色但颜色仍然可见，0% 表示完全不饱和（即完全灰色和 颜色不可见）。
- 亮度：这也是一个百分比：0% 是黑色，100% 是白色。 我们希望赋予颜色的光量以百分比表示，0% 表示黑色（没有光），50% 表示既不暗也不亮，100% 表示白色（完全亮度）。
HSL 颜色值的语法是：
hsl(hue, saturation, lightness)
<html>
<body>
<p>Hello, I am
<span style="color: hsl(23, 97%, 50% )">Orange</span>
</p>
</body>
</html>
HSLA 颜色
HSLA 颜色是 HSL 的扩展，带有指定颜色不透明度的 Alpha 通道。 HSLA 颜色值由以下因素确定：
hsla(hue, saturation, lightness, alpha)
alpha 参数的值是一个数字，其范围严格介于 0.0（表示完全透明）和 1.0（表示不透明）之间。
使用内部 CSS 更改 HTML 中一串文本中一个单词的颜色
我们已经详细了解了在 CSS 中赋予颜色的所有方法。 到目前为止，我们一直在为所有内容使用内联 CSS。
但是，内联 CSS 不是推荐的方法，因为它只绑定到元素。 如果我们想要在不同的页面区域上使用相同的功能，我们必须重写很多东西。
因此，让我们使用内部 CSS 为我们的文本着色，它在 <style> 标签内的 HTML <head> 标签中定义。
<html>
<head>
<title>CSS Color Property</title>
<style>
#rgb{
color:rgb(255,0,0);
}
#rgba{
color:rgba(255,0,0,0.5);
}
#hex{
color:#EE82EE;
}
#hsl{
color:hsl(0,50%,50%);
}
#hsla{
color:hsla(0,50%,50%,0.5);
}
#built{
color:green;
}
</style>
</head>
<body>
<h1>
Hello this is <span id="built">Built-in color</span> format.
</h1>
<h1>
Hello this is <span id="rgb">RGB</span> format.
</h1>
<h1>
Hello this is <span id="rgba">RGBA</span> format.
</h1>
<h1>
Hello this is <span id="hex">Hexadecimal</span> format.
</h1>
<h1>
Hello this is <span id="hsl">HSL</span> format.
</h1>
<h1>
Hello this is <span id="hsla">HSLA</span> format.
</h1>
</body>
</html>
使用 JavaScript 更改 HTML 文本字符串中一个单词的颜色
我们可以使用 JavaScript 更改句子中特定单词的颜色。 我们需要为我们的 <span> 标签提供一个 ID，然后使用 document.getElementById(ID-name) 从 JavaScript 获取该元素并调用其样式属性。 就是这样。
<html>
<body onload="myFunction()">
<p>Hello, I am <span id="color-text">Magenta.</span></p>
<script>
function myFunction() {
document.getElementById("color-text").style.color = "magenta";
}
</script>
</body>
</html>
相关文章
HTML 中的 role 属性
发布时间：2023/05/06 浏览次数：124 分类：HTML
-
本篇文章介绍 HTML role属性。HTML中 role 属性介绍，role 属性定义描述语义的 HTML 元素的角色。
在 HTML 中打印时分页
发布时间：2023/05/06 浏览次数：188 分类：HTML
-
本篇文章介绍如何在打印 HTML 页面或内容时强制分页。将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML
在 HTML 中显示基于 Cookie 的图像
发布时间：2023/05/06 浏览次数：154 分类：HTML
-
本文介绍如何根据 HTML 中的 cookies 显示图像。根据 HTML 中设置的 Cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。
在 HTML 中创建下载链接
发布时间：2023/05/06 浏览次数：140 分类：HTML
-
本文介绍如何在 HTML 中创建下载链接。使用 download 属性在 HTML 中创建下载链接.。我们可以使用 HTML 锚元素内的下载属性来创建下载链接。
HTML 中的 ::before 选择器
发布时间：2023/05/06 浏览次数：70 分类：HTML
-
本教程介绍 CSS ::before 伪元素。CSS ::before 伪元素。 ::before 选择器是一个 CSS 伪元素，我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。
在 HTML 中创建一个可滚动的 Div
发布时间：2023/05/06 浏览次数：54 分类：HTML
-
本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动，并通过示例查看它们的实现。
HTML 显示箭头的代码
发布时间：2023/05/06 浏览次数：153 分类：HTML
-
一篇关于用于显示箭头的 Unicode 字符实体的紧凑文章。本文讨论使用 Unicode 字符实体在我们的 HTML 页面上显示不同的字符。 HTML 中使用了许多实体，但我们将重点学习表示上、下、左、右的三角
在 HTML 中启用和禁用复选框
发布时间：2023/05/06 浏览次数：149 分类：HTML
-
本篇文章介绍如何启用和禁用 HTML 中的复选框。HTML 中的复选框 复选框是一个交互式框，可以切换以表示肯定或否定。 它广泛用于表单和对话框。
HTML 中的只读复选框
发布时间：2023/05/06 浏览次数：198 分类：HTML
-
本篇文章介绍了如何在 HTML 中制作只读复选框。本文是关于如何使 HTML 复选框控件成为只读组件的快速破解。 但是，首先，让我们简要介绍一下复选框控件。
