Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Jack_F en 11 de Mayo 2017, 17:53
-
Resolución del ejercicio CU01041D del curso de programador web con CSS
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 18px en todas direcciones, relleno de 8 píxeles en todas direcciones, ancho de 240 píxeles, altura de 300 píxeles y borde sólido de 3 píxeles de anchura con color de borde azul.
b) El div 1 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor, y el excedente de texto no debe mostrarse apareciendo en el punto final unos puntos … . La altura de línea debe ser un 5 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra sólida de color rojo con desplazamiento hacia la derecha y abajo.
c) El div 2 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor, y el excedente de texto no debe mostrarse aunque rebase al contenedor, y no deben aparecer puntos
en el lugar donde se corte el texto. La altura de línea debe ser un 10 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra sólida de color azul con desplazamiento hacia la izquierda y abajo.
d) El div 3 debe tener alineación del texto justificada y color de texto #8B4513. Debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. La altura de línea debe ser un 20 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra con efecto de difuminado de color verde de modo que parezca que existe vapor
verde detrás del texto.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Portal web- aprenderaprogramar.com</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="div1">
<span class="uno">El div 1</span> debe contener un texto suficientemente largo como para exceder el tamaño del contenedor,
y el excedente de texto no debe mostrarse apareciendo en el punto final unos puntos … . La altura de
línea debe ser un 5 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener
tamaño de fuente 18 píxeles y una sombra sólida de color rojo con desplazamiento hacia la derecha y
abajo.
</div>
<div id="div2">
<span class="dos">El div 2</span> debe contener un texto suficientemente largo como para exceder el tamaño del contenedor,
y el excedente de texto no debe mostrarse aunque rebase al contenedor, y no deben aparecer puntos
en el lugar donde se corte el texto. La altura de línea debe ser un 10 % superior a lo normal. Un
fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra sólida
de color azul con desplazamiento hacia la izquierda y abajo.
</div>
<div id="div3">
<span class="tres">El div 3</span> debe tener alineación del texto justificada y color de texto #8B4513. Debe contener un texto
suficientemente largo como para exceder el tamaño del contenedor. La altura de línea debe ser un 20
% superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18
píxeles y una sombra con efecto de difuminado de color verde de modo que parezca que existe vapor
verde detrás del texto.
</div>
</body>
</html>
Código CSS:/*Curso CSS - aprenderaprogramar.com*/
div{
float: left;
margin: 18px;
padding: 8px;
width: 240px;
height: 300px;
border: solid 3px blue;
}
/* div 1 */
#div1{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 105%;
font-size: 18px;
}
/* div 2 */
#div2{
overflow: hidden;
line-height: 110%;
font-size: 18px;
}
/* div 4 */
#div3{
text-align: justify;
color: #8B4513;
overflow: hidden;
line-height: 120%;
font-size: 18px;
}
.uno{text-shadow: 2px 2px red;} /* el primer span */
.dos{text-shadow: -2px 2px blue; font-size: 18px; } /* segundo span */
.tres{text-shadow: 1px 1px 12px green; font-size: 18px; } /* tercer span */
En el div uno pensé que no iba los tres puntos suspensivos. le agregé para evitar inconvenientes. También pregunto es recomendable usar la propiedad text-overflow o no lo es.
Gracias y un saludo. :D
-
Hola Jorgito.
En el div3 no se indica que halla que usar overflow: hidden.
Y sobre tu consultas sobre si text-overflow es recomendable usarlo, pues dependerá de lo que quieras conseguir con ello.
Saludos. ;D
-
Si tienes razón en el div 3 no decia que lleva overflow: hidden. Y gracias por aclarar mi dudas.
Un saludo. ;D