Tutorial de CSS - Temarios

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>
  <meta charset="UTF-8">
  <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;
}

32 - Formas para indicar el color.

Retornar