Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 15 de Agosto 2017, 01:00
-
Buenas noches. Este es el enunciado del ejercicio CU01011D del tutorial de programación web con CSS desde cero:
EJERCICIO
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).
<!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">
</head>
<body>
<div>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
</div>
<div>
<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>
<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>
Acá el código:
<!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">
<style type="text/css">
#novedades h1{color:red;}
#xFashion h3, #tMotion h3{color:green;}
#novedades{background-color:yellow;}
</style>
</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>
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Todo bien resuelto. :D