Hola nuevamente, a continuación solución propuesta para ejercicio CU01042D del tutorial de programación web: CSS desde cero.
EJERCICIO
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 33px en todas direcciones, sin relleno, ancho de 180 píxeles, altura de 300 píxeles y borde sólido de 6 píxeles de anchura con color de borde rojo.
b) 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.
c) 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.
d) 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 (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.
HTML:
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Ejercicio_estilosCU01042D.css">
</head>
<body>
<div id="caja1">
<p>Los úrsidos(Ursidae) son una familia de mamíferos carnívoros conocidos comúnmente como osos.</p>
<p>Son animales de gran tamaño, generalmente omnívoros ya que, a pesar de su temible dentadura, comen frutos, raíces e insectos, además de carne.</p>
<p>Sin embargo, el oso polar, debido a la escasez de otras fuentes de alimento, se alimenta casi únicamente de carne.</p>
<p>Con sus pesados cuerpos y sus poderosas mandíbulas, los osos se cuentan entre los mayores carnívoros que viven en la Tierra.</p>
<p>Un macho de oso polar pesa en promedio 500 kg y alcanza una talla de hasta 130 cm a la altura de la cruz.</p>
<p>Se mueven con un caminar pesado, apoyando toda la planta de los pies (son, por lo tanto, animales plantígrados).</p>
</div>
<div id="caja2">Las serpientes (Serpentes) u ofidios (Ophidia) (Electrocardiográficamente)son un suborden de saurópsidos (reptiles) diápsidos pertenecientes al orden Squamata, superorden de los <span class="sombra2">Lepidosaurios</span>, caracterizado por la ausencia de patas (la pitón mantiene diminutas extremidades fruto de su proceso evolutivo)1 y el cuerpo muy alargado. Se originaron en el período Cretácico.
Las serpientes se caracterizan por la ausencia de extremidades y cuerpo alargado. Algunas poseen mordeduras venenosas, como las cobras y las víboras, que utilizan para matar a sus presas antes de ingerirlas. Otras serpientes, como las boas y pitones, matan a sus presas por constricción.
</div>
<div id="caja3">El leopardo es uno de los grandes felinos más adaptables. Supercalifragilisticoespialidoso. Electrocardiográficamente. Excepto en desiertos, habita en todo tipo de hábitats, siempre que tenga un lugar donde esconderse y existan suficientes presas para sobrevivir; se encuentra presente en todo tipo de bosques y selvas, en las sabanas, en los sembrados y en lugares rocosos. En algunos hábitats, el <span class="sombra3">leopardo</span> desarrolla formas para evadir a otros depredadores mayores o más numerosos como es el caso del león y las hienas en África y el tigre en Asia. Se denomina así a los leopardos melánicos. El color negro es producido por una gran cantidad de melanóforos (células pertenecientes a una de las capas de la piel) distribuidos por toda la superficie corporal.Realmente, el único factor que limita al leopardo son las personas.</div>
</body>
</html>CSS:
div{
float: left;
margin: 33px;
padding: 0;
width: 180px;
height: 300px;
border: solid 6px red;
}
#caja1{
text-transform: uppercase;
letter-spacing: 5px;
}
#caja1 p::first-letter{
font-size: 250%;
text-transform: uppercase;
}
#caja2{
text-transform: lowercase;
letter-spacing: 10px;
word-wrap: break-word;
}
#caja3{
text-transform: capitalize;
word-spacing: 10px;
}
Comentar que si en letter-spacing y word-spacing uso porcentajes como requiere el enunciado del ejercicio, no hace nada, de ahí que lo halla realizado con px.
Y una duda sobre esta lienea
p::first-letter, ¿porque se usa es sintaxis?
Saludos.
Tema: CSS transformar texto mayúsculas o minúsculas text-transform uppercase CU01042D# (Leído 6843 veces)
RSS -
WAP2