Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: hymsoft en 18 de Septiembre 2016, 04:31
-
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;}
*/
-
Buenas hymsoft.
Puedes dar por bueno el ejercicio.
En Chrome por ejemplo, desde su consola(F12), en elements al seleccionar los elementos, podemos ver el tamaño de letra.
Por decirte algo, te desapareció el "<" en la primera linea del documento.
Saludos. ;D