Autor Tema: CSS. Selector ID: Aplicar estilos a partes de una web con nombre unico CU01011D (Leído 2440 veces)

KOFFERO · « **en:** 02 de Octubre 2017, 18:30 »

Selectores CSS: id. Aplicar CSS a partes de una web. Ejemplos. Diferenciar etiquetas HTML en ids (Ejercicio CU01011D del curso básico de programación CSS)

Enunciado:

Citar

Analiza el siguiente código HTML. En él encontrarás tres etiquetas div. Haz lo siguiente:

a) Establece atributos id para cada una de ellas con valores <<novedades>> para la primera, <<xFashion>> para la segunda y <<tMotion>> para la tercera.

b) Usando CSS establece como color de texto el rojo (red) para los elementos h1 que se encuentren dentro del elemento con id <<novedades>>.

c) Usando CSS establece como color de texto el verde para los elementos h3 que se encuentren dentro de los elementos con id <<xFashion>> y <<tMotion>>.

d) Usando CSS establece como color de fondo para el elemento con id <<novedades>> el amarillo (yellow).

Código HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="novedades">
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
</div>
<div id="xFashion">
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
</div>
<div id="tMotion">
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html>

Código CSS:

Código: [Seleccionar]

/* Color red para el h1 de novedades*/
#novedades h1{
	color: red;
	  background-color: yellow;
}

/* Color green para los h3 de xFashion y tMotion*/
#xFashion h3, #tMotion h3{
	color: green;
}

Un saludo

Alex Rodríguez · « **Respuesta #1 en:** 22 de Noviembre 2017, 20:22 »

Hola Jorge,,, en este código habría un pequeño detalle a corregir.

Se pide "d) Usando CSS establece como color de fondo para el elemento con id <<novedades>> el amarillo (yellow)."

Al escribir

Código: [Seleccionar]

#novedades h1{
	color: red;
	  background-color: yellow;
}

en realidad estás aplicando el color de fondo solo a los elementos h1 dentro de elementos con id novedades, cuando lo que se pide es que el color de fondo sea para todo el elemento novedades, no para elementos h1 dentro de novedades.

La solución sería

Código: [Seleccionar]

#novedades {background-color:yellow;}
#novedades h1 {color:red;}
#tmotion h3, #xfashion h3 {color:green;}

Saludos

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

Noticias: