Hola amigos aqui de nuevo con otro ejercicio, el CU01027D del tutorial de programación web elemental.
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. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Ejercicio 1:
Código HTML
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio1 CU01027D Hecho por, Jorgito Pucheta</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div class="Div1">DIV 1</div><br /><br />
<div class="Div2">DIV 2</div><br /><br />
</body>
</html>
Código CSS
/*Código para el ejercicio del curso de CSS */
body{text-align:center;}
div.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;
}
div.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;
}
Ejercicio 2:
Código HTML
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 2 de la entrega nº27 hecho por, Jorgito Pucheta</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilos3.css" />
</head>
<body>
<div class="Div1">DIV 1</div><br /><br />
<div class="Div2">DIV 2<div><br /><br />
</body>
</html>
Código CSS
/*Usando la propiedades notación shortand abreviada*/
body{text-align:center;}
div.Div1{
border-style:dotted dashed double groove;
border-width:10px 20px 10px 30px;
border-color:green blue #A52A2A #2F4F4F;
}
/*Utilizando propiedad border shorthand abreviada*/
div.Div2{
border-top:30px inset #B22222;
border-right: 22px solid #DAA520;
border-bottom:25px double #4B0082;
border-left:17px dotted #808000;
}
Tema: CSS y HTML grosor Border-width, border-color y notación shorthand CU01027D (Leído 3017 veces)
RSS -
WAP2