HTML: Alterar as cores de palavras específicas em uma string de texto

89

Tenho a mensagem abaixo (ligeiramente alterada):

"Entre na competição até 30 de janeiro de 2011 e você pode ganhar até $$$$ - incluindo incríveis viagens de verão!"

Atualmente tenho:

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

formatando a string de texto, mas deseja alterar a cor de "30 de janeiro de 2011" para # FF0000 e "verão" para # 0000A0.

Como faço isso estritamente com HTML ou CSS inline?

html css text colors inline Mitch
fonte

Respostas:

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>

Ou você pode preferir usar classes 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>
Jacob
fonte
1
Esta é uma ótima resposta! Demonstra facilmente que os pontos representam marcas dentro das marcas de parágrafo. Isso realmente esclarece essas informações para qualquer pessoa que trabalhe com <style>.
Joseph Poirier
41

Você pode usar a tag 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>

E use isso no 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;
}

A tag <mark>tem uma cor de fundo padrão ... pelo menos no Chrome.

Juan Pablo Pinedo
fonte
3
Pena que a resposta não foi concedida. Eu teria concedido a este (e vergonha para aqueles que usam navegadores que não suportam HTML (ainda existe algum?))
Mawg diz para restabelecer Monica
Uma solução simples e eficaz que não faz mais, nem menos, do que o OP solicitou.
Victor Stoddard
A marca de marcação não deve ser usada para formatação.
Jessica B de
boa alternativa para a resposta original!
Joseph Poirier
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>

Os elementos span são embutidos e, portanto, não interrompem o fluxo do parágrafo, apenas o estilo entre as tags.

Damien-Wright
fonte
19

use spans. ex)<span style='color: #FF0000;'>January 30, 2011</span>

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

Isso funcionou melhor para mim quando eu só queria mudar uma palavra para a cor vermelha em uma frase.

user8588011
fonte
<font color = "red"> Isto é algum texto! </font>
user8588011
1
Não é compatível com HTML 5.
Stephen,
2

Personalize este código da maneira que quiser para atender às suas necessidades, você pode selecionar o texto? no parágrafo para ser a fonte ou estilo que você precisa !:

<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>
Trevor Lee
fonte
1

Você também pode fazer uma aula:

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

em seguida, em um arquivo css: 

.mychangecolor{ color:#ff5 /* it changes to yellow */ }
JayMcpeZ_
fonte
-2

Você poderia usar o caminho mais longo 

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

você entendeu o resto

otis resposta
fonte