Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 22 de Agosto 2017, 02:17
-
Buenas noches. Este es el enunciado del ejercicio CU01024D del tutorial de programación web con CSS como si estuviera en primero:
Los navegadores aplican un tamaño por defecto a los títulos h1 a h6, aunque estos tamaños no son siempre los mismos sino que dependen del navegador que se emplee. Para el navegador que estés empleando, divide la página web en una cuadrícula con 5 espacios a lo ancho y 6 espacios a lo alto, tal y como se ve en la siguiente tabla. En cada espacio, muestra un texto y la forma en que se ha definido el tamaño. Por ejemplo: h1 (predefinido), h1 (px), h1 (em), h1 (pt), h1 (%). El resultado ha de ser que todo se vea del mismo tamaño y modo, pero sin embargo la forma de definir el estilo será diferente en cada caso. Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.
Orientación: h1 suele ser 24px ó 2em en la mayoría de los casos, pero tendrás que comprobarlo en el navegador que estés empleando.
(http://i.imgur.com/ndPdOzs.png)
Acá el código:
<!DOCTYPE html>
<html>
<head>
<title>
CU01024D
</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilosCU01024D.css"/>
</head>
<body>
<table border="1px;">
<tr>
<th>Título</th>
<th>Tamaño px</th>
<th>Tamaño em</th>
<th>Tamaño pt</th>
<th>Tamaño %</th>
</tr>
<tr>
<td>H1</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
</tr>
<tr>
<td>H2</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
</tr>
<tr>
<td>H3</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
</tr>
<tr>
<td>H4</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
</tr>
<tr>
<td>H5</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
</tr>
<tr>
<td>H6</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
<td>Programación</td>
</tr>
</table>
</body>
</html>
Acá los estilos CSS:
/*Estilos de la tabla*/
table{width: 100%; text-align: center;}
/*Tamaños de los título H1*/
table tr:nth-child(2) td:nth-child(2){font-size:32px;}
table tr:nth-child(2) td:nth-child(3){font-size:2em;}
table tr:nth-child(2) td:nth-child(4){font-size:24pt;}
table tr:nth-child(2) td:nth-child(5){font-size:200%;}
/*Tamaños de los títulos H2*/
table tr:nth-child(3) td:nth-child(2){font-size:24px;}
table tr:nth-child(3) td:nth-child(3){font-size:1.5em;}
table tr:nth-child(3) td:nth-child(4){font-size:18pt;}
table tr:nth-child(3) td:nth-child(5){font-size:150%;}
/*Tamaños de los títulos H3*/
table tr:nth-child(4) td:nth-child(2){font-size:18px;}
table tr:nth-child(4) td:nth-child(3){font-size:1.125em;}
table tr:nth-child(4) td:nth-child(4){font-size:13.5pt;}
table tr:nth-child(4) td:nth-child(5){font-size:112.5%;}
/*Tamaños de los títulos H4*/
table tr:nth-child(5) td:nth-child(2){font-size:16px;}
table tr:nth-child(5) td:nth-child(3){font-size:1em;}
table tr:nth-child(5) td:nth-child(4){font-size:12pt;}
table tr:nth-child(5) td:nth-child(5){font-size:100%;}
/*Tamaños de los títulos H5*/
table tr:nth-child(6) td:nth-child(2){font-size:13px;}
table tr:nth-child(6) td:nth-child(3){font-size:0.8em;}
table tr:nth-child(6) td:nth-child(4){font-size:10pt;}
table tr:nth-child(6) td:nth-child(5){font-size:80%;}
/*Tamaños de los títulos H6*/
table tr:nth-child(7) td:nth-child(2){font-size:10px;}
table tr:nth-child(7) td:nth-child(3){font-size:0.625em;}
table tr:nth-child(7) td:nth-child(4){font-size:7.5pt;}
table tr:nth-child(7) td:nth-child(5){font-size:62.5%;}
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Hola EnigmaticNerd el ejercicio cumple básicamente con lo que se pedía
Como posibles mejoras, te ha faltado incluir el tamaño predefinido (por ejemplo con <h1>Tamaño predefinido</h1>
También hubiera sido interesante definir en cada celda cómo se ha definido el tamaño en lugar de incluir simplemente "Programación"
Puedes ver un ejemplo en https://www.aprenderaprogramar.com/foros/index.php?topic=3063.0
Saludos
-
Ha sido de los ejercicios más fastidiosos pero, tienes razón; el del ejemplo que sugieres se ve muy bien. Gracias por la revisión.