Códigos del ejercicio CU01042D del curso CSS desde cero.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos74.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1"><p class="p">El div 1 debe contener un texto suficientemente largo, con numerosos párrafos, como para exceder el tamaño del contenedor</p><p class="p"> El texto del html debe transformarse completamente a mayúsculas mediante el uso de propiedades CSS.</p><p class="p"> 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. </p></div>
<div id="caja2"><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 (cadenadetextocualquiera) 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="caja3"><p>El div 3 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. 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 (cadenadetextocualquieracadenadetextocualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.</p></div>
</body>
</html>
Código CSS: "estilos74.css"
div {
display: inline-block;
width: 180px;
height: 300px;
margin: 33px;
border-style: solid;
border-width: 6px;
border-color: red;
}
#caja1 {
text-transform: uppercase;
letter-spacing: 5px;
overflow: scroll;
}
.p::first-letter {
font-size: 250%;
}
#caja2 {
overflow-y: scroll;
text-transform: lowercase;
letter-spacing: 10px;
word-wrap: break-word;
}
#caja3 {
overflow-y: scroll;
text-transform: capitalize;
word-spacing: 10px;
}
PD: Como podemos observar, en la última caja, al haber una letra más larga que el ancho de la misma, aunque especificando en la propiedad overflow-y: scroll, el navegador realmente lo lee como: overflow: scroll, es decir, hay tanto un scroll vertical como horizontal, a pesar de que sólo hemos especificado la propiedad de overflow-y. No sé por qué pasa esto.
Tema: CSS text-transform: uppercase; poner en mayúsculas o minúsculas texto CU01042 (Leído 11332 veces)
RSS -
WAP2