Buenas buenas!!! Ejercicio resuelto CU01044D del curso básico de programador web con CSS.
En este ejercicio me complique solo con la etiqueta h1 del primer navegador, porque mientras hacia pruebas, se me ocurrio, poner margin=0 a las etiquetas h y usar los bordes de las tablas, como guías, con lo cual, de ahí en mas, fue todo muuuucho mas fácil.
En los dos navegadores que probe, no se ven cambios apreciables, solo en el h6 usando em, se veia una diferencia apreciable.
Me puse a usar nth-child por dos cosas, primero para practicar y después para tomarle un poco el gusto (como decimos por acá) porque como le dije a Ogramar, como que no me gusta mucho usarlo.
Ahora si mi código
CU01044D.html
!DOCTYPE html>
<html lang="es">
<head>
<title>CSS desde cero</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Font-Size CSS" />
<meta name="keywords" content="curso, aprender a programar, html, css, Font-size, font-style,(CU01044D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01044D.css"/>
</head>
<body>
<div>
<table class="chrome">
<tr>
<th colspan="3">Navegador Chrome</th>
</tr>
<tr class="cabecera">
<th>Tipo de título</th>
<th>Pixeles</th>
<th>em</th>
</tr>
<tr class="impar">
<th><h1>h1</h1></th>
<th>32</th>
<th>1.9</th>
</tr>
<tr class="par">
<th><h2>h2</h2></th>
<th>24</th>
<th>1.5</th>
</tr>
<tr class="impar">
<th><h3>h3</h3></th>
<th>18</th>
<th>1.18</th>
</tr>
<tr class="par">
<th><h4>h4</h4></th>
<th>16</th>
<th>1</th>
</tr>
<tr class="impar">
<th><h5>h5</h5></th>
<th>13</th>
<th>0.86</th>
</tr>
<tr class="par">
<th><h6>h6</h6></th>
<th>11</th>
<th>0.73</th>
</tr>
</table>
</div>
<div>
<table class="ie">
<tr>
<th colspan="3">Navegador Internet Explorer</th>
</tr>
<tr class="cabecera">
<th>Tipo de título</th>
<th>Pixeles</th>
<th>em</th>
</tr>
<tr class="impar">
<th><h1>h1</h1></th>
<th>32</th>
<th>1.9</th>
</tr>
<tr class="par">
<th><h2>h2</h2></th>
<th>24</th>
<th>1.5</th>
</tr>
<tr class="impar">
<th><h3>h3</h3></th>
<th>18</th>
<th>1.18</th>
</tr>
<tr class="par">
<th><h4>h4</h4></th>
<th>16</th>
<th>1</th>
</tr>
<tr class="impar">
<th><h5>h5</h5></th>
<th>13</th>
<th>0.86</th>
</tr>
<tr class="par">
<th><h6>h6</h6></th>
<th>11</th>
<th>.71</th>
</tr>
</table>
</div>
</body>
</html>
CU01044D.css
/* Estilos resolucion ejercicio CU01044D */
body{background-color: bisque}
div{float: left;
margin: 5px;}
table{
width: 400px;
border: 2px solid blue;
border-collapse: collapse;
}
tr{
border: 2px solid blue;
}
.cabecera{background-color: beige;}
.impar{background-color: silver;}
.par{background-color: white;}
/* Atributos para la tabla chrome */
/* h1 */
.chrome tr:nth-child(3) th:nth-child(2) {font-size: 32px;}
.chrome tr:nth-child(3) th:nth-child(3) {font-size: 1.9em;}
/* h2 */
.chrome tr:nth-child(4) th:nth-child(2) {font-size: 24px;}
.chrome tr:nth-child(4) th:nth-child(3) {font-size: 1.5em;}
/* h3 */
.chrome tr:nth-child(5) th:nth-child(2) {font-size: 18px;}
.chrome tr:nth-child(5) th:nth-child(3) {font-size: 1.18em;}
/* h4 */
.chrome tr:nth-child(6) th:nth-child(2) {font-size: 16px;}
.chrome tr:nth-child(6) th:nth-child(3) {font-size: 1em;}
/* h5 */
.chrome tr:nth-child(7) th:nth-child(2) {font-size: 13px;}
.chrome tr:nth-child(7) th:nth-child(3) {font-size: 0.86em;}
/* h6 */
.chrome tr:nth-child(8) th:nth-child(2) {font-size: 11px;}
.chrome tr:nth-child(8) th:nth-child(3) {font-size: 0.73em;}
/* Atributos para la tabla ie */
/* h1 */
.ie tr:nth-child(3) th:nth-child(2) {font-size: 32px;}
.ie tr:nth-child(3) th:nth-child(3) {font-size: 1.9em;}
/* h2 */
.ie tr:nth-child(4) th:nth-child(2) {font-size: 24px;}
.ie tr:nth-child(4) th:nth-child(3) {font-size: 1.5em;}
/* h3 */
.ie tr:nth-child(5) th:nth-child(2) {font-size: 18px;}
.ie tr:nth-child(5) th:nth-child(3) {font-size: 1.18em;}
/* h4 */
.ie tr:nth-child(6) th:nth-child(2) {font-size: 16px;}
.ie tr:nth-child(6) th:nth-child(3) {font-size: 1em;}
/* h5 */
.ie tr:nth-child(7) th:nth-child(2) {font-size: 13px;}
.ie tr:nth-child(7) th:nth-child(3) {font-size: 0.86em;}
/* h6 */
.ie tr:nth-child(8) th:nth-child(2) {font-size: 11px;}
.ie tr:nth-child(8) th:nth-child(3) {font-size: 0.71em;}
/* Lo use para ver las alturas originales de la etiqueta h
h1,h2,h3,h4,h5,h6{margin: 0;}
*/
Tema: HTML y CSS. font-size diferencias entre títulos h1 h2 h3 navegadores CU01044D (Leído 2558 veces)
RSS -
WAP2