Javascript Cambiar El Color Del Texto

| | | | | | | | | | | | | | | | | | | | | | | | | |

La propiedad de color de fondo de CSS aplica color a un elemento de texto. Puede especificar una palabra clave de color incorporada en CSS, un valor hexadecimal u otro valor de color con la propiedad background-color. La sintaxis de esta propiedad es: color: yourcolor ;.

Establecer el color y el color de fondo del texto en un sitio web es una parte esencial del diseño web.

Eso y rsquo ; s donde entran en juego el color de CSS y las propiedades de color de fondo. La propiedad de color le permite establecer el color del texto HTML. La propiedad background-color le permite definir colores de fondo de texto.

Este tutorial discutirá, con ejemplos, còmo establecer el color del texto en CSS. & Nbsp; Luego hablaremos sobre còmo establecer el fondo color de un elemento de texto.

Color de fuente CSS

Un color de fuente CSS se establece mediante la propiedad color. La propiedad de color establece el color del texto, no el fondo del elemento. Puede usar palabras clave de color CSS o valores de color como cadenas hexadecimales para establecer un color.

La sintaxis de la propiedad de color es:

Esta regla establece el color de todos los "p" etiquetas en un documento HTML a rojo.

Usamos una palabra clave de color CSS. Estas palabras clave son √∫tiles si desea hacer referencia a un color estándar, como " rojo " o " azul pálido & rdquo ;. Pero estas palabras clave no describen todos los colores del espectro. Si desea usar un color especìfico, puede usar otro tipo de etiqueta de color.

La propiedad de color acepta cualquier uno de los siguientes valores:

Valor Descripciòn Ejemplos
Nombre del color Un nombre de color azul, rosa intenso
Color HEX Un color hexadecimal . Los identificadores tienen una longitud de seis caracteres. # f7f7f7, # 0000ff
Color RGB RGB significa rojo, verde y azul. rgb (0, 50, 28), rgb (0, 0, 255)
Color HSL HSL significa tono, saturaciòn y luminosidad. hsl (0 , 50%, 50%), & nbsp; hsl (180, 50%, 25%)

De forma predeterminada, el color del texto utilizado por una página web es el color del texto que se aplica a la etiqueta "body" en una página web. A menos que se especifique lo contrario, será negro.

Puede usar la propiedad de color para definir los colores de los enlaces en su hoja de estilo.

Veamos un ejemplo para ilustrar còmo funciona la propiedad de color.

Cambiar Color de fuente CSS: un ejemplo

Supongamos que estamos dise√±ando un sitio web para una tienda de comestibles local, Peterson and Sons. Los propietarios quieren que el sitio web muestre un determinado bloque de texto en fuente gris. Podemos configurar esto usando el siguiente còdigo:

Nuestro còdigo devuelve: Haga clic en & nbsp; ’Imagen botòn en el editor de còdigo de arriba para ver el resultado de nuestro còdigo HTML / CSS.

Usamos una "p" etiqueta HTML para definir un párrafo de texto que describe la tienda de comestibles Peterson and Sons. Luego, en nuestro còdigo CSS, creamos un estilo que establece el color del texto de todas las etiquetas "p" en gris. Para hacerlo, usamos un valor de nombre de color (" gris ").

Podrìamos especificar " rgb (128, 128, 128) " en lugar de " gris " si quisiéramos referirnos a un valor de color RGB. Alternativamente, podrìamos haber establecido el color del texto en gris usando un valor hexadecimal o un valor HSL.

No estamos usando un archivo CSS para nuestros estilos. Nuestros estilos CSS se incluyen dentro de un "style" etiqueta en nuestro documento HTML.

Color de fondo de texto CSS

La propiedad de color de fondo de CSS establece el color de fondo de un elemento. La propiedad de color de fondo acepta cualquiera de los valores de color discutidos anteriormente (nombre del color, HEX, RGB , HSL). Esta propiedad puede establecer el color de fondo del texto.

La sintaxis de la propiedad background-color es:

Este còdigo establece un color de fondo azul para todas las etiquetas "p" en una página.

Ejemplo de color de fondo de texto CSS

Suponga que queremos agregar un color de fondo naranja a una de las oraciones en el párrafo de texto en el ejemplo anterior.

La oraciòn que queremos resaltar es " Hoy, Peterson and Sons opera cinco tiendas en el área de Seattle " Y, como antes, queremos todo el texto en el párrafo h para que aparezca en gris. Podemos aplicar esta decoraciòn de texto usando el siguiente còdigo:

Nuestro còdigo devuelve: Haga clic en & nbsp; ’Imagen botòn en el editor de còdigo de arriba para ver el resultado de nuestro còdigo HTML / CSS.

En nuestro archivo HTML, definimos un párrafo de texto encerrándolo en etiquetas "p". Luego, incluimos la √∫ltima oraciòn en una etiqueta HTML "span" . Hacerlo nos permitiò aplicar un estilo especìfico solo a esa oraciòn en particular en nuestro còdigo.

En nuestro còdigo CSS, especificamos dos reglas. La primera regla establece el color de todo el texto dentro de las etiquetas "p" en gris. La segunda regla establece el color de fondo de todo el texto dentro de las etiquetas "span" en naranja.

Como puede ver arriba, la oraciòn final de nuestro còdigo & mdash; la que está incluida en las etiquetas "span" tiene un color de fondo naranja. Este es el resultado de la segunda regla de estilo que escribiò.

Conclusiòn

La propiedad de color CSS le permite establecer el color del texto en una página web. La propiedad background-color le permite establecer un color de fondo para el texto de una página web.

Este tutorial explica, con ejemplos, còmo realizar estas tareas. ¬°Ahora está equipado con las habilidades que necesita para cambiar los colores de fuente y los colores de fondo del texto como un dise√±ador web experto!

¿Está interesado en aprender más sobre HTML? Consulte nuestra guìa de còmo aprender HTML . En esta guìa encontrará consejos de aprendizaje de expertos y orientaciòn sobre los principales recursos de codificaciòn.