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

Tengo el siguiente mensaje (ligeramente modificado):HTML: El cambio de colores de palabras específicas en una cadena de texto

"participar en el concurso para el 30 de enero de 2011 y que podría ganar hasta $$$ $ - ¡incluyendo increíbles viajes de verano! "

Actualmente tengo:

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

formatear la cadena de texto, pero quieren cambiar el color de "30 Enero de 2011" a # FF0000 y "verano" a # 0000A0.

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

Fuente

2011-01-07 Mitch

<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 puede que quiera usar clases CSS 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>

Fuente

2011-01-07 05:41:08 Jacob

<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 span están en línea un tanto no romper el flujo del párrafo, único estilo entre las etiquetas .

Fuente

2011-01-07 05:41:24

use span. ex) January 30, 2011

Fuente

2011-01-07 05:41:28

Se podría utilizar la etiqueta HTML 5 :

<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 utilizar 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 por defecto ... al menos en Cromo.

Fuente

2012-12-14 23:58:39

Quizás publique un ejemplo de [jsfiddle.net] (http://jsfiddle.net). – JSuar

El ejemplo se puede encontrar aquí [enlace] (http://jsfiddle.net/KynKK/) –

Una lástima que la respuesta no fue otorgada. Lo habría otorgado a esto (y fie a aquellos que usan navegadores que no son compatibles con HTML (¿hay alguno?)) – Mawg

se puede utilizar el modo boringer ya

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

usted consigue el punto para el resto

Fuente

2015-11-17 19:51:14

También puede hacer una clase:

 I am in yellow color!!!!!!

continuación en un archivo css hacer:

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

Fuente

2015-11-20 15:34:06

medida este código como usted quiera para adaptarse a sus necesidades, puede seleccionar texto? en el párrafo a ser lo que la fuente o el estilo que necesita !:

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

Fuente

2016-06-19 11:23:43

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

Esto funcionó mejor para mí cuando yo sólo quería cambiar una palabra en el color rojo en una frase.

Fuente

2017-09-10 15:01:55 user8588011

Esto es texto! – user8588011

En cuanto a puro css 'carpa' Im usando el siguiente código de recarga vertical en mi blogger blog:

#marquee { 
 
width:100%; 
 
height:410px; 
 
overflow:hidden; 
 
} 
 
#marquee p { 
 
display:inline-block; 
 
padding-top:100%; 
 
animation:marquee 100s linear infinite; 
 
} 
 
#marquee p:hover { 
 
animation-play-state: paused 
 
} 
 
@keyframes marquee { 
 
0% { transform: translate(0, 0); } 
 
100% { transform: translate(0, -100%); } 
 
}

<div id="marquee"> 
 
<div class="marquee"> 
 
<p>

Funciona como intención que (de abajo hacia arriba con rebosadero oculto), pero curiosamente (al menos para mí) el color del texto no es el mismo que el color del texto de otras publicaciones y páginas, que es # 0093dd cuando lo configuro.

Pasé alrededor de 8 h buscando y experimentando formas de poner texto de marquesina de este color. Intenté todo (en la plantilla CSS y en la publicación html) pero sin éxito. :(

Algunos de los expertos stackoverflow sabe (y puede compartir aquí, por favor) el truco para poner el texto de este color?

Tomando la oportunidad, ... la velocidad de desplazamiento de marquesina es 100s. Es normal? Yo no adivine comparando con otros usuarios de este tipo de función.

Mirando hacia adelante para evaluaciones sobre estas cuestiones 2.

Gracias de antemano.

Sinceramente,

Rubasi

Fuente

2018-01-23 09:56:28 Rubasi

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

Respuesta

Cuestiones relacionadas