Autor Tema: Tipos de borde CSS y HTML aplicar distintos tipos de borde en una web CU01026D  (Leído 2131 veces)

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Buenas buenas!!!

Les dejo código html para el ejercicio de la entrega número CU01026D del programa formativo en programación web con CSS desde cero.

Aunque para este ejercicio sirve, podría alguno indicarme la forma correcta de armar el CSS sin tener que usar múltiples id???. Porque de la forma que yo lo hice (que estoy casi casi seguro esta mal),  agregando cualquier cosas en cualquier lado antes de el ultimo DIV, hace que toda la pagina ya no funcione de forma correcta.

Gracias!!!!

CU01026D.html
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Tipos de Bordes - curso aprenderaprogramar.com</title>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Tipos de bordes CSS - aprenderaprogramar.com" />
    <meta name="keywords" content="bordes CSS, CSS, cursos, ejemplos, aprenderaprogramar.com,CU01026D" />   
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="CU01026D.css"/>
  </head>
 
  <body>
    <div>Div 1 - border-style: dashed</div>
    <br/><br/>
    <div>Div 2 - border-style: dotted</div>
    <br/><br/>
    <div>Div 3 - border-style: double</div>
    <br/><br/>
    <div>Div 4 - border-style:groove</div>
    <br/><br/>
    <div>Div 5 - border-style:inset</div>
    <br/><br/>
    <div>Div 6 - border-style: solid</div>
    <br/><br/>
    <div>Div 7 - border-style: ridge</div>
    <br/><br/>
    <div>Div 8 - border-style: outset</div>
    <br/><br/>
    <div>Div 9 - border-left-style: dashed;border-top-style: dotted; border-right-style: double;border-bottom-style: solid</div>
    <br/><br/>
    <div>Div 10 - border-top-style: dotted;border-bottom-style:dotted</div>
    <br/><br/>
  </body>
</html>

CU01026D.css
Código: [Seleccionar]
/* Estilos aplicados al ejercicio entrega N1 26
aprenderaprogramar.com (CU01023D)*/
html{
  text-align: center;
  background-color: aquamarine;
}

div{
  font-size: 1.2em;
}

div:nth-child(1){border-style: dashed;}
div:nth-child(4){border-style: dotted;}
div:nth-child(7){border-style: double;}
div:nth-child(10){border-style:groove;}
div:nth-child(13){border-style:inset;}
div:nth-child(16){border-style: solid;}
div:nth-child(19){border-style: ridge;}
div:nth-child(22){border-style: outset;}
div:nth-child(25){border-left-style: dashed;border-top-style: dotted; border-right-style: double;border-bottom-style: solid;}
div:nth-child(28){border-top-style: dotted;border-bottom-style:dotted;}
« Última modificación: 26 de Agosto 2016, 20:34 por Ogramar »
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2659
    • Ver Perfil
Buenas Hugo, básicamente el ejercicio está bien resuelto y cumple con lo que se pedía. Hay otras formas de solucionarlo, por ejemplo https://www.aprenderaprogramar.com/foros/index.php?topic=3908.0

A medida que practiques más irás cogiendo experiencia para determinar cómo es más conveniente armar un código en cada caso, ya que suelen haber múltiples alternativas

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".