« anterior próximo »
Páginas: [1]

Autor Tema: Ejercicio CU01013D# curso CSS desde cero cómo encadenar varios selectores enlace  (Leído 6255 veces)

Xarlie

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
Ejercicio CU01013D# curso CSS desde cero cómo encadenar varios selectores enlace
« 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>>.

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="../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>
Código: [Seleccionar]
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 !
« Última modificación: 12 de Marzo 2022, 13:49 por Ogramar »
En línea

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:Ejercicio cu01013d CSS
« Respuesta #1 en: 16 de Octubre 2014, 09:05 »
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)

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

<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  ;)
En línea

Xarlie

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
Re:Ejercicio CU01013D curso CSS cómo encadenar varios selectores
« Respuesta #2 en: 16 de Octubre 2014, 10:05 »
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 :)
« Última modificación: 16 de Octubre 2014, 10:18 por Xarlie »
En línea

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:Ejercicio CU01013D curso CSS cómo encadenar varios selectores
« Respuesta #3 en: 16 de Octubre 2014, 10:52 »
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
En línea

Xarlie

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
Re:Ejercicio CU01013D curso CSS cómo encadenar varios selectores
« Respuesta #4 en: 16 de Octubre 2014, 11:30 »
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! :)
En línea
Páginas: [1]
« anterior próximo »
 

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