Cambie fácilmente los colores de las fuentes utilizando nombres de colores CSS, códigos hexadecimales y RGBA

Cambie fácilmente los colores de las fuentes utilizando nombres de colores CSS, códigos hexadecimales y RGBA

Cambie fácilmente los colores de las fuentes utilizando nombres de colores CSS, códigos hexadecimales y RGBA

VALORACIÓN DEL ARTÍCULO:
5/5


Un buen diseño tipográfico es una parte importante de un sitio web exitoso. CSS le da un gran control sobre la apariencia del texto en las páginas web que construye. Esto incluye la posibilidad de cambiar el color de las fuentes que utilice.

A continuación, veremos cómo cambiar el color de la fuente usando una hoja de estilo externa y un estilo que se usa en una etiqueta de párrafo. Puede aplicar la misma propiedad de estilo para cambiar el color de fuente en cualquier etiqueta que rodea al texto, incluyendo la etiqueta .

Adición de estilos para cambiar el color de la fuente

Para este ejemplo, necesita tener un documento HTML para ver los cambios de CSS y un archivo CSS separado que se adjunta a ese documento. Vamos a ver el elemento de párrafo, específicamente.

Para cambiar el color del texto de cada párrafo de su archivo HTML, vaya a la hoja de estilo externa y escriba p { } . Coloque la propiedad color en el estilo seguido de dos puntos, como p { color: } . Luego, agregue su valor de color después de la propiedad, terminándola con un punto y coma: p { color: negro;} .

Los valores de color pueden expresarse como palabras clave de color, números de color RGB o números de color hexadecimales. En nuestro ejemplo, el texto del párrafo se cambia al color negro.

Sin embargo, si desea cambiar el color del texto a verde, azul, rojo, etc., el uso de palabras clave de color no le dará la flexibilidad que podría desear para crear diferentes tonos. Ahí es donde los valores hexadecimales entran en juego.

 p { color: #000000; }

Este estilo CSS puede ser usado para colorear sus párrafos de negro porque el código hexadecimal #00000000 se traduce a negro. Podrías incluso usar taquigrafía con ese valor hexadecimal y escribirlo como #000 con los mismos resultados.

 p { color: #2f5687; }

Como mencionamos anteriormente, los valores hexadecimales funcionan bien cuando se necesita un color que no sea simplemente blanco o negro. El valor hexadecimal CSS de arriba establecería los párrafos en un color azul, pero a diferencia de la palabra clave "azul", este código hexadecimal le da la capacidad de establecer un tono muy específico de azul, un azul de rango medio, similar a la pizarra en este caso.

 p { color: rgba(47,86,135,1); }

Por último, también puede utilizar valores de color RGBA para los colores de fuente. RGCA es compatible con todos los navegadores modernos, por lo que puede utilizar estos valores con la confianza de que funcionará para la mayoría de los espectadores, pero también puede establecer una alternativa fácil.

Este valor RGBA es el mismo que el color azul pizarra especificado anteriormente. Los tres primeros valores establecen los valores Rojo, Verde y Azul y el número final es el ajuste alfabético para la transparencia. El ajuste alfabético está ajustado a 1 para significar 100 por ciento, por lo que este color no tiene transparencia. Si establece ese valor a un número decimal, como.85, se traduce a 85 por ciento de opacidad y el color sería ligeramente transparente.

 p {
color: #2f5687;
color: rgba(47,86,135,1);

Si quieres que tus valores de color sean a prueba de balas, imita el código CSS de arriba. Esta sintaxis establece primero el código hexadecimal y luego sobrescribe ese valor con el número RGBA. Esto significa que cualquier navegador antiguo que no soporte RGBA obtendrá el primer valor e ignorará el segundo.

Otras maneras de dar estilo a una página HTML

Los colores de las fuentes se pueden cambiar con una hoja de estilo externa, una hoja de estilo interna o un estilo en línea dentro del documento HTML. Sin embargo, las mejores prácticas dictan que debe utilizar una hoja de estilo externa para sus estilos CSS.

Una hoja de estilo interna, que son estilos escritos directamente en la "cabecera" de su documento, generalmente sólo se utilizan para sitios web pequeños de una página. Los estilos en línea deben evitarse ya que son similares a las antiguas etiquetas de "fuente" con las que tratamos hace muchos años. Estos estilos en línea hacen que sea muy difícil gestionar el estilo de fuente, ya que hay que cambiarlos en cada instancia del estilo en línea.

TAMBIÉN TE INTERESA

etiquetado energético en smartphones

Esto es lo que nos encontraremos en el nuevo etiquetado energético en smartphones

A partir del próximo 20 de junio, tendremos novedades como consumidores de tecnología. La Unión Europea ha decidido incorporar un nuevo etiquetado energético en smartphones y tablets. Todos estos dispositivos que se comercialicen en el viejo continente deberán llevar  una nueva etiqueta energética obligatoria, tal como establece el Reglamento 2023/1669. Esta medida no solo busca

Internet con IA

Internet con IA: todo lo que cambia (y está por cambiar) en la Red de Redes

Tal y como lo hemos conocido durante tres décadas, internet ha funcionado como una plaza pública (virtual) sin límites: un espacio de comunicación, información y oportunidad en el que todos podíamos participar. Pero esa plaza está cambiando porque Internet con IA nos va a cambiar el paso a todos. Como está sucediendo con prácticamente todo

nuevo mac studio

El nuevo Mac Studio es inalcanzable para cualquier PC de escritorio

Apple ha presentado su equipo de sobremesa más potente hasta la fecha: el nuevo Mac Studio, impulsado por los chips M4 Max y el nuevo M3 Ultra, una auténtica bestia orientada a profesionales de la inteligencia artificial, el diseño, la ingeniería o el desarrollo de software que buscan rendimiento extremo en un formato compacto. Vale,

camara seguridad doble lente de Beans View

Beans View tiene una cámara de seguridad de doble lente a un precio imbatible en Amazon

La seguridad inteligente del hogar da un nuevo paso con la Beans View 220 Dual 3K, la última incorporación al catálogo de la marca especializada en cámaras Wi-Fi. Este nuevo modelo, diseñado para ofrecer una vigilancia integral y precisa en espacios interiores, combina tecnología de doble lente, inteligencia artificial, visión nocturna a color y seguimiento

industria del videojuego

La industria del videojuego ya se mueve por un público muy distinto al de hace años

Durante años, el imaginario colectivo ha situado al jugador de videojuegos en el rincón oscuro de una habitación, joven, solitario, inmóvil frente a una pantalla. Esa imagen está cada vez más lejos de la realidad para la industria del videojuego. La V Radiografía del Gaming en España, elaborada por el ecommerce tecnológico PcComponentes, desmonta con