HTML: cambio de colores de palabras específicas en una cadena de texto

91

Tengo el siguiente mensaje (ligeramente cambiado):

"Participe en la competencia antes del 30 de enero de 2011 y podría ganar hasta $$$$, ¡incluidos viajes de verano increíbles!"

Actualmente tengo:

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

formateando la cadena de texto, pero desea cambiar el color de "30 de enero de 2011" a # FF0000 y "verano" a # 0000A0.

¿Cómo hago esto estrictamente con HTML o CSS en línea?

— Mitch
fuente

115

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

O tal vez desee utilizar clases CSS en su lugar:

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

1

¡Esta es una respuesta genial! Demuestra fácilmente que los puntos representan etiquetas dentro de las etiquetas de párrafo. Realmente aclara esta información para cualquiera que trabaje con <style>.

— Joseph Poirier

44

Puede utilizar la etiqueta 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>

Y usa esto en el 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;
}

La etiqueta tiene un color de fondo predeterminado ... al menos en Chrome.

— Juan Pablo Pinedo
fuente

3

Lástima que la respuesta no haya sido otorgada. Lo habría otorgado a esto (y a aquellos que usan navegadores que no son compatibles con HTML (¿todavía hay alguno?))

— Mawg dice restablecer a Monica

Una solución simple y efectiva que no hace más, ni menos, de lo solicitado por el OP.

— Victor Stoddard

La etiqueta de marca no está destinada a formatear.

— Jessica B

buena alternativa a la respuesta 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>

Los elementos de extensión están en línea y, por lo tanto, no interrumpen el flujo del párrafo, solo el estilo entre las etiquetas.

— Damien-Wright
fuente

20

utilizar tramos. ex)January 30, 2011

— brian_d
fuente

16

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

Esto funcionó mejor para mí cuando solo quería cambiar una palabra al color rojo en una oración.

— user8588011
fuente

¡Esto es texto!

— user8588011

3

Esto no es compatible con HTML 5.

— Stephen

2

También puedes hacer una clase:

 I am in yellow color!!!!!!

luego en un archivo css haga:

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

— JayMcpeZ_
fuente

2

Adapte este código como desee para satisfacer sus necesidades, ¿puede seleccionar el texto? en el párrafo para indicar qué tipo de letra o estilo necesitas:

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

-2

Podrías usar la forma boringer más larga

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

entiendes el punto por el resto

— respuesta de otis
fuente