Autor Tema: Aplicar selectores id con CSS en código HTML ejemplo aplicar colores CU01011D  (Leído 2073 veces)

Chuckyldo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 34
    • Ver Perfil
Hola amigos, acabo de hacer un ejercicio de CSS básico, me enseñaron cómo se usa el selector por id, me pareció muy bueno y el ejercicio era el siguiente:

Citar
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).

El cógido html que yo escribí es este:

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">
<link rel="stylesheet" type="text/css" href="estilo de ejemplo.css">
<meta charset="utf-8">
</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="xMotion">
<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 de mi archivo de CSS es este:

Código: [Seleccionar]
#novedades h1 {
  color: red;
}
#novedades {
  background-color: yellow;
}
#xFashion h3 {
  color: green;
}
#xMotion h3 {
  color: green;
}

Bueno amigos, perdón por extenderme, pero los códigos son cada vez más grandes, espero me ayuden y mi digan si estoy bien o mal, en el caso de estar mal, por favor corríjanme. Muchas gracias  :)
« Última modificación: 11 de Junio 2017, 18:02 por Ogramar »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Aplicar selectores id con CSS. (CU01011D)
« Respuesta #1 en: 10 de Abril 2017, 22:20 »
Buenas Chuckyldo.

El ejercicio está bien resuelto.

El apartado c también podrías resolverlo así:

Código: [Seleccionar]
#xFashion h3, #xMotion h3 {
color: green;
}

Saludos.  ;D

 

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".