Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: pedro,, en 28 de Agosto 2015, 23:32
-
Después de unas vacaciones continuo con el CSS, ahí va mi ejercicio.
EJERCICIO 1
Crea un documento HTML con 2 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde escribiendo de forma individual cada una de las siguientes propiedades CSS:
a) Para el div 1: la parte superior con borde de puntos redondeados, grosor 10 píxeles y color verde. La parte derecha con borde de trazos o segmentos rectangulares, grosor 20 píxeles y color azul. La parte inferior con borde de línea doble, grosor 10 píxeles y color #A52A2A. La parte izquierda con borde con efecto groove, grosor 30 píxeles y color #2F4F4F.
b) Para el div 2: la parte superior con borde con efecto inset, grosor 30 píxeles y color #B22222. La parte derecha con borde sólido, grosor 22 píxeles y color #DAA520. La parte inferior con borde de línea doble, grosor 25 píxeles y color #4B0082. La parte izquierda con borde de puntos redondeados, grosor 17 píxeles y color #808000.
EJERCICIO 2
Crea un documento HTML con el mismo aspecto y propiedades CSS que las descritas para el ejercicio 1, pero en este caso usando la notación shortand de bordes CSS y la propiedad border abreviada.
Código HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W3C Validator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos_ejercicioCU01027D_1.css">
</head>
<body>
<div id="uno">div 1</div>
<br/><br/>
<div id="dos">div 2</div>
<br/><br/>
<div id="tres">div 1</div>
<br/><br/>
<div id="cuatro">div 2</div>
</body>
</html>
Código CSS:
#uno{
border-top-style: dotted;
border-top-width: 10px;
border-top-color: green;
border-right-style: dashed;
border-right-width: 20px;
border-right-color: blue;
border-bottom-style: double;
border-bottom-width: 10px;
border-bottom-color: #DAA520;
border-left-style: groove;
border-left-width: 30px;
border-left-color: #2F4F4F;
}
#dos{
border-top-style: inset;
border-top-width: 30px;
border-top-color: #B22222;
border-right-style: solid;
border-right-width: 22px;
border-right-color: #DAA520;
border-bottom-style: double;
border-bottom-width: 25px;
border-bottom-color: #4B0082;
border-left-style: dotted;
border-left-width: 17px;
border-left-color: #808000;
}
#tres{
border-style: dotted dashed double groove;
border-width: 10px 20px 10px 30px;
border-color: green blue #DAA520 #2F4F4F;
}
#cuatro{
border-style: inset solid double dotted;
border-width: 30px 22px 25px 17px;
border-color: #B22222 #DAA520 #4B0082 #808000;
}
El ejercicio 2, en vez de crear otro html, lo que hice fue añadir dos div más.
Saludos.
-
Hola Pedro, unas vacaciones siempre son buenas ;)
El ejercicio lo veo todo bien
Para ver los bordes con un poco más de amplitud se puede añadir la regla div {font-size: 120px;}
El border-bottom-color: #DAA520; creo que está equivocado de color con lo que pedía el enunciado
Saludos
-
Gracias por la corrección.
tienes razón, el color indicado era #A52A2A.