Autor Tema: CSS y HTML color de fondo propiedad background-color CSS hsl Ejercicio CU01021D (Leído 2587 veces)

Pandemia · « **en:** 02 de Febrero 2016, 22:50 »

Aquí os dejo el código para ver que tal y sobre todo la estructuración puesto que soy principiante y este es mi primer mensaje, agradecería de antemano que me dijerais que tal lo posiciono todo ya que solo he hecho el curso de html desde cero. Repito gracias ante todo por vuestro tiempo.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
	<title>Color de fondo; propiedad background-color transparent</title>
	<meta name="description" content="portal web aprenderaprogramar.com">
	<meta name="keywords" content="propiedad background-color css. transparent.">
	<meta charset="utf-8">
	<link rel="stylesheet"type="text/css"href="estilos6.css">
</head>
<body>
<header>
<h2>background-color tabla de colores transparent</h2>
</header>

<div id="division1" class="divisiones en cajas">
División 1: un color expresado con notación RGB:
rgb(165,66,66)
</div>
<br/>
<div id="division2" class="divisiones en cajas">
División 2: un color expresado con notación RGBA:
rgba(165,39,39,0.5)
</div>
<br/>
<div id="division3" class="divisiones en cajas">
División 3: un color expresado con notación hexadecimal:
#AF3A3A
</div>
<br/>
<div id="division4" class="divisiones en cajas">
División 4: un color expresado con notación HSL:
hsl(116,59%,31%)
</div>
<br/>
<div id="division5" class="divisiones en cajas">
División 5: un color expresado con notación HSLA:
hsla(44,33%,60%,0.6)
</div>
<br/>
<div id="division6" class="divisiones en cajas">
División 6: un color designado con un NOMBRE:
red
</div>
</body>
</html>

Y ahora el CSS

Código: [Seleccionar]

/*color de fondo propiedad background-color css. transparent.	CU01021D*/

.divisionesencajas {
	text-align: center;
	border: 5px solid black;
	font-size: 25px;
}

#division1{background-color: rgb(165,66,66);}
#division2{background-color: rgba(165,39,39,0.5);}
#division3{background-color: #AF3A3A;}
#division4{background-color: hsl(116,59%,31%);}
#division5{background-color: hsla(44,33%,60%,0.6);}
#division6{background-color: red;}

Ogramar · « **Respuesta #1 en:** 04 de Febrero 2016, 10:04 »

Buenas Pandemia

Como comentas que son tus primeros mensajes, pedirte que para poner título a los temas sigas las recomendaciones que se dan en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0 por ejemplo un título adecuado para este hilo sería "CSS Color de fondo. Propiedad background-color CSS. Ejercicio CU01021D"

Sobre el código comentarte que cumples correctamente con lo que pedía el ejercicio aunque tienes cosas a mejorar.

Para los atributos html te recomiendo nunca usar espacios en los nombres de los atributos, por ejemplo en lugar de class="divisiones en cajas" usar class="divisionesEnCajas" ó class="divisiones_en_cajas" ó class="divisionesencajas" o algo similar. Tampoco debes usar tildes ni eñes, esto es una forma de estandarizar y evitar tener problemas a posteriori (no significa que siempre vayan a surgir problemas, pero haciéndolo según el estándar te quedas seguro).

Si te fijas por este problema no te está aplicando los estilos definnidos en .divisionesencajas

En este código he estandarizado la forma de nombrar y ya aplica los estilos que no estaba aplicando

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
	<title>Color de fondo; propiedad background-color transparent</title>
	<meta name="description" content="portal web aprenderaprogramar.com">
	<meta name="keywords" content="propiedad background-color css. transparent.">
	<meta charset="utf-8">
	<style type="text/css">
/*color de fondo propiedad background-color css. transparent.	CU01021D*/
.divisionesencajas {
	text-align: center;
	border: 5px solid black;
	font-size: 25px;
}
#division1{background-color: rgb(165,66,66);}
#division2{background-color: rgba(165,39,39,0.5);}
#division3{background-color: #AF3A3A;}
#division4{background-color: hsl(116,59%,31%);}
#division5{background-color: hsla(44,33%,60%,0.6);}
#division6{background-color: red;}
</style>
</head>
<body>
<header>
<h2>background-color tabla de colores transparent</h2>
</header>
<div id="division1" class="divisionesencajas">
División 1: un color expresado con notación RGB:
rgb(165,66,66)
</div>
<br/>
<div id="division2" class="divisionesencajas">
División 2: un color expresado con notación RGBA:
rgba(165,39,39,0.5)
</div>
<br/>
<div id="division3" class="divisionesencajas">
División 3: un color expresado con notación hexadecimal:
#AF3A3A
</div>
<br/>
<div id="division4" class="divisionesencajas">
División 4: un color expresado con notación HSL:
hsl(116,59%,31%)
</div>
<br/>
<div id="division5" class="divisionesencajas">
División 5: un color expresado con notación HSLA:
hsla(44,33%,60%,0.6)
</div>
<br/>
<div id="division6" class="divisionesencajas">
División 6: un color designado con un NOMBRE:
red
</div>
</body>
</html>

Salu2

Pandemia · « **Respuesta #2 en:** 04 de Febrero 2016, 19:36 »

Buenas; lo he corregido y tienes razón he quitado lo espacios después de los class y ahora si que sale perfecto. No me había fijado en ese tema. gracias espero que no me pase más.
Gracias por la corrección pero es así como se aprende.

gracias por tu tiempo.
saludos
Hasta pronto

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

Noticias: