Autor Tema: Selectores CSS aplicar estilos a elementos diferenciados por id ejemplo CU01011D  (Leído 1990 veces)

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Buenas buenas!!!!

Aca mi solución para el ejercicio CU01011D del tutorial de desarrollo web con CSS desde cero.

Mucha frustración porque aunque sabía que lo que estaba haciendo estaba bien, no veía los cambios en la pagina web, cuando agregaba los estilos en la hoja, hasta que revisando el html encontre que no había puesto <link rel="stylesheet" type="text/css" href="CU01011D.css">  :-[ ::) :P :-X

Saludos gente
CU01011D.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="CU01011D.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>

CU01011D.css
Código: [Seleccionar]
/* Hoja de estilos para el ejercicio de la entrega numero 11
curso aprenderaprogramar.com */

/* NOVEDADES */
#novedades {
  background-color: yellow;
}
#novedades h1{
  color:red;
}
/* X-FASHION */
#xFashion h3{
  color:green;
}
/* T-MOTION */
#tMotion{
  color:green;
}
« Última modificación: 15 de Agosto 2016, 21:15 por Alex Rodríguez »
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola, todo correcto.

Copio una referencia de otro hilo que es de interés:

Citar
Una forma de evitar repeticiones es cambiar

#xFashion h3 { color:green; }
#tMotion h3 { color:green; }

Por

#xFashion h3, #tMotion h3 { color:green; }

Delimitando por comas indicas que el mismo estilo se aplique a todos los elementos enumerados separados por comas

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