Logotipo de Aprende Gratis.

CSS - Lección 7: Definición del color del texto

En esta lección vamos a profundizar en el tema de aplicar color a distintos elementos; por ejemplo, explicaremos técnicas para dominar la aplicación de color a nuestros textos.

Estos elementos tienen un denominador común: albergan dentro de ellos texto, el color del texto de los diversos elementos se puede manipular por medio de las hojas de estilo en cascada.

Existen muchas formas de implementar color al texto; cada una tiene sus ventajas y sus incovenientes. La razón por la que se puede aplicar color al texto de diversas formas, es porque hay circunstancias a la hora de diseñar que requieren una forma de implementación u otra.

Por ejemplo, hay desarrollos de diseños que no son muy complejos, entonces bastaría para implementar color dándole valores a la propiedad color mediante el nombre del color en cuestión. Trabajando en diseños complejos no podríamos aplicar esta clase de valores.

La forma más simple de aplicar color al texto de un elemento; como puede ser un párrafo o una lista, es estableciendo como valor el nombre (en inglés) del color que deseemos aplicar a la propiedad color. Por ejemplo, en la declaración color:blue; estableceríamos el color azul para el texto.

La segunda forma de controlar el color del texto es aplicando valores hexadecimales al color. Esta nueva forma de implementar valores es más precisa que la primera, y está destinada a conseguir mayor precisión en el color que deseamos establecer. Como ejemplo, para introducirnos, tenemos la siguiente declaración que establece el color verde para el texto: color:#00FF00;.

Su funcionamiento es el siguiente: se trata de tres pares de números; que miden la catidad de color primario que se aplicará. El primer par de números corresponde al color rojo, el pár de números del medio corresponde al color verde, y el último par de números al color azul. Mezclando estos tres, en mayor o menor grado, podemos crear cualquier color.

Un formato de color hexadecimal en donde se indica el color de cada pareja de números.
Figura 8.  Los colores que representa cada pareja
de números hexadecimales.

La tercera forma de aplicar color se basa en la anterior: mezclando distintas cantidades de colores primarios. La diferencia está en la sintaxis, ya que en este caso no se usa notación hexadecimal; lo que se usa son coordenadas paramétricas. Aquí un ejemplo de esta forma para color azul: color:rgb(0,0,255);.

La sintaxsis del valor de la propiedad empieza por unas siglas, las iniciales de cada color que se representa: red, green y blue. Entre paréntesis ponemos los parámetros de cada color separados por comas; el rango va de 0 a 255.

Existe una variante que consiste en poner los parámetros en tanto por ciento, en vez de utilizar el rango de 0 a 255. Por ejemplo, podemos escribir la siguiente declaración para poner un color rojo:rgb(100%,0%,0%);.

Relación de valores para el color
color nombre hexadecimal paramétrica paramétrica
rojo red #FF0000 rgb(255,0,0) rgb(100%,0%,0%)
lima lime #00FF00 rgb(0,255,0) rgb(0%,100%,0%)
azul blue #0000FF rgb(0,0,255) rgb(0%,0%,100%)
negro black #000000 rgb(0,0,0) rgb(0%,0%,0%)
blanco white #FFFFFF rgb(255,255,255) rgb(100%,100%,100%)
amarillo yellow #FFFF00 rgb(255,255,0) rgb(100%,100%,0%)
celeste aqua #00FFFF rgb(0,255,255) rgb(0%,100%,100%)
rosa pink #FFC0CB rgb(255,192,203) rgb(100%,75%,80%)
morado purple #800080 rgb(128,0,128) rgb(50%,0%,50%)

Estos son solo algunos ejemplos, puedes acceder a una completa paleta de colores a través de este enlace.


Ir a:


Aprende Gratis 2017 © Mario Raja | página web responsive.