Autor Tema: CSS y HTML Cuáles son los tipos de borde TOP, RIGHT, LEFT Y BOTTOM CU01026D (Leído 2724 veces)

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

Código: [Seleccionar]

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

Código: [Seleccionar]

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;}

pedro,, · « **Respuesta #1 en:** 30 de Enero 2017, 13:00 »

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.

Jack_F · « **Respuesta #2 en:** 30 de Enero 2017, 19:20 »

Tienes razon, perdro. Pero aqui dejo el código CSS con los 10 tipos de border.

Código: [Seleccionar]

/*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:#B

Y gracias por revisar mi ejercicio, como siempre muy amable , pedro.

Un saludo.

bowen67 · « **Respuesta #3 en:** 13 de Junio 2017, 20:59 »

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;}

Jack_F · « **Respuesta #4 en:** 15 de Junio 2017, 05:38 »

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

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

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

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:

Código: [Seleccionar]

  <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

Código: [Seleccionar]

 /*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.

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

Noticias:

Autor Tema: CSS y HTML Cuáles son los tipos de borde TOP, RIGHT, LEFT Y BOTTOM CU01026D (Leído 2724 veces)

Jack_F

CSS y HTML Cuáles son los tipos de borde TOP, RIGHT, LEFT Y BOTTOM CU01026D

pedro,,

Re:CSS. Tipos de borde TOP, RIGHT, LEFT Y BOTTOM (CU01026D)

Jack_F

Re:CSS. Tipos de borde TOP, RIGHT, LEFT Y BOTTOM (CU01026D)

bowen67

Re:CSS y HTML Cuáles son los tipos de borde TOP, RIGHT, LEFT Y BOTTOM CU01026D

Jack_F

Re:CSS y HTML Cuáles son los tipos de borde TOP, RIGHT, LEFT Y BOTTOM CU01026D

Preguntas y respuestas