Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Lorenzo31 en 14 de Febrero 2016, 19:33
-
Buenas, dejo el ejercicio propuesto para la corrección.
<!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
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%;}
-
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
-
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:
<!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
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.