Buenos días, dejo la posible solución a este ejercicio.
HTML:
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
<!-- El código CSS está en la pestaña de abajo -->
</style>
</head>
<body>
<div id="div1">
<P>El div 1 debe contener un texto suficientemente largo, con numerosos párrafos, como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a mayúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 5% superior a lo normal. La primera letra de cada párrafo debe tener un tamaño un 250% lo normal. Relleno Relleno Relleno Relleno Relleno Relleno Relleno Relleno Relleno Relleno Relleno</P>
</div>
<div id="div2">
<p> El div 2 debe contener un TEXTO SUFICIENTEMENTE largo como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a minúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y “romperse” para no exceder la capacidad del contenedor usando la propiedad word-wrap.</p>
</div>
<div id="div3">
<p>El div 3 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. Aprenderaprogramar.com El texto del html debe transformarse para que toda palabra comience con una letra mayúscula mediante el uso de propiedades CSS. La separación entre palabras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.</p>
</div>
</body>
</html>
CSS:
* {padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box;}
div {width: 180px; height:300px; margin:33px; border: 6px solid red; display: inline-block; vertical-align:top;}
#div1 {text-transform:uppercase; word-spacing: 5px; }
#div1 p:first-letter {font-size: 250%;}
#div2 {text-transform: lowercase; letter-spacing: 10px; word-wrap: break-word;}
#div3 {letter-spacing: 10px;}
#div3 p:first-letter {text-transform: uppercase;}
Tema: CSS text-transform first-letter, letter-spacing word-spacing Ejercicio CU01042D (Leído 1886 veces)
RSS -
WAP2