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

pedro,, · « **en:** 09 de Agosto 2015, 01:57 »

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.

Alex Rodríguez · « **Respuesta #1 en:** 09 de Agosto 2015, 18:52 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: