Autor Tema: Colores HTML CSS transparencia indicada como rgba gradación creciente CU01020D#  (Leído 2605 veces)

gabrms

  • Sin experiencia
  • *
  • Mensajes: 2
  • El saber no ocupa lugar
    • Ver Perfil
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.

Código: [Seleccionar]
<!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>
Código: [Seleccionar]
/*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);}
« Última modificación: 07 de Julio 2018, 19:08 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
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.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".