Autor Tema: CSS transformar texto mayúsculas o minúsculas text-transform uppercase CU01042D# (Leído 7310 veces)

pedro,, · « **en:** 13 de Septiembre 2015, 18:34 »

Hola nuevamente, a continuación solución propuesta para ejercicio CU01042D del tutorial de programación web: CSS desde cero.

Citar

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:

Código: [Seleccionar]

<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:

Código: [Seleccionar]

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

Código: [Seleccionar]

p::first-letter, ¿porque se usa es sintaxis?

Saludos.

Ogramar · « **Respuesta #1 en:** 14 de Septiembre 2015, 10:33 »

Hola Pedro en este ejercicio donde dice <<La separación entre letras debe ser un 5% superior a lo normal.>> yo aplicaría un valor en ex que es una medida relativa parecida a em lo que pasa es que em se refiere más a la altura normal de línea y ex al ancho normal de letra

Citar

ex
This unit represents the x-height of the element's font. On fonts with the 'x' letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.

Al usar ex estamos indicando una unidad relativa y para indicar un 5% superior a lo normal podríamos escribir letter-spacing: 1.05ex; y para indicar un 10% superior a lo normal sería 1.1ex;

Cuando se trate de altura por ejemplo La primera letra de cada párrafo debe tener un tamaño un 250% lo normal. podemos usar em

En el ejercicio un 250% sería font-size: 3.5em;

El cálculo que he hecho es 1em es el normal, 2em es el 100% de incremento, 3em el 200% de incremento y 3.5em el 250% de incremento.

Código: [Seleccionar]

div{
	float: left;
	margin: 33px;
	padding: 0;
	width: 180px;
	height: 300px;
	border: solid 6px red;
}
#caja1{
	text-transform: uppercase;
	letter-spacing: 1.05ex;
}
#caja1 p::first-letter{
	font-size: 3.5em;
	text-transform: uppercase;
}
#caja2{
	text-transform: lowercase;
	letter-spacing: 1.1ex;
	word-wrap: break-word;
}
#caja3{
	text-transform: capitalize;
	word-spacing: 10px;
}

La sintaxis p::first-letter (ver http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=718:selectores-avanzados-y-pseudoclases-css-first-child-nth-child-last-not-letter-line-after-before-cu01015d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203) es una norma CSS que se deba escribir así, es un poco extraño pero es así

El código perfecto

Salu2

pedro,, · « **Respuesta #2 en:** 14 de Septiembre 2015, 11:09 »

Hola.

Queda apuntado todo.

gracias.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: