Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Xarlie en 16 de Octubre 2014, 01:11
-
Buenas primeramente daros las gracias por estos cursos que me estan ayudando mucho y son realmente amenos.
Respecto al ejercicio CU01013D del curso de programación con CSS desde cero de aprenderaprogramar tengo un problema que no logro resolver a ver si me podeis echar una mano y gracias de antemano ;)
Usando CSS establece como color de fondo el amarillo (yellow) para los elementos span que se encuentren dentro de elementos h3 que se encuentren dentro de elementos cuyo atributo class sea <<secundario>>.
<!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="../CSS/Estilos.css"></link>
</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>h3.secundario span{background-color:yellow;}
He probado con otras combinaciones y funciona todo a la perfeccion excepto esta parte que no entiendo, muchas gracias compañeros !
-
Hola, gracias por tus comentarios, intentamos que los cursos sean amenos y de calidad.
Sobre el ejercicio indicarte en primer lugar que siempre que hagas una consulta de este tipo incluyas el código tanto del archivo html como del archivo css, hasta donde hayas podido llegar. De esa forma nos facilitas el trabajo a quienes revisemos el ejercicio, ya que podremos partir exactamente del mismo código que tienes tú.
Sobre cómo solucionar el ejercicio tienes que tener en cuenta lo siguiente: una frase como "establecer como color de fondo el amarillo (yellow) para los elementos span que se encuentren dentro de elementos h3 que se encuentren dentro de elementos cuyo atributo class sea <<secundario>>" se resuelve de la siguiente manera:
Primero escribimos lo más exterior, en este caso .secundario
Luego añadimos lo que vaya dentro, separado por un espacio. Tendríamos:
.secundario h3
Luego añadimos lo que vaya dentro separado por otro espacio. Tendríamos:
.secundario h3 span
Si hubiera más cosas que añadir las seguiríamos añadiendo hasta que cuando lo tengamos todo escribimos la regla:
.secundario h3 span{background-color:yellow;}
Siguiendo este criterio el ejercicio se podría resolver así (lo he puesto todo en un archivo html como css interno, pero en tu caso te basta copiar el código css y ponerlo en tu archivo css)
<!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">
<style>
.principal h1{color:red;font-size:130%;}
.secundario h3{color:green;font-size:110%;}
.secundario h3 span{background-color:yellow;}
</style>
</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>
Espero que te sirva de ayuda, si no te queda claro vuelve a consultar. Saludos ;)
-
Holaa muchas gracias por la contestacion, estuve mirando la teoria y sigo algo confuso o quizas es que pueda hacerse de las dos maneras no lo se.
DEFINIR SUBESTILOS DENTRO DE UNA CLASE
Podemos definir que determinadas cajas dentro de otra principal tengan estilos diferenciados. Por ejemplo, podemos querer que los párrafos de clase “destacado” tengan fondo naranja, pero que si dentro del párrafo hay un link (etiquetas <a> … </a>) dicho link tenga un estilo específico, por ejemplo que tenga fondo amarillo y un tamaño un 20% superior a lo normal. Para ello escribiríamos:
/* 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%; }
al ver esto en la teoria intente hacerlo similar y de ahi que pusiera el post al no lograr el resultado necesitado
El texto corresponde a los conceptos de herencia en css la entrega nº 13
Una vez mas muchas gracias por tu tiempo y esfuerzo :)
edit: una ultima duda
b) Usando CSS establece como color de texto el rojo (red) y tamaño de fuente el 130% respecto de lo normal para los elementos h1 que se encuentren dentro de un elemento cuyo valor class sea <<principal>>.
aumentar el tamaño de fuente respecto a elementos h1 o h3 o como sea no es simplemente font-size: 130% por ejemplo ya que lo hace respecto al tamaño de letra estandar por lo que veo, como se el tamaño a poner respecto a esto? muchas gracias y perdon por la insistencia jaja :)
-
Hola, tienes razón en que el ejercicio se puede resolver de otra manera. Podrías escribir:
div.principal h1{color:red;font-size:130%;}
div.secundario h3{color:green;font-size:110%;}
div.secundario h3 span{background-color:yellow;}
Lo que es interesante es entender cuál es la diferencia entre una forma y otra. Si usamos .principal h1{color:red;font-size:130%;} significa "cualquier elemento h1 dentro de otro elemento (párrafo, div o lo que sea) cuya clase sea principal, aplicar este estilo.
Si usamos div.principal h1{color:red;font-size:130%;} signfica cualquier elemento h1 dentro de un div cuya clase sea principal, aplicar este estilo.
Es decir, que puedes aplicar una selección como tú desees: o para todos los elementos de una clase, o sólo para ciertas etiquetas que tengan el atributo class especificado.
En este ejercicio ambas formas son válidas (en general siempre hay diferentes maneras de hacer las cosas en programación).
Respecto al tamaño de fuente el ejercicio dice "tamaño de fuente el 130% respecto de lo normal" pero no especifica si lo normal se refiere al tamaño de letra base general o al tamaño de letra propio de las etiquetas como h1, h2, h3, etc. Al no especificar nada, la respuesta se puede considerar correcta.
De todas formas, si quisieras hacerlo el 130% del tamaño inicial del h1, cuando llegues a la entrega CU01044D tendrás la explicación sobre tamaños de letra y etiquetas h, etc. (puedes verlo en http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=749:css-font-size-uso-de-larger-smaller-font-weight-o-negrita-bolder-lighter-font-style-o-cursiva-italic-cu01044d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203)
Saludos
-
Muchisimas gracias ya lo entendi, en el ejemplo no lo vi claro ya que tanto poner uno u otro es el mismo resultado, pero en el caso que tuvieramos la clase class definida en mas tags seria la manera de filtrar el codigo css para que solo apuntara al propio div
Una vez mas muchas gracias y gran pagina saludos! :)