Cómo cambiar el color de una palabra en HTML

Hay dos razones generales para cambiar el color de una palabra en un contenido:

  1. Semántica
  2. Estética

El primer paso involucra solo HTML, aún no CSS .

Semántica

Si la palabra a la que pertenece es una palabra enfatizada, márquela primero con que significa elemento HTML de énfasis .

Estética

Si la palabra a la que pertenece simplemente debe “aparecer” por motivos de diseño visual, márquela con que significa elemento HTML Span .

No tiene ningún significado particular aparte de que está configurando un enlace (para atributos adicionales de elementos HTML o para propósitos de estilo) en esa palabra particular que ha marcado con .


Ahora, puede ir a CSS y seleccionar esa palabra en particular para diseñar.

em {color: rojo; }

o

span {color: rojo; }


Estas son las formas más fáciles de cambiar el color de una palabra en un documento HTML:

  • Marcarlo (HTML)
  • Darle estilo (CSS)

La respuesta de Pekka Ruuska es correcta. Rodea las palabras con un elemento y dale una clase al elemento.

Esta es una palabra roja en una oración

Entonces dale estilo.

Si desea obtener más información sobre el desarrollo web, específicamente el desarrollo de Javascript, ¡consulte mi blog!

Javascript maestro

Rodearía la (s) palabra (s) con un elemento y le daría una clase al elemento.

This is a red word in a sentence

Luego configure el color del texto en CSS.

.redText
{
color rojo;
}

Si no tiene acceso a CSS, debe usar el estilo en línea en HTML.

This is a red word in a sentence

Personalmente, no recomiendo estilos en línea porque son más laboriosos de cambiar después que los estilos CSS basados ​​en un nombre de clase.

Veo que la mayoría de las respuestas ya recomiendan buenas prácticas: no piense en “cambiar el color de una sola palabra”, cree un espacio y un estilo de color que lo acompañe.

Después de todo, ¿qué tan común es realmente que desee cambiar solo una palabra como esa? Por lo general, se encontrará con ganas de hacer un cambio muy similar más tarde a otras palabras. Es entonces cuando desearía haber seguido el enfoque recomendado.

Ahora, lo que estas respuestas no le dijeron es dónde guardar esta declaración de estilo. Puede salirse con la suya con un estilo en línea, pero de nuevo, esa es la solución miope. Debe ponerlo en un archivo CSS separado. E incluso después de hacer eso, es posible que desee moverlo a otro; pero al menos ya lo tendrá en un archivo separado, que a la larga hace que sea más fácil de administrar.

Use la etiqueta ‘span’ en su código HTML.

Considere el siguiente código de muestra:

Soy una palabra en una oración y mi color es azul

Aquí, la etiqueta span solo se extenderá hasta el texto: ‘palabra’ (sin comillas simples) y cambiará el color a azul.

Feliz codificación !!! 🙂

Simplemente ponga la palabra dentro de un elemento span, agregue una clase y agregue el color en su hoja de estilo o, lo que es menos ideal, agregue un estilo en línea al span.

El siguiente ejemplo cambiaría el color a naranja.

HTML

ejemplo

CSS

.changeColor {color: naranja; }

Espero que ayude :))

Ingrese a la competencia por
30 de enero de 2011
y podrías ganar hasta $ $ $ $ – incluyendo increíbles
verano
¡excursiones!

O quizás quieras usar clases CSS en su lugar:



Ingrese a la competencia por
30 de enero de 2011
y podrías ganar hasta $ $ $ $ – incluyendo increíbles
verano
¡excursiones!

Muy simple, envuelva la palabra en cuestión en una etiqueta span (un elemento en línea por defecto) y póngale un estilo, ya sea usando estilos en línea (mala práctica) o asígnele una clase y configure los estilos en su archivo CSS.

Span es la mejor etiqueta para hacer algún efecto en el texto . Span no es un elemento de nivel de bloque. Use Span para ello.

Si no está habilitado para detectar errores, solucionar problemas, editar en HTML, CSS, Bootstrap y de acuerdo con sus requisitos, o no puede resolver ningún otro problema en su programación que no tenga ninguna tensión y no se estrese. a mí. Vaya a este enlace : https://goo.gl/Z7LN5a donde encontrará sus problemas.

Espero que entiendas y obtendrás la solución de tu problema.

Usa este código:

Texto normal Texto rojo Volver al texto normal

Simplemente cambie el rojo a cualquier color y, por supuesto, el texto. Si ya tiene etiquetas

, no las agregue nuevamente. Simplemente agregue las etiquetas dentro de las etiquetas

, tal como lo haría. También puede poner esto dentro de cualquier cuerpo o encabezado, como un

.

O puedes usar la cura de 2 segundos

Infierno

o