Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: hymsoft en 19 de Agosto 2016, 19:52
-
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
<!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
/* 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;}
-
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