Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: gabrms en 01 de Junio 2018, 16:13
-
Hola, es mi primera experiencia en subir (o intentarlo) un ejercicio resuelto: Espero que salga bien y sobre todo cumplir las normas establecidas. Pido disculpas si no es así.
En este ejercicio he tenido un verdadero quebradero de cabeza por una insignificante coma. ".a{background-color:rgba(178,34,34 aquí no había coma .1);}" Eso en todos los selectores class creados para el ejercicio. Cansado de buscar una solución acudí al foro y comprobé que todos utilizaban div en lugar de table, tr, td. Así que me cambié a div. Pero tampoco resultaba, claro seguía faltando la dichosa coma. Bueno debe ser cierto que quién la sigue la consigue, finalmente he visto el error y ahora me da igual la opción table o div. He personalizado un poco el ejercicio.
De cualquier forma planteo esta pregunta, ¿es mejor una opción que la otra? Por supuesto acepto con buena disposición cualquier sugerencia que mejore el ejercicio.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Colores transparencia 20</title>
<link rel="stylesheet" type="text/css" href="est.css">
</head>
<body>
<table>
<thead>
<tr class="k">
<th> Grados de transparencia desde 0.0 hasta 1.0 </th>
</tr>
</thead>
<tbody>
<tr class="y">
<td>RGB 178,34,34 0.0</td>
</tr>
<tr class="a">
<td>RGB 178,34,34 .1</td>
</tr>
<tr class="b">
<td>RGB 178,34,34 .2</td>
</tr>
<tr class="c">
<td>RGB 178,34,34 .3</td>
</tr>
<tr class="d">
<td>RGB 178,34,34 .4</td>
</tr>
<tr class="e">
<td>RGB 178,34,34 .5</td>
</tr>
<tr class="f">
<td>RGB 178,34,34 .6</td>
</tr>
<tr class="g">
<td>RGB 178,34,34 .7</td>
</tr>
<tr class="h">
<td>RGB 178,34,34 .8</td>
</tr>
<tr class="i">
<td>RGB 178,34,34 .9</td>
</tr>
<tr class="j">
<td>RGB 178,34,34 1.0</td>
</tr>
</tbody>
<thead>
<tr class="k">
<th>Grados de transparencia desde 1.0 hasta 0.0</th>
</tr>
</thead>
<tbody>
<tr class="l">
<td>RGB 218,165,32 1.0</td>
</tr>
<tr class="m">
<td>RGB 218,165,32 .9</td>
</tr>
<tr class="n">
<td>RGB 218,165,32 .8</td>
</tr>
<tr class="o">
<td>RGB 218,165,32 .7</td>
</tr>
<tr class="p">
<td>RGB 218,165,32 .6</td>
</tr>
<tr class="q">
<td>RGB 218,165,32 .5</td>
</tr>
<tr class="r">
<td>RGB 218,165,32 .4</td>
</tr>
<tr class="s">
<td>RGB 218,165,32 .3</td>
</tr>
<tr class="t">
<td>RGB 218,165,32 .2</td>
</tr>
<tr class="u">
<td>RGB 218,165,32 .1</td>
</tr>
<tr class="z">
<td>RGB 218,165,32 0.0</td>
</tr>
</tbody>
</table>
</body>
</html>/*Estilos del ejercicio CU1020D*/
*{margin: 10px; padding:5px 5px;}
body{ border: 1px solid navy; width:80%; font-family: verdana; font-size: 22px;}
/*Estilos para los td en general*/
td{text-align: center;border: 1px solid orange; padding: .2em .21em;}
.k{background-color:#C9C9C9;}
/*Color de fondo para la primera serie de filas de la tabla*/
h4{text-align: center;border: 1px solid red; padding: .2em .1em;
background-color:#C9C9C9;}
.y{background-color:rgba(178,34,34,.0);}
.a{background-color:rgba(178,34,34,.1);}
.b{background-color:rgba(178,34,34,.2);}
.c{background-color:rgba(178,34,34,.3);}
.d{background-color:rgba(178,34,34,.4);}
.e{background-color:rgba(178,34,34,.5);}
.f{background-color:rgba(178,34,34,.6);}
.g{background-color:rgba(178,34,34,.7);}
.h{background-color:rgba(178,34,34,.8);}
.i{background-color:rgba(178,34,34,.9);}
.j{background-color:rgba(178,34,34,1.0);}
/*Color de fondo para la segunda serie de filas de la tabla*/
.l{background-color:rgba(218,165,32,1.0);}
.m{background-color:rgba(218,165,32,.9);}
.n{background-color:rgba(218,165,32,.8);}
.o{background-color:rgba(218,165,32,.7);}
.p{background-color:rgba(218,165,32,.6);}
.q{background-color:rgba(218,165,32,.5);}
.r{background-color:rgba(218,165,32,.4);}
.s{background-color:rgba(218,165,32,.3);}
.t{background-color:rgba(218,165,32,.2);}
.u{background-color:rgba(218,165,32,.1);}
.z{background-color:rgba(218,165,32,.0);}
-
Hola gabrms: el código lo has pegado correctamente. Lo único que te ha faltado es poner un título adecuado al tema. En general deben seguirse las pautas indicadas en este hilo: https://aprenderaprogramar.com/foros/index.php?topic=1460.0.
El título que has puesto es "Entrega nº20 del Tutorial básico del programador web: CSS desde cero." y ahí falta una cosa básica: el código del ejercicio, en este caso CU01020D. Mediante ese código se facilita identificar el ejercicio de que se trata, e introduciéndolo en el buscador del foro puedes obtener como resultados todos los hilos donde se habla de este ejercicio. Igualmente en lugar de el título utilizado es preferible usar palabras clave que permitan usar el buscador del foro cuando se tenga interés por un tema. Por ejemplo en este caso el título podría ser "Colores HTML - CSS con transparencia indicada como rgba gradación creciente CU01020D"
Tu ejercicio está bien resuelto y bien presentado. En este caso el ejercicio no pedía que se hiciera con table o con div, por tanto está igualmente bien resuelto de una manera u otra. En general, a la hora de maquetar la tendencia es a no usar tablas y darle preferencia al uso de div porque esto presenta algunas ventajas. No obstante, será la experiencia quien mejor te vaya aconsejando cuándo usar una cosa u otra. Hay una cosa que no me ha gustado, y es que apliques un borde y un ancho al body del 80%. El body es como el lienzo y por tanto no se le suele poner borde ni limitar su anchura. No obstante, hacerse se puede hacer y además el ejercicio no está mejor ni peor por ello.
Saludos.