Buenas noches. Este es el enunciado del ejercicio CU01040D del tutorial de programación web con CSS desde cero:
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 en horizontal, cada uno con margin 20px en todas direcciones, relleno de 10 píxeles en todas direcciones, ancho de 200 píxeles, altura de 400 píxeles y borde sólido de 4 píxeles de anchura.
b) El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas palabras subrayadas y el primer párrafo indentado un 10%.
c) El div 2 debe tener alineación del texto a la derecha, color de texto #008080. Debe contener un texto suficientemente largo, con algunas palabras subrayadas por encima y el primer párrafo indentado en 50 píxeles. Este div estará definido en el HTML como un texto con saltos de línea definidos en ciertos puntos. Al mostrarse por pantalla, deben usarse propiedades CSS para se mantengan los saltos de línea definidos en el documento HTML, se colapsen secuencias de espacios en blanco y se usen espacios en blanco para generar nuevas líneas si es necesario
d) El div 3 debe tener alineación del texto justificada, color de texto #8B4513. Debe contener un texto suficientemente largo, con algunas palabras tachadas, y el primer párrafo indentado en un 20%. Además el texto contendrá una frase donde existan 15 espacios en blanco seguidos, y dichos espacios deben mostrarse cuando se visualice el texto (si coincide con un borde del contenedor deberán continuar en una nueva línea).
Acá el código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>CU01040D</title>
<meta name="author" content="EnigmaticNerd"/>
<meta name="description" content="propiedades para control de texto css - aprenderaprogramar.com"/>
<meta name="keywords" content="propiedades, text-ident, white-space, text-align, curso, css, diseño, aprenderaprogramar.com"/>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos/CU01040B.css"/>
</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit.
Quibusdam veniam officiis alias unde <span>blanditiis</span> assumenda eius facere,
voluptatem, non <span>perspiciatis</span> provident at nesciunt porro eaque reprehenderit
magni error nobis ipsam.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit.
Quibusdam veniam officiis alias unde <span>blanditiis</span> assumenda eius facere,
voluptatem, non <span>perspiciatis</span> provident at nesciunt porro eaque reprehenderit
magni error nobis ipsam.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit.
Quibusdam veniam officiis alias unde <span>blanditiis</span> assumenda eius facere,
voluptatem, non <span>perspiciatis</span> provident at nesciunt porro eaque reprehenderit
magni error nobis ipsam.
</p>
</div>
</body>
</html>
Acá la hoja de estilos css:
/*Estilos del ejercicio CU01040D*/
/*Estilos para todos los div*/
div{
margin:20px;
padding:10px;
width:200px;
height:400px;
border: solid 4px;
}
/*Propiedades del primer div*/
div:first-child p{
text-align:center;
color:#FF6347;
text-indent:10%;
}
div:first-child span{
text-decoration:underline;
}
/*Propiedades del segundo div*/
div:nth-child(2) p{
text-align:right;
color:#008080;
text-indent:50px;
white-space:pre-line;
}
div:nth-child(2) span{
text-decoration:overline;
}
/*Propiedades del tercer div*/
div:last-child p{
text-align:justify;
color:#8B4513;
text-indent:20%;
white-space:pre-wrap;
}
div:last-child span{
text-decoration:line-through;
}
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
Tema: HTML y CSS mantener espacios en blanco text-align, text-decoration CU01040D (Leído 1921 veces)
RSS -
WAP2