« anterior próximo »
Páginas: [1]

Autor Tema: Unidades de medida CSS relativas absolutas diferencia entre px em pt % CU01024D  (Leído 2637 veces)

Lorenzo31

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 381
    • Ver Perfil
Unidades de medida CSS relativas absolutas diferencia entre px em pt % CU01024D
« en: 14 de Febrero 2016, 19:33 »
Buenas, dejo el ejercicio propuesto para la corrección.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/>
   <link rel="stylesheet" type="text/css" href="estilos124D.css"/>
</head>
<body>
<div id="wrapper">
<div id="content">
<table class="propiedadesTabla">
<tr>
<td>Título</td>
<td>Tamaño px</td>
<td>Tamaño em</td>
<td>Tamaño en pt</td>
<td>Tamaño %</td>
</tr>
<tr>
<td><h1>Prueba<h1></td>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
<tr>
<td><h2>Prueba2</h2></td>
<td>Prueba2</td>
<td>Prueba2</td>
<td>Prueba2</td>
<td>Prueba2</td>
</tr>
<tr>
<td><h3>Prueba3</h3></td>
<td>Prueba3</td>
<td>Prueba3</td>
<td>Prueba3</td>
<td>Prueba3</td>
</tr>
<tr>
<td><h4>Prueba4</h4></td>
<td>Prueba4</td>
<td>Prueba4</td>
<td>Prueba4</td>
<td>Prueba4</td>
</tr>
<tr>
<td><h5>Prueba5</h5></td>
<td>Prueba5</td>
<td>Prueba5</td>
<td>Prueba5</td>
<td>Prueba5</td>
</tr>
<tr>
<td><h6>Prueba6</h6></td>
<td>Prueba6</td>
<td>Prueba6</td>
<td>Prueba6</td>
<td>Prueba6</td>
</tr>
</table>
</div>
</div>
</body>
</html>


estilos124D.css

Código: [Seleccionar]
html, body {height:100%; margin:0; text-align:center;}
#wrapper { width:100%; height:100%;}
#content { width:100%; height:100%; }
table.propiedadesTabla { width:100%; height: 100%; border: 1px solid black; font-weight:bold;}
table.propiedadesTabla tr, table.propiedadesTabla td { border: 1px solid black; }
table.propiedadesTabla tr:first-child { background-color: #E6E6E6; font-weight:normal; }
/* Segunda Fila */
table.propiedadesTabla tr:nth-child(2) td:nth-child(2){ font-size:32px;}
table.propiedadesTabla tr:nth-child(2) td:nth-child(3){ font-size:2em;}
table.propiedadesTabla tr:nth-child(2) td:nth-child(4){ font-size:24pt;}
table.propiedadesTabla tr:nth-child(2) td:nth-child(5){ font-size:200%;}
/*Tercera Fila */
table.propiedadesTabla tr:nth-child(3) td:nth-child(2){ font-size:25px;}
table.propiedadesTabla tr:nth-child(3) td:nth-child(3){ font-size:1.7em;}
table.propiedadesTabla tr:nth-child(3) td:nth-child(4){ font-size:20pt;}
table.propiedadesTabla tr:nth-child(3) td:nth-child(5){ font-size:170%;}
/*Cuarta Fila*/
table.propiedadesTabla tr:nth-child(4) td:nth-child(2){ font-size:20px;}
table.propiedadesTabla tr:nth-child(4) td:nth-child(3){ font-size:1.25em;}
table.propiedadesTabla tr:nth-child(4) td:nth-child(4){ font-size:14pt;}
table.propiedadesTabla tr:nth-child(4) td:nth-child(5){ font-size:120%;}
/*Sexta Fila*/
table.propiedadesTabla tr:nth-child(6) td:nth-child(2){ font-size:13px;}
table.propiedadesTabla tr:nth-child(6) td:nth-child(3){ font-size:0.8em;}
table.propiedadesTabla tr:nth-child(6) td:nth-child(4){ font-size:10pt;}
table.propiedadesTabla tr:nth-child(6) td:nth-child(5){ font-size:80%;}
/*Septima Fila*/
table.propiedadesTabla tr:nth-child(7) td:nth-child(2){ font-size:11px;}
table.propiedadesTabla tr:nth-child(7) td:nth-child(3){ font-size:0.7em;}
table.propiedadesTabla tr:nth-child(7) td:nth-child(4){ font-size:8pt;}
table.propiedadesTabla tr:nth-child(7) td:nth-child(5){ font-size:65%;}

« Última modificación: 16 de Febrero 2016, 09:21 por Mario R. Rancel »
En línea

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:Unidades de medida CSS relativas absolutas diferencia entre px em pt % CU01024D
« Respuesta #1 en: 16 de Febrero 2016, 09:21 »
Buenos días hay dos cosas que no acabo de ver

La primera es que en vez de prueba-prueba-prueba para poder visualizar las diferencias debería mostrarse por pantalla en cada celda qué es lo que se está mostrando, por ejemplo

<tr>
   <td><h1>Prueba h1<h1></td>
   <td>Prueba 32px</td>
   <td>Prueba 2em</td>
   <td>Prueba 24pt</td>
   <td>Prueba 200%</td>
</tr>

Así sabemos qué muestra cada celda

La segunda es que aplicas estilos a:
/* Segunda Fila */
/*Tercera Fila */
/*Cuarta Fila*/
/*Sexta Fila*/

¿Y la quinta fila?

Supongo que estás considerando el tamaño por defecto del texto en el navegador cuando no se aplican estilos, pero deberías indicarlo también (por ejemplo si es 1em indicar 1em y así para todos los valores)

Saludos
En línea

Lorenzo31

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 381
    • Ver Perfil
Re:Unidades de medida CSS relativas absolutas diferencia entre px em pt % CU01024D
« Respuesta #2 en: 16 de Febrero 2016, 12:19 »
Vale entiendo, sí usé Prueba Prueba .. para que se viera solo el efecto visual "igual" y en el codigo CSS dejar los valores, pero quizás mejor como tu dices para verlo mas bien.

Sí en la fila quinta no hice nada, porque era el tamaño que el navegador usa equivalente a la unidad 1. Tambien lo deberia haber indicado pues podria pasar que cambiara de un navegador a otro.

Rectificar es lo que me toca para aprender, ahí va:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/>
   <link rel="stylesheet" type="text/css" href="estilos124D.css"/>
</head>
<body>
<div id="wrapper">
<div id="content">
<table class="propiedadesTabla">
<tr>
<td>Título</td>
<td>Tamaño px</td>
<td>Tamaño em</td>
<td>Tamaño en pt</td>
<td>Tamaño %</td>
</tr>
<tr>
<td><h1>Prueba1<h1></td>
<td>Prueba 32px</td>
<td>Prueba 2em</td>
<td>Prueba 24pt</td>
<td>Prueba 200%</td>
</tr>
<tr>
<td><h2>Prueba2</h2></td>
<td>Prueba 25px</td>
<td>Prueba 1.7em</td>
<td>Prueba 20pt</td>
<td>Prueba 170%</td>
</tr>
<tr>
<td><h3>Prueba3</h3></td>
<td>Prueba 20px</td>
<td>Prueba 1.25em</td>
<td>Prueba 14pt</td>
<td>Prueba 120%</td>
</tr>
<tr>
<td><h4>Prueba4</h4></td>
<td>Prueba 16px</td>
<td>Prueba 1em</td>
<td>Prueba 12pt</td>
<td>Prueba 100%</td>
</tr>
<tr>
<td><h5>Prueba5</h5></td>
<td>Prueba 13px</td>
<td>Prueba 0.8em</td>
<td>Prueba 10pt</td>
<td>Prueba 80%</td>
</tr>
<tr>
<td><h6>Prueba6</h6></td>
<td>Prueba 10px</td>
<td>Prueba 0.7em</td>
<td>Prueba 8pt</td>
<td>Prueba 65%</td>
</tr>
</table>
</div>
</div>
</body>
</html>


estlos 124D.css
Código: [Seleccionar]
html, body {height:100%; margin:0; text-align:center;}
#wrapper { width:100%; height:100%;}
#content { width:100%; height:100%; }
table.propiedadesTabla { width:100%; height: 100%; border: 1px solid black; font-weight:bold;}
table.propiedadesTabla tr, table.propiedadesTabla td { border: 1px solid black; }
table.propiedadesTabla tr:first-child { background-color: #E6E6E6; font-weight:normal; }
/* Segunda Fila */
table.propiedadesTabla tr:nth-child(2) td:nth-child(2){ font-size:32px;}
table.propiedadesTabla tr:nth-child(2) td:nth-child(3){ font-size:2em;}
table.propiedadesTabla tr:nth-child(2) td:nth-child(4){ font-size:24pt;}
table.propiedadesTabla tr:nth-child(2) td:nth-child(5){ font-size:200%;}
/*Tercera Fila */
table.propiedadesTabla tr:nth-child(3) td:nth-child(2){ font-size:25px;}
table.propiedadesTabla tr:nth-child(3) td:nth-child(3){ font-size:1.7em;}
table.propiedadesTabla tr:nth-child(3) td:nth-child(4){ font-size:20pt;}
table.propiedadesTabla tr:nth-child(3) td:nth-child(5){ font-size:170%;}
/*Cuarta Fila*/
table.propiedadesTabla tr:nth-child(4) td:nth-child(2){ font-size:20px;}
table.propiedadesTabla tr:nth-child(4) td:nth-child(3){ font-size:1.25em;}
table.propiedadesTabla tr:nth-child(4) td:nth-child(4){ font-size:14pt;}
table.propiedadesTabla tr:nth-child(4) td:nth-child(5){ font-size:120%;}
/*Quinta Fila*/
table.propiedadesTabla tr:nth-child(5) td:nth-child(2){ font-size:16px;}
table.propiedadesTabla tr:nth-child(5) td:nth-child(3){ font-size:1em;}
table.propiedadesTabla tr:nth-child(5) td:nth-child(4){ font-size:12pt;}
table.propiedadesTabla tr:nth-child(5) td:nth-child(5){ font-size:100%;}

/*Sexta Fila*/
table.propiedadesTabla tr:nth-child(6) td:nth-child(2){ font-size:13px;}
table.propiedadesTabla tr:nth-child(6) td:nth-child(3){ font-size:0.8em;}
table.propiedadesTabla tr:nth-child(6) td:nth-child(4){ font-size:10pt;}
table.propiedadesTabla tr:nth-child(6) td:nth-child(5){ font-size:80%;}
/*Septima Fila*/
table.propiedadesTabla tr:nth-child(7) td:nth-child(2){ font-size:11px;}
table.propiedadesTabla tr:nth-child(7) td:nth-child(3){ font-size:0.7em;}
table.propiedadesTabla tr:nth-child(7) td:nth-child(4){ font-size:8pt;}
table.propiedadesTabla tr:nth-child(7) td:nth-child(5){ font-size:65%;}


Gracias Mario.
En línea
Páginas: [1]
« anterior próximo »
 

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