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でこれを厳密に行うにはどうすればよいですか？

— ミッチ
ソース

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タグを使用できます。

<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では。

— ファンパブロピネド
ソース

3

答えが得られなかったのは残念です。私はそれをこれに授与したであろう（そしてHTMLをサポートしないブラウザを使用する人々（それでも何かあるのか？）に

— 負けた

OPが要求する以上のことを行うシンプルで効果的なソリューション。

— Victor Stoddard 2016年

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

スパンを使用します。例）January 30, 2011

— brian_d
ソース

16

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

これは、1つの単語を1つの文の赤に変更するだけの場合に最適でした。

— ユーザー8588011
ソース

これはテキストです！

— user8588011

1

これはHTML 5ではサポートされていません

— Stephen

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

クラスを作ることもできます：

 I am in yellow color!!!!!!

次にCSSファイルで次のようにします：

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

— JayMcpeZ_
ソース

-2

あなたはより長いボリンジャーの方法を使うことができます

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

スニペットを展開

あなたは残りのポイントを取得します

— オーティス回答
ソース