Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: KOFFERO en 01 de Noviembre 2017, 07:45
-
Hola amigos!!!
Aqui dejo el ejercicio CU01019D del tutorial de programación web CSS. ;D ;D
Enunciado:
EJERCICIO
En la siguiente tabla están mal ordenados los códigos de colores. Ordénalos de forma que en cada fila estén los códigos equivalentes de forma ordenada y crea un documento HTML donde se muestre un cuadrado donde aparezca como texto el color con la notación empleada, y como color de fondo el color. En total deberás tener 15 cuadrados, cada uno con su texto y su color, correspondientes a las 15 celdas de la tabla.
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio CU01018D</title>
<link rel="stylesheet" href="estilos.css" />
</head>
<body>
<table class="tablaDeColor">
<caption>Ejercicio CU01018D</caption>
<tr>
<th>Nombre</th>
<th>Hexadecimal</th>
<th>RGB</th>
</tr>
<tr class="uno">
<td>DimGray</td>
<td>#696969</td>
<td>105,105,105</td>
</tr>
<tr class="dos">
<td>IndianRed</td>
<td>#CD5C5C</td>
<td>205,92,9</td>
</tr>
<tr class="tres">
<td>FireBrick</td>
<td>#B22222</td>
<td>178,34,34</td>
</tr>
<tr class="cuatro">
<td>DodgerBlue</td>
<td>#1E90FF</td>
<td>30,144,255</td>
</tr>
<tr class="cinco">
<td>Indigo</td>
<td>#4B0082</td>
<td>75,0,130</td>
</tr>
</table>
</body>
</html>
Código CSS:
.tablaDeColor {
width: 50%;
margin: 0 auto;
text-align: center;
}
caption {
font-size: 30px;
background-color: yellow;
margin: 0 auto;
border: solid 1px;
width: 99%
}
.tablaDeColor th {
font-size: 20px;
border: solid 1px;
background-color: yellow;
}
.tablaDeColor td {
border: solid 1px;
width: 50%;
}
.uno {background-color: #696969;}
.dos {background-color: #CD5C5C;}
.tres {background-color: #B22222;}
.cuatro {background-color: #1E90FF;}
.cinco {background-color: #4B0082;}
Un saludo. :D :D :D
-
Edito el mensaje (este ejercicio corresponde a la entrega CU0019D del curso, no a la CU0018D, he corregido el código)
El código que has planteado no cumple con los objetivos del ejercicio. La idea era que cada celda tuviera expresado el color de una manera distinta, y comprobar que se visualiza el mismo color (al ser equivalentes). Sin embargo con tu código se colorean las filas de las tablas usando una única notación, la notación hexadecimal, por ejemplo .uno {background-color: #696969;} con lo cual no se puede ver si existe equivalencia entre las distintas notaciones.