Hola a todos !! Dejo a continuación el archivo html y dos hojas de estilos, una con notación extendida (ejercicio 1) y otra con notación abreviada (ejercicio 2), correspondientes a la entrega CU01027D del tutorial gratuito de programación que se ofrece en esta web. Desde ya muchas gracias por la atención. Un saludo,
Luis
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 shorthand de bordes CSS y la propiedad border abreviada.
Archivo html
<!DOCTYPE html>
<html>
<head>
<title>"Ejercicio CU01027D"</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
<div id="div1">
<h2>div 1</h2>
<p>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.</p>
</div>
<br/><br/>
<div id="div2">
<h2>div 2</h2>
<p>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.</p>
</div>
<br/><br/>
</body>
</html>
estilos.css para el ejercicio 1
/* Curso CSS estilos aprenderaprogramar.com*/
div{width:600px; height:200px;}
h2 {text-align:center;}
#div1 {
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:#A52A2A;
border-left-style:groove;
border-left-width:30px;
border-left-color:#2F4F4F;
}
#div2 {
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;
}
estilos.css para el ejercicio 2
/* Curso CSS estilos aprenderaprogramar.com*/
div{width:600px; height:200px;}
h2 {text-align:center;}
#div1 {
border-style: dotted dashed double groove;
border-width:10px 20px 10px 30px;
border-color:green blue #A52A2A #2F4F4F;
}
#div2 {
border-style: inset solid double dotted;
border-width:30px 22px 25px 17px;
border-color:#B22222 #DAA520 #4B0082 #808000;
}
Tema: Shorthand: notación CSS abreviada. border-width (thin, thick) - CU01027D (Leído 1888 veces)
RSS -
WAP2