HTML: 更改文本字符串中特定单词的颜色

我有以下信息(稍有改动) :

“在2011年1月30日之前参加比赛，你可能会赢得 包括令人惊叹的夏季旅行!”

我现在有:

<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">

格式化文本字符串，但要将“ January 30,2011”的颜色更改为 # FF0000，并将“ summer”更改为 # 0000A0。

我如何做到这一点与 HTML 或内联 CSS 严格？

713705 次浏览
小开 
<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>
小开 
<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 元素是内联的，因此不会破坏段落的流程，只在标记之间添加样式。

小开

使用跨度。例如) <span style='color: #FF0000;'>January 30, 2011</span>

小开

你可以使用 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 中是这样。

小开

你可以用更长的枯燥的方式

<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

小开

你也可以创建一个类:

<span class="mychangecolor"> I am in yellow color!!!!!!</span>

然后在 css 文件中做:

.mychangecolor{ color:#ff5 /* it changes to yellow */ }
小开

您可以根据自己的需要来定制这些代码，您可以选择文本吗？在段落中你需要什么样的字体或样式！:

<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>
小开 
<font color="red">This is some text!</font>

当我只想把句子中的一个单词变成红色时，这种方法对我来说效果最好。


提交答案