Autor Tema: HTML y CSS. font-size diferencias entre títulos h1 h2 h3 navegadores CU01044D  (Leído 2481 veces)

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
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
Código: [Seleccionar]
!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
Código: [Seleccionar]
/* 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;}

*/


« Última modificación: 28 de Septiembre 2016, 21:28 por Alex Rodríguez »
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:font-size uso de larger, smaller (
« Respuesta #1 en: 19 de Septiembre 2016, 00:33 »
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


 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".