Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Sergio94 en 04 de Abril 2015, 05:56
-
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 (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:
<!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:
/*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;}
-
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í:
/*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!
-
Con razón no me cargaban los estilos, yo estaba siguiendo literalmente como se mostraba en el código de ejemplo
/* 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