Autor Tema: Unidades de medida CSS diferencias entre px em pt % tamaño letra font CU01024D (Leído 2571 veces)

EnigmaticNerd · « **en:** 22 de Agosto 2017, 02:17 »

Buenas noches. Este es el enunciado del ejercicio CU01024D del tutorial de programación web con CSS como si estuviera en primero:

Citar

Los navegadores aplican un tamaño por defecto a los títulos h1 a h6, aunque estos tamaños no son siempre los mismos sino que dependen del navegador que se emplee. Para el navegador que estés empleando, divide la página web en una cuadrícula con 5 espacios a lo ancho y 6 espacios a lo alto, tal y como se ve en la siguiente tabla. En cada espacio, muestra un texto y la forma en que se ha definido el tamaño. Por ejemplo: h1 (predefinido), h1 (px), h1 (em), h1 (pt), h1 (%). El resultado ha de ser que todo se vea del mismo tamaño y modo, pero sin embargo la forma de definir el estilo será diferente en cada caso. Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

Orientación: h1 suele ser 24px ó 2em en la mayoría de los casos, pero tendrás que comprobarlo en el navegador que estés empleando.

Acá el código:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>
            CU01024D
        </title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilosCU01024D.css"/>
    </head>
        <body>

            <table border="1px;">

                <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>
                    <td>H1</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                </tr>
                <tr>
                    <td>H2</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                </tr>
                <tr>
                    <td>H3</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                </tr>
                <tr>
                    <td>H4</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                </tr>
                <tr>
                    <td>H5</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                </tr>
                <tr>
                    <td>H6</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                    <td>Programación</td>
                </tr>

            </table>

        </body>

</html>

Acá los estilos CSS:

Código: [Seleccionar]

/*Estilos de la tabla*/
            table{width: 100%; text-align: center;}

            /*Tamaños de los título H1*/
            table tr:nth-child(2) td:nth-child(2){font-size:32px;}
            table tr:nth-child(2) td:nth-child(3){font-size:2em;}
            table tr:nth-child(2) td:nth-child(4){font-size:24pt;}
            table tr:nth-child(2) td:nth-child(5){font-size:200%;}

            /*Tamaños de los títulos H2*/
            table tr:nth-child(3) td:nth-child(2){font-size:24px;}
            table tr:nth-child(3) td:nth-child(3){font-size:1.5em;}
            table tr:nth-child(3) td:nth-child(4){font-size:18pt;}
            table tr:nth-child(3) td:nth-child(5){font-size:150%;}

            /*Tamaños de los títulos H3*/
            table tr:nth-child(4) td:nth-child(2){font-size:18px;}
            table tr:nth-child(4) td:nth-child(3){font-size:1.125em;}
            table tr:nth-child(4) td:nth-child(4){font-size:13.5pt;}
            table tr:nth-child(4) td:nth-child(5){font-size:112.5%;}

            /*Tamaños de los títulos H4*/
            table tr:nth-child(5) td:nth-child(2){font-size:16px;}
            table tr:nth-child(5) td:nth-child(3){font-size:1em;}
            table tr:nth-child(5) td:nth-child(4){font-size:12pt;}
            table tr:nth-child(5) td:nth-child(5){font-size:100%;}

            /*Tamaños de los títulos H5*/
            table tr:nth-child(6) td:nth-child(2){font-size:13px;}
            table tr:nth-child(6) td:nth-child(3){font-size:0.8em;}
            table tr:nth-child(6) td:nth-child(4){font-size:10pt;}
            table tr:nth-child(6) td:nth-child(5){font-size:80%;}

            /*Tamaños de los títulos H6*/
            table tr:nth-child(7) td:nth-child(2){font-size:10px;}
            table tr:nth-child(7) td:nth-child(3){font-size:0.625em;}
            table tr:nth-child(7) td:nth-child(4){font-size:7.5pt;}
            table tr:nth-child(7) td:nth-child(5){font-size:62.5%;}

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

Alex Rodríguez · « **Respuesta #1 en:** 24 de Septiembre 2017, 18:32 »

Hola EnigmaticNerd el ejercicio cumple básicamente con lo que se pedía

Como posibles mejoras, te ha faltado incluir el tamaño predefinido (por ejemplo con <h1>Tamaño predefinido</h1>

También hubiera sido interesante definir en cada celda cómo se ha definido el tamaño en lugar de incluir simplemente "Programación"

Puedes ver un ejemplo en https://www.aprenderaprogramar.com/foros/index.php?topic=3063.0

Saludos

EnigmaticNerd · « **Respuesta #2 en:** 24 de Septiembre 2017, 22:47 »

Ha sido de los ejercicios más fastidiosos pero, tienes razón; el del ejemplo que sugieres se ve muy bien. Gracias por la revisión.

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

Noticias: