Autor Tema: Unidades de medida CSS diferencia entre pixel em puntos y % Ejercicio CU01024D#  (Leído 4686 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola, aquí dejo mi ejercicio CU01024D del tutorial de desarrollo web con CSS desde cero que pedía...

Citar
EJERCICIO

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.

mi html
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unidades de medida</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos_ejercicioCU01024D.css">
</head>
<body>
<div>
<h1>Unidades de medida</h1>
</div>
<div>
<table>
<th>Título</th>
<th>Tamaño px</th>
<th>Tamaño em</th>
<th>Tamaño pt</th>
<th>Tamaño %</th>
<tr>
<td><h1>h1</h1></td>
<td id="uno">h1 (30px)</td>
<td id="dos">h1 (2em)</td>
<td id="tres">h1 (24pt)</td>
<td id="cuatro">h1 (200%)</td>
</tr>
<tr>
<td><h2>h2</h2></td>
<td id="cinco">h2 (24px)</td>
<td id="seis">h2 (1.5em)</td>
<td id="siete">h2 (18pt)</td>
<td id="ocho">h2 (150%)</td>
</tr>
<tr>
<td><h3>h3</h3></td>
<td id="nueve">h3 (19px)</td>
<td id="diez">h3 (1.2em)</td>
<td id="once">h3 (14pt)</td>
<td id="doce">h3 (120%)</td>
</tr>
<tr>
<td><h4>h4</h4></td>
<td id="trece">h4 (16px)</td>
<td id="catorce">h4 (1em)</td>
<td id="quince">h4 (12pt)</td>
<td id="dieciseis">h4 (100%)</td>
</tr>
<tr>
<td><h5>h5</h5></td>
<td id="diecisiete">h5 (13px)</td>
<td id="dieciocho">h5 (0.8em)</td>
<td id="diecinueve">h5 (10pt)</td>
<td id="veinte">h5 (80%)</td>
</tr>
<tr>
<td><h6>h6</h6></td>
<td id="veintiuno">h6 (11px)</td>
<td id="veintidos">h6 (0.7em)</td>
<td id="veintitres">h6 (8pt)</td>
<td id="veinticuatro">h6 (70%)</td>
</tr>
</table>
</div>
</body>
</html>

y aquí el css
Código: [Seleccionar]
table{
border-collapse:
collapse; border: solid 1px #000;
width: 80%;
text-align: center;
}
td, th{border: 1px solid #000;}
#uno{font-size: 30px; font-weight: bold;}
#dos{font-size: 2em; font-weight: bold;}
#tres{font-size: 24pt; font-weight: bold;}
#cuatro{font-size: 200%; font-weight: bold;}
#cinco{font-size: 24px; font-weight: bold;}
#seis{font-size: 1.5em; font-weight: bold;}
#siete{font-size: 18pt; font-weight: bold;}
#ocho{font-size: 150%; font-weight: bold;}
#nueve{font-size: 19px; font-weight: bold;}
#diez{font-size: 1.2em; font-weight: bold;}
#once{font-size: 14pt; font-weight: bold;}
#doce{font-size: 120%; font-weight: bold;}
#trece{font-size: 16px; font-weight: bold;}
#catorce{font-size: 1em; font-weight: bold;}
#quince{font-size: 12pt; font-weight: bold;}
#dieciseis{font-size: 100%; font-weight: bold;}
#diecisiete{font-size: 13px; font-weight: bold;}
#dieciocho{font-size: 0.8em; font-weight: bold;}
#diecinueve{font-size: 10pt; font-weight: bold;}
#veinte{font-size: 80%; font-weight: bold;}
#veintiuno{font-size: 11px; font-weight: bold;}
#veintidos{font-size: 0.7em; font-weight: bold;}
#veintitres{font-size: 8pt; font-weight: bold;}
#veinticuatro{font-size: 70%; font-weight: bold;}

resulto un poco laborioso, pero no se me ocurrió ninguna forma de hacerlo mas corto.


saludos.
« Última modificación: 22 de Agosto 2016, 18:01 por Ogramar »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola Pedro

Has realizado con exactitud lo que pedía el ejercicio

Sobre lo laborioso que es, la definición de tamaños tiene que ser como la has hecho, no queda más remedio. Donde sí puedes ahorrar código es evitando repetir font-weight: bold; múltiples veces. Dado que en la tabla tienes o bien th que por defecto se ponen en negrita, o títulos h1, h2, h3, etc. o bien imitas los títulos y en todo caso es de aplicación font-weight: bold; obtienes el mismo resultado eliminando todas esas repeticiones y usando:

Código: [Seleccionar]
table{
border-collapse:
collapse; border: solid 1px #000;
width: 80%;
text-align: center;
font-weight: bold;
}

O si lo prefieres también obtienes el mismo resultado haciendo:

Código: [Seleccionar]
td, th{border: 1px solid #000; font-weight: bold;}

En general conviene evitar la repetición de código siempre que sea posible

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