Autor Tema: CSS y HTML establecer tipo letra font-family, tipografía, font-variant CU01045D (Leído 2513 veces)

EnigmaticNerd · « **en:** 16 de Septiembre 2017, 01:13 »

Buenas noches. Este es el enunciado del ejercicio CU01045D del curso de fundamentos de programación web con CSS y editor Notepad++:

Citar

Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir tres contenedores (div1, div2 y div3) situados uno debajo de otro, cada uno con margin 33px en todas direcciones, con relleno 25 px en todas direcciones, ancho 100% del disponible, y borde sólido de 5 píxeles de anchura con color de borde rojo.

b) El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).

c) El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.

d) El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shorthand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .

Acá el código:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01045D
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Css font-family, tipos de letra - aprenderaprogramar.com"/>
        <meta name="keywords" content="CSS, cursos, diseño, tipografía, font-family, font-variant, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01045.css"/>
    </head>
    <body>

        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem 
                sint accusantium ipsam repellendus suscipit placeat velit recusandae 
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem 
                sint accusantium ipsam repellendus suscipit placeat velit recusandae 
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem 
                sint accusantium ipsam repellendus suscipit placeat velit recusandae 
                nesciunt accusamus sequi dolorem provident sed!
            </p>
        </div>
        <div>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem 
                sint accusantium ipsam repellendus suscipit placeat velit recusandae 
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem 
                sint accusantium ipsam repellendus suscipit placeat velit recusandae 
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem 
                sint accusantium ipsam repellendus suscipit placeat velit recusandae 
                nesciunt accusamus sequi dolorem provident sed!
            </p>
        </div>
        <div>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem 
                sint accusantium ipsam repellendus suscipit placeat velit recusandae 
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem 
                sint accusantium ipsam repellendus suscipit placeat velit recusandae 
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem 
                sint accusantium ipsam repellendus suscipit placeat velit recusandae 
                nesciunt accusamus sequi dolorem provident sed!
            </p>
        </div>

    </body>
</html>

Acá la hoja de estilos css:

Código: [Seleccionar]

/*Estilos para el ejercicio CUO1045D*/

/*Estilos de los contenedores en general*/
div{
    margin:33px;
    padding:25px;
    width:100%;
    border:solid 5px red;
}

/*Tipografía y tamaño de letra del texto en el primer contenedor*/
div:first-child{
    font-family:serif;
    font-size:18px;
}

/*Mayúsculas condensadas en el primer parrafo del primer contenedor*/
div:first-child p:first-child{
    font-variant:small-caps;
}

/*Tipografía, tamaño y color de letra del texto en el segundo contenedor*/

div:nth-child(2){
    font-family:sans-serif;
    font-size:14px;
    color:#B22222;
}

/*Notación shorthand font para el tercer contenedor*/

div:last-child{
    font:2em "Comic Sans Ms", fantasy;
}

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

Alex Rodríguez · « **Respuesta #1 en:** 24 de Octubre 2017, 19:37 »

Hola EnigmaticNerd. El ejercicio está correcto. Mismo comentario que otras veces, en lugar de nth-child puede ser más aconsejable identificar los div o elementos por id, de forma que no se vean afectados si se modifica la estructura de contenidos.

Saludos

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

Noticias: