Autor Tema: CSS equivalencia entre tamaños de fuente en pixeles, puntos, %, em etc. CU01024D (Leído 2642 veces)

Dimitar Stefanov · « **en:** 12 de Enero 2016, 15:58 »

Aquí os dejo mis códigos también. No sé si he hecho bien el ejercicios. Agredecería que alguien lo revisara y me comente los errores.

Código HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="keywords" content="programar,cursos">
	<meta name="description" content="Portal web">
	<link rel="stylesheet" type="text/css" href="estilos27.css">
</head> 
<body>
	<div id="page">
		<div id="header">
		</div>
		<div id="wrapper">
			<div id="menu">
			</div>
			<div id="body">
				<table>
					<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 id="a">
						<td><h1>H1</h1></td>
						<td>32.5</td>
						<td>2</td>
						<td>25</td>
						<td>200</td>
					</tr>
					<tr id="b">
						<td><h2>H2</h2></td>
						<td>25</td>
						<td>1.5</td>
						<td>18</td>
						<td>150</td>
					</tr>
					<tr id="c">
						<td><h3>H3</h3></td>
						<td>20</td>
						<td>1.25</td>
						<td>15</td>
						<td>125</td>
					</tr>
					<tr id="d">
						<td><h4>H4</h4></td>
						<td>15</td>
						<td>1</td>
						<td>12.5</td>
						<td>100</td>
					</tr>
					<tr id="e">
						<td><h5>H5</h5></td>
						<td>13.5</td>
						<td>0.9</td>
						<td>10</td>
						<td>90</td>
					</tr>
					<tr id="f">
						<td><h6>H6</h6></td>
						<td>10.5</td>
						<td>0.725</td>
						<td>8.5</td>
						<td>75</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="footer">
		</div>
	</div>
</body>
</html>

Código CSS: "estilos27.css"

Código: [Seleccionar]

table, td, th {
	border: 2px solid;
}
th {
	background-color: gray;
}
#a td:nth-child(2) {
	font-size: 32.5px;
	font-weight: bold;
}
#a td:nth-child(3) {
	font-size: 2em;
	font-weight: bold;
}
#a td:nth-child(4) {
	font-size: 25pt;
	font-weight: bold;
}
#a td:last-child {
	font-size: 200%;
	font-weight: bold;
}
#b td:nth-child(2) {
	font-size: 25px;
	font-weight: bold;
}
#b td:nth-child(3) {
	font-size: 1.5em;
	font-weight: bold;
}
#b td:nth-child(4) {
	font-size: 18pt;
	font-weight: bold;
}
#b td:last-child {
	font-size: 150%;
	font-weight: bold;
}
#c td:nth-child(2) {
	font-size: 20px;
	font-weight: bold;
}
#c td:nth-child(3) {
	font-size: 1.25em;
	font-weight: bold;
}
#c td:nth-child(4) {
	font-size: 15pt;
	font-weight: bold;
}
#c td:last-child {
	font-size: 125%;
	font-weight: bold;
}
#d td:nth-child(2) {
	font-size: 15px;
	font-weight: bold;
}
#d td:nth-child(3) {
	font-size: 1em;
	font-weight: bold;
}
#d td:nth-child(4) {
	font-size: 12.5pt;
	font-weight: bold;
}
#d td:last-child {
	font-size: 100%;
	font-weight: bold;
}
#e td:nth-child(2) {
	font-size: 13.5px;
	font-weight: bold;
}
#e td:nth-child(3) {
	font-size: 0.9em;
	font-weight: bold;
}
#e td:nth-child(4) {
	font-size: 10pt;
	font-weight: bold;
}
#e td:last-child {
	font-size: 90%;
	font-weight: bold;
}
#f td:nth-child(2) {
	font-size: 10.5px;
	font-weight: bold;
}
#f td:nth-child(3) {
	font-size: 0.725em;
	font-weight: bold;
}
#f td:nth-child(4) {
	font-size: 8.5pt;
	font-weight: bold;
}
#f td:last-child {
	font-size: 75%;
	font-weight: bold;
}

He ido probando las medidas, pero no sé si coinciden exactamente.

Ogramar · « **Respuesta #1 en:** 15 de Enero 2016, 18:37 »

Buenas dimiste lo veo bien y has trabajado con las distintas unidades de medida que era lo que se pretendía con el ejercicio. Yo veo las medidas coincidentes.

Nota: si añades el centrado al texto de la tabla se ve todavía mejor, basta escribirlo así:

<table style="text-align:center;">

Salu2

Dimitar Stefanov · « **Respuesta #2 en:** 15 de Enero 2016, 18:47 »

Hola Ogramar,

Ahora mismo estoy en el tutorial de text-align. Supongo que allí nos lo explicarán. Me has adelantado info, jeje. No se si lo podré hacer hoy, porque estoy un poco saturado. He tenido muchos problemas en entender las propiedades position: absolute y position:relative, pero creo que ya los he entendido. jeje

Gracias. Saludos

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

Noticias: