Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Jack_F en 29 de Enero 2017, 22:16
-
Hola amigos como estan, espero que bien aqui dejo el ejercicio CU01026D del tutorial de programador web desde cero con CSS.
Ejercicio
Crea un documento HTML con 10 divisiones, cada una separada de la anterior por dos elementos <br />.
En cada división introduce un texto (p.ej. div 1, div 2, div 3...) y aplícale un estilo de borde diferente utilizando la propiedad border-style.
Código HTML
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio CU01026D 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 />
<div class="Div3">DIV 3</div><br /><br />
<div class="Div4">DIV 4</div><br /><br />
<div class="Div5">DIV 5</div><br /><br />
<div class="Div6">DIV 6</div><br /><br />
<div class="Div7">DIV 7</div><br /><br />
<div class="Div8">DIV 8</div><br /><br />
<div class="Div9">DIV 9</div><br /><br />
<div class="Div10">DIV 10</div><br /><br />
</body>
</html>
Bueno yo use el selector class
Código CSS
body{text-align:center;}
/*Use un mismo borde para (1-2),( 3-4),(5-6),(7-8),(9-10)*/
div.Div1, div.Div2{border-style:groove; border-width:20px; border-color:red;}
div.Div3, div.Div4{border-style:outset; border-width:20px; border-color:blue;}
div.Div5, div.Div6{border-style:double; border-width:20px; border-color:green;}
div.Div7, div.Div8{border-style:ridge; border-width:20px; border-color:orange;}
div.Div9, div.Div10{border-style:inset; border-width:20px; border-color:pink;}
-
Hola Jorgito Pucheta.
El enunciado dice que aplique un tipo de borde a cada elementos div, tu solo aplicaste 5 de los 10 disponibles.
Saludos. ;D
-
Tienes razon, perdro. Pero aqui dejo el código CSS con los 10 tipos de border.
/*10 Bordes para cada div*/
body{text-align:center;}
div.Div1{border-style:groove; border-width:20px; border-color:red;}
div.Div2{border-style:dotted; border-width:20px; border-color:pink;}
div.Div3 {border-style:outset; border-width:20px; border-color:yellow;}
div.Div4{border-style:dashed; border-width:20px; border-color:#AE2222;}
div.Div5{border-style:double; border-width:20px; border-color:orange;}
div.Div6{border-style:solid; border-width:20px; border-color:#B79090}
div.Div7{border-style:ridge; border-width:20px; border-color:blue;}
div.Div8{border-style:hidden; border-width:20px; border-color:#19274E}
div.Div9{border-style:inset; border-width:20px; border-color:DarkGreen;}
div.Div10{border-style:none; border-width:20px; border-color:#BY gracias por revisar mi ejercicio, como siempre muy amable , pedro.
Un saludo. ;D
-
A mi no ha salido muy bien aunque no he usado ese código. He reutilizado uno que salia bien en otro ejercicio pero no veo por donde me equivoco. Lo pego por si le ven el fallo.
<meta charset="utf-8">
<title>Ejercicio CU01021D</title>
<link rel="stylesheet"type="text/css"href="myestilo.css">
</head>
<body>
<h2 >Colores</h2>
<div class="Color-caja">
<div>div1</div><br/><br/>
<div>div2</div><br/><br/>
<div>div3</div><br/><br/>
<div>div4</div><br/><br/>
<div>div5</div><br/><br/>
<div>div6</div><br/><br/>
<div>div7</div><br/><br/>
<div>div8</div><br/><br/>
<div>div9</div><br/><br/>
<div>div10</div><br/><br/>
</div>
</body>
</html>
css
Color-caja div:nth-child(1){border-style:none;border-width:20px; border-color:red;}
Color-caja div:nth-child(2){border-style:hidden;border-width:20px; border-color:blue;}
Color-caja div:nth-child(3){border-style:dotted;}
Color-caja div:nth-child(4){border-style:dashed;}
Color-caja div:nth-child(5){border-style:solid;}
Color-caja div:nth-child(6){border-style:dooble;}
Color-caja div:nth-child(7){border-style:groove;}
Color-caja div:nth-child( 8 ){border-style:ridge;}
Color-caja div:nth-child(9){border-style:inset;}
Color-caja div:nth-child(10){border-style:outset;}
-
Hola bowen67, lo primero que te recomiendo es leer las reglas del foro que esta en este link: https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0 (https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0)
Segundo tambien si quieres debes usar unos selectores "class" o "id". Que esta en los link de acá.
Id: https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=714:selectores-css-id-aplicar-css-a-partes-de-una-web-ejemplos-diferenciar-etiquetas-html-en-ids-cu01011d&catid=75&Itemid=203 (https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=714:selectores-css-id-aplicar-css-a-partes-de-una-web-ejemplos-diferenciar-etiquetas-html-en-ids-cu01011d&catid=75&Itemid=203)
class: https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=715:selectores-css-id-aplicarselector-de-clases-css-class-aplicar-estilos-css-en-distintos-lugares-de-una-web-ejemplos-cu01012d&catid=75&Itemid=203 (https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=715:selectores-css-id-aplicarselector-de-clases-css-class-aplicar-estilos-css-en-distintos-lugares-de-una-web-ejemplos-cu01012d&catid=75&Itemid=203)
Así puedes ponerle los estilos a cada div o cualquier otra parte con estos dos selectores.
Bueno en cuanto a tu ejercicio la mayoria esta todo bien. Pero agregas unas cosa que hace que no aga efecto en los demás div son: Color-caja.
Mira este ejemplo usando los selectores class y id.
HTML:
<meta charset="utf-8">
<title>Ejercicio CU01021D</title>
<link rel="stylesheet"type="text/css"href="estilos.css">
</head>
<body>
<h2 >Colores</h2>
<div class="Color-caja">
<div class="caja1">div1</div><br/><br/>
<div class="caja2">div2</div><br/><br/>
<div class="caja3">div3</div><br/><br/>
<div class="caja4">div4</div><br/><br/>
<div class="caja5">div5</div><br/><br/>
<div class="caja6">div6</div><br/><br/>
<div class="caja7">div7</div><br/><br/>
<div class="caja8">div8</div><br/><br/>
<div class="caja9">div9</div><br/><br/>
<div class="caja10">div10</div><br/><br/>
</div>
</body>CSS
/*Acá utilizo el selector class */
.caja1{
border-style: none;
}
.caja2{
border-style: hidden;
}
.caja3{
border-style: dotted;
}
.caja4{
border-style: inset;
}
.caja5{
border-style: solid;
}
.caja6{
border-style: ridge;
}
.caja7{
border-style: dashed;
}
.caja8{
border-style: outset;
}
.caja9{
border-style: groove;
}
.caja10{
border-style: double;
}
Tambien debes poner el código html completo.
Un saludo. :D