Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: 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++:
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:
<!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:
/*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.
-
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