Autor Tema: Shortand notation notación abreviada CSS, Ejercicio CU01027D border style color (Leído 3347 veces)

pedro,, · « **en:** 28 de Agosto 2015, 23:32 »

Después de unas vacaciones continuo con el CSS, ahí va mi ejercicio.

Citar

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

Código: [Seleccionar]

<!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:

Código: [Seleccionar]

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

Mario R. Rancel · « **Respuesta #1 en:** 30 de Agosto 2015, 11:14 »

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

pedro,, · « **Respuesta #2 en:** 30 de Agosto 2015, 22:50 »

Gracias por la corrección.

tienes razón, el color indicado era #A52A2A.

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

Noticias: