32 - Formas para indicar el color.



Problema:

Utilizando la sintaxis simplificada para indicar las proporciones de rojo, verde y azul. pintar el fondo de 16 párrafos. Comenzar por el valor #000 hasta el #fff.
Hacer que los párrafos estén sin margen entre si. También variar el color de la fuente para que permita su lectura.

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>

<p id="p1">Este es el párrafo nro 1</p>
<p id="p2">Este es el párrafo nro 2</p>
<p id="p3">Este es el párrafo nro 3</p>
<p id="p4">Este es el párrafo nro 4</p>
<p id="p5">Este es el párrafo nro 5</p>
<p id="p6">Este es el párrafo nro 6</p>
<p id="p7">Este es el párrafo nro 7</p>
<p id="p8">Este es el párrafo nro 8</p>
<p id="p9">Este es el párrafo nro 9</p>
<p id="p10">Este es el párrafo nro 10</p>
<p id="p11">Este es el párrafo nro 11</p>
<p id="p12">Este es el párrafo nro 12</p>
<p id="p13">Este es el párrafo nro 13</p>
<p id="p14">Este es el párrafo nro 14</p>
<p id="p15">Este es el párrafo nro 15</p>
<p id="p16">Este es el párrafo nro 16</p>
</body>
</html>
p {
  margin:0;
  padding:0;
}

#p1 {
  background-color:#000;
  color:#fff;
}

#p2 {
  background-color:#111;
  color:#eee;
}

#p3 {
  background-color:#222;
  color:#ddd;
}

#p4 {
  background-color:#333;
  color:#ccc;
}

#p5 {
  background-color:#444;
  color:#bbb;
}

#p6 {
  background-color:#555;
  color:#aaa;
}

#p7 {
  background-color:#666;
  color:#999;
}

#p8 {
  background-color:#777;
  color:#ff0;
}

#p9 {
  background-color:#888;
  color:#777;
}

#p10 {
  background-color:#999;
  color:#666;
}


#p11 {
  background-color:#aaa;
  color:#555;
}

#p12 {
  background-color:#bbb;
  color:#444;
}

#p13 {
  background-color:#ccc;
  color:#333;
}

#p14 {
  background-color:#ddd;
  color:#222;
}

#p15 {
  background-color:#eee;
  color:#111;
}

#p16 {
  background-color:#fff;
  color:#000;
}
Ver solución


Retornar