Autor Tema: Curso CSS desde cero ejercicio CU01013D encadenar varios selectores y herencia  (Leído 3254 veces)

Sergio94

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 2
    • Ver Perfil
Buenas noches.. 

Quería preguntar si los pasos que estoy haciendo para resolver el ejercicio que aparece en la parte final de este enlace http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=716:concepto-de-herencia-en-hojas-de-estilo-css-ique-es-forzar-herencia-con-inherit-ejemplos-cu01013d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203   (selector de estilos por class)  están correctos. No me aplica ningún efecto en el archivo .html

Aclaración: Use Mozilla y Chrome pero no me funcionó con ninguno.

Les adjunto el codigo html y el css.

Archivo ejercicio concepto herencia.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="estilos concepto herencia.css">
</head>
<body>
<div class="principal"><h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p></div>
<div class="secundario"><h3>Lanzamos el producto <span>X-FASHION</span></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 class="secundario"><h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto <span>T-MOTION</span></p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html>

Archivo estilos concepto herencia.css:

Código: [Seleccionar]
/*Estilos CSS - concepto herencia*/
body {font-family: Arial, sans-serif;}
h1.principal {color:red; font-size:130%;}
h3.secundario{color:verde; font-size:110%;}
h3.secundario span{background-color:yellow;}

« Última modificación: 04 de Abril 2015, 11:24 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Hola Sergio, dado que eres nuevo en los foros te indico algunas cuestiones de interés:

- Para poner título a los temas debes tener en cuenta lo que se indica en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

- En el caso de ejercicios, incluye siempre la referencia del ejercicio, por ejemplo en este caso CU01013D

- Para adjuntar código en los foros sigue las indicaciones que se dan en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

- Si el código no es demasiado largo, preferiblemente pégalo directamente usando [ code] ... [ / code] en vez de ponerlo como archivos adjuntos



Ahora sobre el código que has creado te indico lo siguiente:

a) Los nombres de archivo es preferible que no contengan espacios, por ello es preferible ejercicio_concepto_herencia.html que ejercicio concepto herencia.html y también estilos_concepto_herencia.css en lugar de estilos concepto herencia.css

b) h1.principal {color:red; font-size:130%;} significa que los elementos h1 cuya clase sea "principal" deben aplicar este estilo. Pero lo que pide el ejercicio es establecer como color de texto el rojo (red) y tamaño de fuente el 130% respecto de lo normal  que para los elementos h1 que se encuentren dentro de un elemento cuyo valor class sea <<principal>>. Esto se escribe así: principal h1 {color:red; font-size:130%;}

Fíjate que el orden es importante, si no pones bien el orden no obtendrás los resultados deseados.

c) En esta regla además de estar mal el orden h3.secundario{color:verde; font-size:110%;} aparece como color verde, ese no es un color válido css. Corrigiendo lo indicado quedaría .secundario h3{color:green; font-size:110%;}

d) La última regla que has escrito también la tienes que corregir y quedaría .secundario h3 span{background-color:yellow;}

El código HTML quedaría igual y el código CSS quedaría así:

Código: [Seleccionar]
/*Estilos CSS - concepto herencia*/
body {font-family: Arial, sans-serif;}
.principal h1{color:red; font-size:130%;}
.secundario h3{color:green; font-size:110%;}
.secundario h3 span{background-color:yellow;}


Aquí puedes leer algunas explicaciones adicionales: www.aprenderaprogramar.com/foros/index.php?topic=1478

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

Sergio94

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 2
    • Ver Perfil
Con razón no me cargaban los estilos, yo estaba siguiendo literalmente como se mostraba en el código de ejemplo 
Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/
  p.destacado { background-color: orange; font-weight:bold; font-size:100%; }
  p.destacado a { background-color: yellow;  font-size:120%; }
no había interpretado bien la consigna...

Muchas gracias por la respuesta!

Buenos dias

 

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