Buenas buenas!!! Les dejo mi experiencia con el ejercicio de la entrega CU01024D del curso de desarrollo web desde cero.
Se complicó un poco, porque tengo diferentes ordenadores, con SO distintos (linux, W7 y 10, OS X), dropbox sincronizado en todos los ordenadores y hago un poco en cada uno, según me dejen mis hijos y esposa :P. WEBeando encontre la equivalencia para 1em (12pt 16px 1em 100%) y con eso arme una hoja en OpenOffice para obtener los otros datos. Con todo esto, me puse a escalar en % hasta dar mas o menos con el tamaño de cada 1 y este es mi resultado!!
Mi pagina en chrome para mac
(http://i.imgur.com/yn5fED0.png)
Mi MAC a pleno!!
(http://i.imgur.com/FYcNIDD.png)
y mi codigo:
CU01024D.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Entrega Nº 24 - curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Unidades de medidas CSS" />
<meta name="keywords" content="aprenderaprogramar.com,CU01024D,medidas CSS,CSS" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01024D.css"/>
</head>
<body>
<h1 id=principal>Equivalencias de las etiquetas H1 a H6</h1>
<div class="tablacentrada">
<table>
<tr id="encabezado">
<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="fil1">
<td><h1>H1</h1></td>
<td>H1(32.00)</td>
<td>H1(2.00)</td>
<td>H1(24.10)</td>
<td>H1(200.00)</td>
</tr>
<tr id="fil2">
<td><h2>H2</h2></td>
<td>H2(25.00)</td>
<td>H2(1.60)</td>
<td>H2(18.80)</td>
<td>H2(156.30)</td>
</tr>
<tr id="fil3">
<td><h3>H3</h3></td>
<td>H3(20.00)</td>
<td>H3(1.30)</td>
<td>H3(15.00)</td>
<td>H3(125.00)</td>
</tr>
<tr id="fil4">
<td><h4>H4</h4></td>
<td>H4(16.00)</td>
<td>H4(1.00)</td>
<td>H4(12.00)</td>
<td>H4(100.00)</td>
</tr>
<tr id="fil5">
<td><h5>H5</h5></td>
<td>H5(13.00)</td>
<td>H5(0.80)</td>
<td>H5(9.80)</td>
<td>H5(81.30)</td>
</tr>
<tr id="fil6">
<td><h6>H6</h6></td>
<td>H6(11.00)</td>
<td>H6(0.70)</td>
<td>H6(8.30)</td>
<td>H6(68.80)</td>
</tr>
</table>
</div>
</body>
</html>
CU01024D.css
/* Curso CSS estilos aprenderaprogramar.com*/
#principal {
text-align: center
}
div.tablacentrada{
text-align: center;
}
div.tablacentrada table {
width: 70%;
border: 1px solid;
margin: 0 auto;
}
div.tablacentrada td{
border: 1px solid;
}
#encabezado {
background-color: #D3D3D3;
}
/* Fila 1 - H1 */
#fil1 td:nth-child(2){
font-size: 32px;
font-weight: bold;
}
#fil1 td:nth-child(3){
font-size: 2.0em;
font-weight: bold;
}
#fil1 td:nth-child(4){
font-size: 24.1pt;
font-weight: bold;
}
#fil1 td:nth-child(5){
font-size: 200%;
font-weight: bold;
}
/* Fila 2 - H2 */
#fil2 td:nth-child(2){
font-size: 25px;
font-weight: bold;
}
#fil2 td:nth-child(3){
font-size: 1.6em;
font-weight: bold;
}
#fil2 td:nth-child(4){
font-size: 18.8pt;
font-weight: bold;
}
#fil2 td:nth-child(5){
font-size: 156.3%;
font-weight: bold;
}
/* Fila 3 - H3 */
#fil3 td:nth-child(2){
font-size: 20px;
font-weight: bold;
}
#fil3 td:nth-child(3){
font-size: 1.3em;
font-weight: bold;
}
#fil3 td:nth-child(4){
font-size: 15.00pt;
font-weight: bold;
}
#fil3 td:nth-child(5){
font-size: 125%;
font-weight: bold;
}
/* Fila 4 - H4 */
#fil4 td:nth-child(2){
font-size: 16px;
font-weight: bold;
}
#fil4 td:nth-child(3){
font-size: 1em;
font-weight: bold;
}
#fil4 td:nth-child(4){
font-size: 12.00pt;
font-weight: bold;
}
#fil4 td:nth-child(5){
font-size: 100%;
font-weight: bold;
}
/* Fila 5 - H5 */
#fil5 td:nth-child(2){
font-size: 13px;
font-weight: bold;
}
#fil5 td:nth-child(3){
font-size: 0.8em;
font-weight: bold;
}
#fil5 td:nth-child(4){
font-size: 9.8pt;
font-weight: bold;
}
#fil5 td:nth-child(5){
font-size: 81.3%;
font-weight: bold;
}
/* Fila 6 - H6 */
#fil6 td:nth-child(2){
font-size: 11px;
font-weight: bold;
}
#fil6 td:nth-child(3){
font-size: 0.7em;
font-weight: bold;
}
#fil6 td:nth-child(4){
font-size: 8.3pt;
font-weight: bold;
}
#fil6 td:nth-child(5){
font-size: 68.8%;
font-weight: bold;
}