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


89

我收到以下消息(略有更改):

“在2011年1月30日之前参加比赛,您将有机会赢得$$$$,包括令人兴奋的夏季旅行!”

我目前有:

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

格式化文本字符串,但要将“ 2011年1月30日”的颜色更改为#FF0000,将“夏季”的颜色更改为#0000A0。

如何使用HTML或内联CSS严格执行此操作?

Answers:


113
<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>

1
这是一个很好的答案!轻松演示点代表段落标签内的标签。它确实为使用<style>的任何人澄清了这些信息。
约瑟夫·普里耶

41

您可以使用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中具有默认的背景颜色。


3
可惜没有给出答案。我会为此授予它(并与使用不支持HTML的浏览器的人发生
冲突

一个简单而有效的解决方案,其作用不超过,也不少于所请求的OP。
Victor Stoddard

mark标签不用于格式化。
杰西卡·B

替代原始答案的好方法!
约瑟夫·普里耶

35
<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元素是内联的,因此不会破坏段落的流程,而只是标记之间的样式。


19

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


16
<font color="red">This is some text!</font> 

当我只想将一个单词中的一个单词更改为红色时,这对我来说效果最好。


<font color =“ red”>这是一些文本!</ font>
user8588011 '17

1
HTML 5不支持此功能
斯蒂芬

2

量身定制此代码,但是您可以根据需要选择文本?在段落中是您需要的字体或样式!:

<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>

1

您也可以上课:

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

然后在一个css文件中执行:

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

-2

您可以使用更长的boringer方法

<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> 

剩下的你明白了

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.