Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Lorenzo31 en 15 de Febrero 2016, 18:18

Título: HTML crear un borde punteado o a trazos Shortand notación CSS abreviada CU01027D
Publicado por: Lorenzo31 en 15 de Febrero 2016, 18:18
Buenas, dejo la solución a mi ejercicio CU01027D.

EJERCICIO 1

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos127D.css"
</head>
<body>
     <div>DIVISIÓN 1</div>
<br/><br/>
<div id="segunda">DIVISIÓN 2</div>
</body>
</html>


estilos127D.css

Código: [Seleccionar]
html, body { height:100%; }
div { height:40%; text-align:center; }
/*Primera división*/
div:nth-child(1){ border-top-style:dotted; border-top-width:10px; border-top-color:#00FF00;
  border-right-style:dashed; border-right-width:20px; border-right-color:#0000FF;
  border-bottom-style:double; border-bottom-width:10px; border-bottom-color:#A52A2A;
  border-left-style:groove; border-left-width:30px; border-left-color:#2F4F4F; }
/*Segunda división*/
#segunda { border-top-style:inset; border-top-width:30px; border-top-color:#B22222;
  border-right-style:solid; border-right-width:22px; border-rigth-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; }


EJERCICIO2

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos127Dabreviados.css"
</head>
<body>
     <div>DIVISIÓN 1</div>
<br/><br/>
<div id="segunda">DIVISIÓN 2</div>
</body>
</html>


estilos127Dabreviados.css

Código: [Seleccionar]
html, body { height:100%; }
div { height:40%; text-align:center; }
/*Primera división*/
div:nth-child(1){ border-style:dotted dashed double groove;
  border-width:10px 20px 10px 30px;
          border-color:#00FF00 #0000FF #A52A2A #2F4F4F; }
/*Segunda división*/
#segunda { border-style:inset solid double dotted;
   border-width:30px 22px 25px 17px;
   border-color:#B22222 #DAA520 #4B0082 #808000; }
Título: Re:Shortand: notación CSS abreviada. CU01027D
Publicado por: Mario R. Rancel en 17 de Febrero 2016, 21:12
Buenas tardes, todo correcto en la aplicación de estilos de bordes tanto en el ejercicio 1 como en el ejercicio 2.

Repito lo ya comentado sobre html, body {height:100%}: no es habitual aplicar una regla html, body (aunque puedes usarla ya que no hay nada que te lo impida, pero hasta cierto punto se verá como redundante. No es común aplicar reglas al elemento html).

Otra cosa que no es habitual es aplicar un valor de height:100% al body. El valor de altura en el body no se suele establecer, quedando la altura determinada por los contenidos de la propia página.

Saludos
Título: Re:HTML crear un borde punteado o a trazos Shortand notación CSS abreviada CU01027D
Publicado por: Lorenzo31 en 17 de Febrero 2016, 23:17
Si, gracias Mario, ya no lo repetire supongo que al hacer pruebas si algo no queda como me gusta en pantalla, usaba eso del height 100% para body, pero ya no lo usaré más y recurriré a comprender mejor el resto de cosas que haga ( que será donde esté el problema seguro jeje )

Gracias Mario.
Título: Re:HTML crear un borde punteado o a trazos Shortand notación CSS abreviada CU01027D
Publicado por: hymsoft en 20 de Agosto 2016, 14:27
Buenas buenas!!! Mi nombre es Hugo, y también estoy aprendiendo. Revisando tu ejercicio me di cuenta que aqui

#segunda {...
        border-right-style:solid; border-right-width:22px; border-rigth-color:#DAA520;
       ... }

esta mal escrito, por lo tanto, no se aplica el color que le pones.

Creo que usas html, body { height:100%; } para que div { height:40%; text-align:center; } funcione, ya que el height funciona solo si el contenedor padre no esta en Auto. Yo para no declarar eso en el html ni el body, uso un div como contenedor (por lo menos es lo que hasta aqui aprendí) y a ese div le doy la medida  ;)

Saludos gente y a seguir aprendiendo!!!!