Hasta ahora hemos visto que para asignar el color utilizamos tres valores hexadecimales (rojo,verde,azul) precedido por el caracter #:
background-color:#ff0000;
Ahora veremos otras sintaxis para indicar el color:
background-color:rgb(255,0,0);
Utilizando la función rgb pasando como parámetro la cantidad de rojo, verde y azul en formato decimal (un valor entre 0 y 255).
También con la función rgb podemos indicar un porcentaje entre 0% y 100% para cada componente:
background-color:rgb(100%,0%,0%)
Por último en algunas situaciones podemos utilizar una sintaxis reducida para ciertos valores:
background-color:#ffaaff;
Lo podemos indicar con esta otra sintaxis resumida:
background-color:#faf;
Es decir si cada valor hexadecimal está formado por el mismo caracter o número podemos utilizar esta sintaxis simplificada indicando un caracter o número solamente. Es decir a este color no lo podemos representar con la sintaxis indicada:
background-color:#ffaafa
Ya que los últimos 2 caracteres, fa, son distintos.
Confeccionemos una página y creemos distintas clases utilizando distintos formatos de asignación de color:
pagina.html
<<!DOCTYPE html> <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="fondo1">Primer párrafo</p> <p class="fondo2">Segundo párrafo</p> <p class="fondo3">Tercer párrafo</p> </body> </html>
estilos.css
.fondo1 {
background-color:rgb(255,0,0);
}
.fondo2 {
background-color:rgb(100%,50%,50%);
}
.fondo3 {
background-color:#fab;
}