Autor Tema: CSS y HTML text-align, color,text-indent, text-decoration alinear texto CU01040D (Leído 2112 veces)

Jack_F · « **en:** 12 de Abril 2017, 07:47 »

CSS text-align, color, text-decoration, text-indent, white-space nowrap, pre, pre-wrap, pre-line (CU01040D) del tutorial de desarrollo web usando editor Notepad++

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 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).

Código HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
        <head>
		        <title>Portal School Day</title>
				<meta charset="utf-8" />
				<link rel="stylesheet" type="text/css" href="estilos.css" />
		</head>
		<body>
		        <div id="div1">
				      <span>School Days</span> (スクールデイズ School Days?) es un anime basado en la <span>novela</span> visual del mismo nombre y adaptado por los 
					  estudios TNK y dirigido por Keitaro Motonaga, fue estrenado el 3 de julio de 2007 en la cadena <span>televisiva</span> TV <span>Kanagawa</span>. Consta de 12 episodios.
					  El anime se basa en el <span>videojuego</span> original, el cual trata de un triángulo amoroso. Se diferencia de los demás ya que se muestra para un grupo <span>juvenil-adulto</span>.
					  Makoto Itō viaja a la escuela en tren todos los días. Al comienzo de su segundo período, se enamora de una chica, llamada 
					  Kotonoha Katsura, quien asiste a la misma escuela.
				</div>
				<div id="div2">
				      
					  con su <span>teléfono móvil</span> (si tienes la <span>fotografía</span> de la persona que te guste y nadie se da <span>cuenta</span> tu amor se hará <span>realidad</span>).Su compañera de mesa, <span>Sekai</span>Saionji, observa la foto 
					  durante una clase y se compromete a ayudarlo en concretar una relación amorosa con Kotonoha, a pesar del hecho de que, aunque Makoto no lo sabe, Sekai está enamorada 
					  de él. Así, los tres terminan vinculados en un triángulo amoroso, que le va a traer muchos problemas a Makoto.
					  Estudiante de primer año, de la clase 4. Ella toma el mismo tren que Makoto diariamente, y se vuelve su novia en el segundo episodio. A pesar de su figura "voluptuosa"
				</div>
				<div id="div3">
				       busto es mucho más grande que el de la mayor parte de las <span>chicas</span>), ella es <span>callada</span> y tiene una naturaleza tímida, pero también le tiene un poco de miedo a los muchachos. 
					   Debido a esta actitud reservada, <span>Kotonoha</span> y <span>Makoto</span> a menudo tienen <span>situaciones</span> torpes. Ella es odiada por las chicas en el consejo estudiantil, del cual forma parte. Su familia 
					   es rica; sus padres trabajan y ella vive con ellos y su hermana <span>Kokoro</span> en una preciosa casa fuera de la ciudad. Tanto su salud 
				</div>
		</body>
</html>

Código CSS:

Código: [Seleccionar]

/*Curso de CSS - aprenderaprogramar.com*/
body{
	background-image: url(http://i44.photobucket.com/albums/f30/Jack_f1/img4_zps9bk4wtx1.png);
}
div{
	width: 200px;
	  height: 400px;
	    border: solid 4px blue;
		  margin: 20px;
		    padding: 10px;
			  float: left;
			    background-color: white;
}

/*Div1 */
#div1{
	text-align: center;
	  color: #FF6347;
	    text-indent: 10%;
}
#div1 span{
	text-decoration: underline;
}

/*Div2 */
#div2{
	text-align: right;
	  color: #008080;
	    text-indent: 50px;
		  white-space: pre-wrap;
		    overflow: hidden;
}
#div2 span{
	text-decoration: overline;
}

/*Div3 */
#div3{
	text-align: justify;
	  color: #8B4513;
              text-indent: 20%;
}
#div3 span{
	text-decoration: line-through;
}

Le agrege un color azul al borde para quede mas chulo.

pedro,, · « **Respuesta #1 en:** 17 de Abril 2017, 00:31 »

Hola Jorgito.

La parte del apartado b donde dice que 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..., para esto tendrías que usar:

Código: [Seleccionar]

white-space: pre-line;
Además, también te faltaría por resolver el apartado d.

Saludos.

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

Noticias: