Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 19 de Agosto 2017, 01:41
-
Buenas noches. Este es el enunciado del ejercicio CU01021D del curso básico de desarrollo web con CSS desde cero:
Crea un documento HTML donde la ventana del navegador esté dividida en 6 partes, cada una con su borde. En cada división pon como color de fondo lo siguiente:
a) División 1: un color expresado con notación RGB.
b) División 2: un color expresado con notación RGBA.
c) División 3: un color expresado con notación hexadecimal.
d) División 4: un color expresado con notación HSL.
e) División 5: un color expresado con notación HSLA.
f) División 6: un color designado con un nombre.
En cada división incluye un texto con la notación y color empleado. Por ejemplo <<Notación RGB, color 218, 165, 32>>.
Acá el código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>CU01021D</title>
<meta charset="utf-8"/>
<style type="text/css">
#contenedor div:first-child{
border: solid;
background-color: rgb(70,20,170);
text-align: center;
margin: auto;
font-size: 40px;
margin-bottom: 5%;
}
#contenedor div:nth-child(2){
border: solid;
background-color: rgba(178,34,34,0.8);
text-align: center;
margin: auto;
font-size: 40px;
margin-bottom: 5%;
}
#contenedor div:nth-child(3){
border: solid;
background-color: #FF2556;
text-align: center;
margin: auto;
font-size: 40px;
margin-bottom: 5%;
}
#contenedor div:nth-child(4){
border: solid;
background-color: hsl(110,55%,40%);
text-align: center;
margin: auto;
font-size: 40px;
margin-bottom: 5%;
}
#contenedor div:nth-child(5){
border: solid;
background-color: hsla(220,80%,50%,0.8);
text-align:center;
margin: auto;
font-size: 40px;
margin-bottom: 5%;
}
#contenedor div:last-child{
border: solid;
background-color: darkorange;
text-align:center;
margin: auto;
font-size: 40px;
margin-top: 5%;
}
</style>
</head>
<body>
<div id="contenedor">
<div>Notación RGB, color 70, 20, 170</div>
<div>Notación RGBA, color 178, 34, 34, 0.8</div>
<div>Notación HEXADECIMAL, color #FF2556</div>
<div>Notación HSL, color 110, 55%, 40%</div>
<div>Notación HSLA, color 220, 80%, 50%, 0.8</div>
<div>Notación por NOMBRE, color darkorange</div>
</div>
</body>
</html>
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Hola EnigmaticNerd, has realizado lo que pedía el ejercicio pero hay cosas a mejorar.
En tu código repites muchos fragmentos, por ejemplo border: solid; lo repites muchas veces, al igual que otros fragmentos de código. Esto no es adecuado: deben evitarse las repeticiones. Para ello debes poner el código común asociado a todos los elementos, y luego separadamente el código específico que sea necesario.
Puedes ver un ejemplo de esto en https://www.aprenderaprogramar.com/foros/index.php?topic=5125.0
Saludos