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

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
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.
« Última modificación: 24 de Octubre 2017, 19:36 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
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

 

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".