HTML：更改文本字符串中特定单词的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4622808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: Changing colors of specific words in a string of text
提问by Mitch
I have the below message (slightly changed):
我有以下消息（略有更改）：
"Enter the competition by January 30, 2011 and you could win up to $$$$ — including amazing summer trips!"
“在 2011 年 1 月 30 日之前参加比赛，您最多可以赢得 $$$$ - 包括惊人的夏季旅行！”
I currently have:
我目前有：
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
formatting the text string, but want to change the color of "January 30, 2011" to #FF0000 and "summer" to #0000A0.
格式化文本字符串，但想将“January 30, 2011”的颜色更改为#FF0000，将“summer”的颜色更改为#0000A0。
How do I do this strictly with HTML or inline CSS?
如何使用 HTML 或内联 CSS 严格执行此操作？
回答by Jacob
<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>
Or you may want to use CSS classes instead:
或者您可能想改用 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>
回答by Juan Pablo Pinedo
You could use the HTML5 Tag <mark>:
您可以使用 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>
And use this in the CSS:
并在 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;
}
The tag <mark>has a default background color...at least in Chrome.
标签<mark>有一个默认的背景颜色……至少在 Chrome 中是这样。
回答by Damien-Wright
<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>
The span elements are inline an thus don't break the flow of the paragraph, only style in between the tags.
span 元素是内联的，因此不会破坏段落的流动，只会在标签之间添加样式。
回答by brian_d
use spans. ex) <span style='color: #FF0000;'>January 30, 2011</span>
使用跨度。前任）<span style='color: #FF0000;'>January 30, 2011</span>
回答by user8588011
<font color="red">This is some text!</font>
This worked the best for me when I only wanted to change one word into the color red in a sentence.
当我只想将句子中的一个单词更改为红色时，这对我来说效果最佳。
回答by Trevor Lee
Tailor this code however you like to fit your needs, you can select text? in the paragraph to be what font or style you need!:
根据您的需要定制此代码，您可以选择文本吗？在段落中是您需要的字体或样式！：
<head>
<style>
p{ color:#ff0000;font-family: "Times New Roman", Times, serif;}
font{color:#000fff;background:#000000;font-size:225%;}
b{color:green;}
</style>
</head>
<body>
<p>This is your <b>text. <font>Type</font></strong></b>what you like</p>
</body>
回答by Cybernetic
If you're willing to use a library, Azledoes this easily. Simply targetthe classand class instanceof your text element. For example, if my block of text is inside an element with class "my_text" and it's the first instance of that class:
如果您愿意使用库，Azle可以轻松做到这一点。只需定位文本元素的类和类实例。例如，如果我的文本块位于类“my_text”的元素内，并且它是该类的第一个实例：
az.style_word('my_text', 1, {
"this_class" : "colored_word",
"word" : "deploy",
"color" : "red",
"word_instance" : 2
})
The following shows how we can color every instance of the word, or target the 1st, 2nd or 3rd instance of the word specifically:
下面显示了我们如何为单词的每个实例着色，或者专门针对单词的第一个、第二个或第三个实例：
Here is the FIDDLE
这是小提琴
回答by JayMcpeZ_
You can also make a class:
您还可以创建一个类：
<span class="mychangecolor"> I am in yellow color!!!!!!</span>
<span class="mychangecolor"> I am in yellow color!!!!!!</span>
then in a css file do:
然后在 css 文件中执行：
.mychangecolor{ color:#ff5 /* it changes to yellow */ }
回答by otis answer
You could use the longer boringer way
你可以使用更长更无聊的方式
<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> you get the point for the rest
剩下的你就明白了
