HTML：更改文本字符串中特定单词的颜色
Posted
技术标签:
【中文标题】HTML：更改文本字符串中特定单词的颜色【英文标题】：HTML: Changing colors of specific words in a string of text 【发布时间】：2011-06-05 02:25:29 【问题描述】：我收到以下信息（略有改动）：
“在 2011 年 1 月 30 日之前参加比赛，您最多可以赢得 $$$$ — 包括令人惊叹的夏季旅行！”
我目前有：
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
格式化文本字符串，但想将“January 30, 2011”的颜色更改为#FF0000，将“summer”的颜色更改为#0000A0。
如何严格使用 html 或内联 CSS？
【问题讨论】：
【参考方案1】：您可以使用 HTML5 标签<mark>:
<p>Enter the competition by
<mark class="red">January 30, 2011</mark> and you could win up to $$$$ — including amazing
<mark class="blue">summer</mark> trips!</p>
并在 CSS 中使用它：
p
font-size:14px;
color:#538b01;
font-weight:bold;
font-style:italic;
mark.red
color:#ff0000;
background: none;
mark.blue
color:#0000A0;
background: none;
标签<mark> 具有默认背景颜色...至少在Chrome 中是这样。
【讨论】：
可惜没有给出答案。我会把它授予这个（以及那些使用不支持 HTML 的浏览器的人（还有吗？）） 一个简单而有效的解决方案，不会比 OP 要求的更多，也不会更少。 标记标签不用于格式化。 原始答案的不错替代品！【参考方案2】：<font color="red">This is some text!</font>
当我只想将一句话中的一个单词变成红色时，这对我来说效果最好。
【讨论】：
这是一些文字！ HTML 5 不支持此功能。【参考方案3】：根据您的需要定制此代码，您可以选择文本吗？在段落中成为您需要的字体或样式！：
<head>
<style>
p color:#ff0000;font-family: "Times New Roman", Times, serif;
fontcolor:#000fff;background:#000000;font-size:225%;
bcolor:green;
</style>
</head>
<body>
<p>This is your <b>text. <font>Type</font></strong></b>what you like</p>
</body>
【讨论】：
【参考方案4】：你也可以创建一个类：
<span class="mychangecolor"> I am in yellow color!!!!!!</span>
然后在一个css文件中做：
.mychangecolor color:#ff5 /* it changes to yellow */
【讨论】：
【参考方案5】：你可以使用更长的无聊方式
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">Enter the competition by</p><p style="font-size:14px; color:#ff00; font-weight:bold; font-style:italic;">summer</p> 剩下的你就明白了
【讨论】：
【参考方案6】：使用跨度。例如）<span style='color: #FF0000;'>January 30, 2011</span>
【讨论】：
【参考方案7】：<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
Enter the competition by <span style="color:#FF0000">January 30, 2011</span> and you could win up to $$$$ — including amazing <span style="color:#0000A0">summer</span> trips!
</p>
span 元素是内联的，因此不会破坏段落的流动，只有标签之间的样式。
【讨论】：
【参考方案8】：<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
Enter the competition by
<span style="color: #ff0000">January 30, 2011</span>
and you could win up to $$$$ — including amazing
<span style="color: #0000a0">summer</span>
trips!
</p>
或者您可能想使用 CSS 类：
<html>
<head>
<style type="text/css">
p
font-size:14px;
color:#538b01;
font-weight:bold;
font-style:italic;
.date
color: #ff0000;
.season /* OK, a bit contrived... */
color: #0000a0;
</style>
</head>
<body>
<p>
Enter the competition by
<span class="date">January 30, 2011</span>
and you could win up to $$$$ — including amazing
<span class="season">summer</span>
trips!
</p>
</body>
</html>
【讨论】：
这是一个很好的答案！轻松证明这些点代表段落标签内的标签。它确实为使用 这个可以根据字符串的索引来完成吗？我的意思是从字符 x 到字符 y，我该如何着色？ @DebjyotiBanerjee 您不能使用 CSS 设置文本节点的样式，只能使用元素。修改每个字符颜色的唯一方法是将每个字符包装在自己的元素中，例如<span/>。以上是关于HTML：更改文本字符串中特定单词的颜色的主要内容，如果未能解决你的问题，请参考以下文章
如何在 SQL Server 2012 中使用 html 更改表格中特定单元格的颜色？