Autor Tema: Aplicar estilos con CSS ejercicio selectores curso CSS desde cero (CU01011D)  (Leído 3221 veces)

nonona

  • Sin experiencia
  • *
  • Mensajes: 2
    • Ver Perfil
Estoy con el ejercicio de este tutorial (CU01011D)  y no consigo que el código CSS que va dirigido a la etiqueta h1 se aplique, el resto funciona bien, seguro que es una tontería pero la veo.
Adjunto código del fichero HTML y CCS


Html
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="ejercicio11.css">
</head>
<body>


<div id = "novedades">
<h1> Novedades </h1>
<p>Aquí presentamos las novedades del sitio.</p>
</div>
<div id="X-FASHION">
<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="T-MOTION">
<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: [Seleccionar]
#novedades h1{color:brown;}
#novedades p{color:blue;}

#X-FASHION h3{color:green;}
#X-FASHION p{color:orange;}

#T-MOTION h3{color:yellow;}
#T-MOTION p{color:brown;}
« Última modificación: 07 de Marzo 2015, 23:20 por Alex Rodríguez »

javi in the sky

  • Avanzado
  • ****
  • Mensajes: 393
    • Ver Perfil
Re:Diferenciar etiquetas HTML en ids (CU01011D)
« Respuesta #1 en: 06 de Marzo 2015, 13:41 »
Hola, si no ves el color del h1 puede deberse a tu monitor y a que has puesto brown en lugar de red:

#novedades h1{color:red;}

A mí me funciona bien.

Para establecer el color verde como pide el enunciado sería #X-FASHION h3, #T-MOTION h3{color:green;}

Para establecer el color de fondo que pide el enunciado: #novedades{background-color:yellow; }

El ejercicio quedaría así (he unido todo en un mismo archivo):

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>
<style type="text/css">
#novedades h1{color:red;}
#xFashion h3, #tMotion h3{color:green;}
#novedades{background-color:yellow; }
</style>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<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 xFashion</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 xFashion" /></p>
</div>
<div id="tMotion">
<h3>Mejoramos el producto tMotion</h3>
<p>Hemos lanzado una nueva versión del producto tMotion</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html>

Saludos

nonona

  • Sin experiencia
  • *
  • Mensajes: 2
    • Ver Perfil
Re:Diferenciar etiquetas HTML en ids (CU01011D)
« Respuesta #2 en: 06 de Marzo 2015, 13:58 »
gracias. :)
el resto de etiquetas si funcionan y tengo esos colores por que he estado haciendo pruebas.


 

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