Question

我有以下消息（略有改动）：

“在2011年1月30日前参加比赛，你可以赢得比赛 $$$$ - 包括惊人的夏季旅行！“

我目前有：

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

格式化文本字符串，但希望将“2011年1月30日”的颜色更改为＃FF0000，将“summer”更改为＃0000A0。

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

Answer 1

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

Answer 2

您可以使用HTML5标记：

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

标记具有默认背景颜色...至少在Chrome中。

Answer 3

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

Answer 4

使用跨度。 ex）January 30, 2011

Answer 5

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

当我只想在一个句子中将一个单词改为红色时，这对我来说是最好的。

Answer 6

根据您的需求定制此代码，您可以选择文字吗？在段落中你需要什么字体或样式！：

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

Answer 7

你可以使用更长的boringer方式

＆＃13;

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

＆＃13;

你明白其余的

Answer 8

你也可以上课：

 I am in yellow color!!!!!!

然后在css文件中执行：

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

Answer 9

如果您愿意使用一个库，Azle可以轻松实现。只需 target 您的文本元素的类和类实例。例如，如果我的文本块位于具有“ my_text”类的元素内，并且它是该类的第一个实例：

az.style_word('my_text', 1, {
    "this_class" : "colored_word", 
    "word" : "deploy",
    "color" : "red",
    "word_instance" : 2
})

以下内容显示了我们如何为单词的每个实例着色，或专门针对单词的第一，第二或第三实例：

这里是FIDDLE

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

9 个答案: