Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Temas - gabrms

Páginas: [1]
1
Aprender a programar desde cero / Unidades de medida CSS relativas o absolutas. in, cm, mm, pt, pc, pixel CU01024D
« en: 03 de Junio 2018, 18:22 »
A continuación aporto el ejercicio Entrega CU01024D del Tutorial básico del programador web: CSS desde cero de aprenderaprogramar.

Debo aclarar que aunque creo que el ejercicio estará correcto,en caso contrario me gustaría que se rebatiese, no es la primera opción que me planteé.

El codigo de html es prácticamente el mismo, pero en css, he tenido que cambiarlo, tomando la idea del foro. Pego el código y después pegaré el código tal como yo quise hacerlo sin conseguirlo. Si alguién que lo lea, me puede aclarar porque no funciona le estaré agradecido

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Unidades Css: absolutas y relativas</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<table>
<thead>
<tr class="a">
<th>Título </th>
<th>Tamaño px</th>
<th>Tamaño em</th>
<th>Tamaño pt</th>
<th>Tamaño %</th>
</tr>
</thead>
<tbody>
<tr class="b">
<td><h1>h1 pred</h1></td>
<td class="a1">h1 32 px</td>
<td class="a2">h1 2em</td>
<td class="a3">h1 24 pt</td>
<td class="a4">h1 200%</td>
</tr>
<tr class="c">
<td><h2>h2 pred</h2></td>
<td class="b1">h2 24 px</td>
<td class="b2">h2 1.5em</td>
<td class="b3">h2 18 pt</td>
<td class="b4">h2 150%</td>
</tr>
<tr class="d">
<td><h3>h3 pred</h3></td>
<td class="c1">h3 19 px</td>
<td class="c2">h3 1.2em</td>
<td class="c3">h3 14 pt</td>
<td class="c4">h3 117.6%</td>
</tr>
<tr class="e">
<td><h4>h4 pred</h4></td>
<td class="d1">h4 16 px</td>
<td class="d2">h4 1em</td>
<td class="d3">h4 12 pt</td>
<td class="d4">h4 100%</td>
</tr>
<tr class="f">
<td><h5>h5 pred</h5></td>
<td class="e1">h5 13.4 px</td>
<td class="e2">h5 .83em</td>
<td class="e3">h5 10 pt</td>
<td class="e4">h5 80%</td>
</tr>
<tr class="f">
<td><h6>h6 pred</h6></td>
<td class="f1">h6 10 px</td>
<td class="f2">h6 .7em</td>
<td class="f3">h6 8 pt</td>
<td class="f4">h6 70%</td>
</tr>
</tbody>
</table>
</body>
</html>
Código: [Seleccionar]
table{border: 5px dotted pink; width: 100%; text-align:center;
background-color: #cdcdcd;}
th, td{border: 1px solid blue; font-weight: bold;}
.a{background-color: rgb(128,30,250,0.9);
color:rgb(221,221,221,.9); font-size: 24px; height: 48px;}
.a1{font-size: 32px;}
.a2{font-size: 2em;}
.a3{font-size: 24pt;}
.a4{font-size: 200%;}
.b{background-color: rgb(128,30,250,0.8); color:rgb(108,0,88,.4);}
.b1{font-size: 24px;}
.b2{font-size: 1.5em;}
.b3{font-size: 18pt;}
.b4{font-size: 150%;}
.c{background-color: rgb(128,30,250,0.7); color:rgb(108,0,88,.5);}
.c1{font-size: 19px;}
.c2{font-size: 1.2em;}
.c3{font-size: 14pt;}
.c4{font-size: 117.6%;}
.d{background-color: rgb(128,30,250,0.6); color:rgb(108,0,88,.6);}
.d1{font-size:16px;}
.d2{font-size:1em;}
.d3{font-size:12pt;}
.d4{font-size:100%;}
.e{background-color:rgb(128,30,250,0.5); color:rgb(108,0,88,.7);}
.e1{font-size:13.4px;}
.e2{font-size:.83em;}
.e3{font-size: 10pt;}
.e4{font-size: 80%;}
.f{background-color: rgb(128,30,250,0.4); color:rgb(108,0,88,.8);}
.f1{font-size: 10px;}
.f2{font-size: 0.7em;}
.f3{font-size: 8pt;}
.f4{font-size: 70%;}
Ahora pongo el código que no me ha resultado válido

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Unidades Css: absolutas y relativas</title>
<link rel="stylesheet" type="text/css" href="est.css">
</head>
<body>
<table>
<thead>
<tr class="a">
<th>Título </th>
<th>Tamaño px</th>
<th>Tamaño em</th>
<th>Tamaño pt</th>
<th>Tamaño %</th>
</tr>
</thead>
<tbody>
<tr class="b">
<td><h1>h1 pred</h1></td>
<td>h1 32 px</td>
<td>h1 2em</td>
<td>h1 24 pt</td>
<td>h1 200%</td>
</tr>
<tr class="c">
<td><h2>h2 pred</h2></td>
<td>h2 24 px</td>
<td>h2 1.5em</td>
<td>h2 18 pt</td>
<td>h2 150%</td>
</tr>
<tr class="d">
<td><h3>h3 pred</h3></td>
<td>h3 19 px</td>
<td>h3 1.2em</td>
<td>h3 14 pt</td>
<td>h3 117.6%</td>
</tr>
<tr class="e">
<td><h4>h4 pred</h4></td>
<td>h4 16 px</td>
<td>h4 1em</td>
<td>h4 12 pt</td>
<td>h4 100%</td>
</tr>
<tr class="f">
<td><h5>h5 pred</h5></td>
<td>h5 13.4 px</td>
<td>h5 .83em</td>
<td>h5 10 pt</td>
<td>h5 80%</td>
</tr>
<tr class="f">
<td><h6>h6 pred</h6></td>
<td>h6 10 px</td>
<td>h6 .7em</td>
<td>h6 8 pt</td>
<td>h6 70%</td>
</tr>
</tbody>
</table>
</body>
</html>
Código: [Seleccionar]
table{border: 3px solid pink; width: 100%;}
th, td{border: 1px solid lime; }
.a tr{background-color: #801EFA;}
.a tr:nth-child(2){font-size:32px;}
.a tr:nth-child(3){font-size: 2em;}
.a tr:nth-child(4){font-size:24pt;}
.a tr:nth-child(5){font-size:200%;}
.b tr{background-color: #964173;}
.b tr:nth-child(2){font-size: 24px;}
.b tr:nth-child(3){font-size: 1.5em;}
.b tr:nth-child(4){font-size: 18pt;}
.b tr:nth-child(5){font-size: 150px;}
.c tr{background-color: #7DEDF4;}
.ctr:nth-child(2){font-size: 19px;}
.c tr:nth-child(3){font-size: 1.2em;}
.c tr:nth-child(4){font-size: 14pt;}
.c tr:nth-child(5){font-size: 117.6%;}
.d tr{background-color: #56F765;}
.d tr:nth-child(2){font-size:16px;}
.d tr:nth-child(3){font-size:1em;}
.d tr:nth-child(4){font-size:12pt;}
.d tr:nth-child(5){font-size:100%;}
.e tr{background-color: #BAFA0C;}
.e tr:nth-child(2){font-size:13.4px;}
.e tr:nth-child(3){font-size:.83em;}
.e tr:nth-child(4){font-size: 10pt;}
.e tr:nth-child(5){font-size: 80%;}
.f tr{background-color: #F8A30E;}
.f tr:nth-child(2){font-size: 10px;}
.f tr:nth-child(3){font-size: 0.7em;}
.f tr:nth-child(4){font-size: 8pt;}
.f tr:nth-child(5){font-size: 70%;}

2
Aprender a programar desde cero / Colores HTML CSS transparencia indicada como rgba gradación creciente CU01020D#
« 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.

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);}

Páginas: [1]

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".