Autor Tema: Ejercicios resueltos CSS Tema selectores id ejemplos con código HTML CU01011D  (Leído 2337 veces)

Sosender

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 10
    • Ver Perfil
Hola, adjunto códigos propuesta de solución para el ejercicio CU01011D del programa formativo en desarrollo web de aprenderaprogramar

Enunciado:

Citar
Analizar código html. En el se encuentran tres etiquetas div.hacer 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 para los elementos h1 que se encuentran dentro del elemento con id "novedades".

c) usando css establece como color de texto el verde para los elementos h3 que se encuentran dentro de los elementos con id "xFashion" y "tMotion".

d) usando css establece como color de fondo para el elemento con id "novedades" el amarrillo.


Código propuesto:

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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="estilosejerciciocu01011d.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>


Y el código css:

Código: [Seleccionar]
/*Comentario en CSS estilos aprenderaprogramar.com
ejemplo aplicación reseñado cuaderno CU01011D-CSS*/

#novedades{background-color:yellow;}
#novedades h1{color:red;}
#xFashion h3 {color:green;}
#tMotion h3{color:green;}
« Última modificación: 28 de Octubre 2020, 17:37 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola, el ejercicio está bien resuelto. Como hay dos líneas que aplican la misma regla CSS (color:green;) se podrían unificar en una si se quiere, como se hace en https://aprenderaprogramar.com/foros/index.php?topic=3699.0

Saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".