Foros del Web » Creando para Internet » CSS »

Elemento Padre

Estas en el tema de Elemento Padre en el foro de CSS en Foros del Web. Hola, porque el tercer parrafo(class="parrafoanidado") no toma como referencia de tamaño de fuente a su elemento padre(class="fuente2"). mi otra pregunta es que si un elemento, ...
  #1 (permalink)  
Antiguo 18/08/2009, 11:27
 
Fecha de Ingreso: marzo-2006
Mensajes: 329
Antigüedad: 18 años
Puntos: 1
Elemento Padre

Hola, porque el tercer parrafo(class="parrafoanidado") no toma como referencia de tamaño de fuente a su elemento padre(class="fuente2").

mi otra pregunta es que si un elemento, por ejemplo un parrafo no tiene un elemento padre del que tomar referencia para sus valores de tamaño de fuente en em ¿sigue subiendo hasta encontrar uno que si lo tenga?, espero que mis preguntas hayan sido claras, gracias.

este es el CSS:

body{font-size:1em;}
p.fuente2{font-size:2em;}
p.parrafoanidado{font-size:2em;}

este es el html:

<p>
El tamaño del texto es de 1em
<p class="fuente2">
El tamaño del texto es de 2em
<p class="parrafoanidado">
Cual es el tamaño de mi fuente
</p>
</p>
</p>
  #2 (permalink)  
Antiguo 18/08/2009, 11:51
Avatar de visitante28  
Fecha de Ingreso: julio-2009
Ubicación: Black Stone City
Mensajes: 128
Antigüedad: 14 años, 8 meses
Puntos: 1
Respuesta: Elemento Padre

Cita:
Iniciado por jasamestica Ver Mensaje
Hola, porque el tercer parrafo(class="parrafoanidado") no toma como referencia de tamaño de fuente a su elemento padre(class="fuente2").


body{font-size:1em;}
p.fuente2{font-size:2em;}
p.parrafoanidado{font-size:2em;}

este es el html:

<p>
El tamaño del texto es de 1em
<p class="fuente2">
El tamaño del texto es de 2em
<p class="parrafoanidado">
Cual es el tamaño de mi fuente
</p>
</p>
</p>
yo veo que tienes el mismo font-size para los dos estilos.
  #3 (permalink)  
Antiguo 18/08/2009, 11:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Elemento Padre

Hola Jasamestica
1º) El padre de todos los párrafos es "body". Los tres párrafos son hermanos.

2º) Efectivamente, la propiedad "font-size", así que si sólo declarases "html {font-size: 1em} ese valor afectaría al contenido de tu página.

P.D.: para que tu texto "cuál es el tamaño de mi fuente" fuese distinto a su párrafo precedente, podrías utilizar algún selector de hijo adyacente.

Pero ahora que me fijo, no puedes colocar un párrafo dentro de otro párrafo. Es un error y el navegador cerrará el primero de forma automática antes de abrir el segundo párrafo.

Para hacer eso y que el tamaño varíe teniendo como base el primer "p", mejor usar la etiqueta span.

Una forma de simular párrafos con texto creciente:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>kseso? jugando con css</title>
  4. <style type="text/css">
  5. * {margin: 0; padding: 0; border: 0; outline: none; position: relative;}
  6. html, body {
  7. background-color: #cdcdcd;
  8. }
  9. body{font-size:1em;}
  10. p {font-size: 1em; }
  11. p span {font-size:2em; display:block;}
  12. p span span {font-size:2em;}
  13. </head>
  14. <p>el primer párrafo
  15. <span>el segundo "párrafo" simulado
  16. <span>el tercer "párrafo" aparente
  17. <span>y un cuarto ¿párrafo?
  18. <span>y un quinto
  19. </span></span></span></span>
  20. </p>  
  21. </body>
  22. </html>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 18/08/2009 a las 12:20
  #4 (permalink)  
Antiguo 18/08/2009, 13:40
Avatar de goyo_  
Fecha de Ingreso: agosto-2009
Mensajes: 91
Antigüedad: 14 años, 7 meses
Puntos: 1
Respuesta: Elemento Padre

Cita:
Iniciado por jasamestica Ver Mensaje
este es el CSS:

body{font-size:1em;}
p.fuente2{font-size:2em;}
p.parrafoanidado{font-size:2em;}

este es el html:

<p>
El tamaño del texto es de 1em
<p class="fuente2">
El tamaño del texto es de 2em
<p class="parrafoanidado">
Cual es el tamaño de mi fuente
</p>
</p>
</p>
Tu codigo esta repleto de errores y pecados. Estos dos estilos hacen los mismo:
Código:
p.fuente2{font-size:2em;}
p.parrafoanidado{font-size:2em;}
Por lo que puedes combinarlos:
Código:
p.fuente2,
p.parrafoanidado{font-size:2em;}
Segundas, no ocupas especificar que elemento:
Código:
.fuente2,
.parrafoanidado{font-size:2em;}
Terceras, una clase puede ser compartida entre varios elementos, para que crear dos clases que hacen lo mismo?
Código:
.fuente2{font-size:2em;}
El HTML tambien contiene mas errores, pero en fin:
Código:
<style>
p {font-size: 1em;}
.fuente2 {font-size: 2em;}
</style>

<p>
        El tamaño del texto es de 1em
        <span class="fuente2">
                El tamaño del texto es de 2em
                Cual es el tamaño de mi fuente
        </span>
</p>
  #5 (permalink)  
Antiguo 18/08/2009, 13:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Elemento Padre

Hola Goyo.
Esto no sería un error:
Cita:
p.fuente2{font-size:2em;}
p.parrafoanidado{font-size:2em;}
a lo sumo una repetición evitable o una mala práctica. Pero error como tal, creo que no.
Y el error de los párrafos en párrafos ya le fue comentado.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 18/08/2009, 14:09
Avatar de goyo_  
Fecha de Ingreso: agosto-2009
Mensajes: 91
Antigüedad: 14 años, 7 meses
Puntos: 1
Respuesta: Elemento Padre

Cita:
Iniciado por kseso? Ver Mensaje
Hola Goyo.
Esto no sería un error:

a lo sumo una repetición evitable o una mala práctica. Pero error como tal, creo que no.
No error pero si pecado

Cita:
Iniciado por kseso? Ver Mensaje
Y el error de los párrafos en párrafos ya le fue comentado.
Un saludo
Con todo respeto, diste una pesima solucion a "párrafos en párrafos":

Código:
<span>el segundo "párrafo" simulado
<span>el tercer "párrafo" aparente
<span>y un cuarto ¿párrafo?
<span>y un quinto
</span></span></span></span>
El problema es el nesting, cuando deberia ser:

Código:
<span>el segundo "párrafo" simulado</span>
<span>el tercer "párrafo" aparente</span>
<span>y un cuarto ¿párrafo?</span>
<span>y un quinto</span>
  #7 (permalink)  
Antiguo 18/08/2009, 14:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Elemento Padre

Cita:
Iniciado por goyo_ Ver Mensaje
Con todo respeto, diste una pesima solucion a "párrafos en párrafos":
Si tú lo dices, será verdad.
Pero esas cosas se argumentan. Quedamos a la espera de los mismo.

Sobre la corrección que haces al código html, símplemente se mostrarán todos los span con las mismas propiedades, a no ser que optes por el selector de adyacentes que mencioné al inicio o que utilices la pseudo-clase de css3 "nth-child()".
Pero como te has limitado ha emitir un juicio de valor sin nada más, nos quedamos sin aprender de tu solución.

Y hasta donde conozco, el span en span ni es error ni es reprobable, todo depende de lo que se necesite conseguir.
Y mi código de ejemplo era precisamente eso, un ejemplo de cómo conseguir algo con dos declaraciones en el css.

Lo dicho, quedo esperando que me digas los porqués de mi pésima solución y cuál es la que tú propones.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 18/08/2009, 14:57
Avatar de goyo_  
Fecha de Ingreso: agosto-2009
Mensajes: 91
Antigüedad: 14 años, 7 meses
Puntos: 1
Respuesta: Elemento Padre

Cita:
Iniciado por kseso? Ver Mensaje
Si tú lo dices, será verdad.
Pero esas cosas se argumentan. Quedamos a la espera de los mismo.

Sobre la corrección que haces al código html, símplemente se mostrarán todos los span con las mismas propiedades, a no ser que optes por el selector de adyacentes que mencioné al inicio o que utilices la pseudo-clase de css3 "nth-child()".
Pero como te has limitado ha emitir un juicio de valor sin nada más, nos quedamos sin aprender de tu solución.

Y hasta donde conozco, el span en span ni es error ni es reprobable, todo depende de lo que se necesite conseguir.
Y mi código de ejemplo era precisamente eso, un ejemplo de cómo conseguir algo con dos declaraciones en el css.

Lo dicho, quedo esperando que me digas los porqués de mi pésima solución y cuál es la que tú propones.

Un saludo
Me parece mala practica nestiar un span dentro de un span dentro de un span. Ese fue el problema original que introdujo las tablas, del cual aun estamos pagando caro. Que sentido hombre, me sorprende con tan poca critica te pones a llorar, una disculpa senior
  #9 (permalink)  
Antiguo 18/08/2009, 15:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Elemento Padre

No hombre, aquí nadie llora ni ríe. Nos explicamos con el uso del lenguaje escrito.
Pero si tienes la frivolidad de calificar un ejemplo de pésimo, lo mínimo que debes hacer es exponer las razones, y ya como guinda, poner tú uno (ejemplo) que lo sea menos (pésimo).

Y no acabo de ver el nexo entre unos elementos anidados de un ejemplo y "el problema original que introdujo las tablas".

Pero por mi hasta aquí llegó el tema, a no ser que Jasamestica requiera ampliar el tema original.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 18/08/2009, 17:58
 
Fecha de Ingreso: marzo-2006
Mensajes: 329
Antigüedad: 18 años
Puntos: 1
Respuesta: Elemento Padre

gracias kseso y goyo. si van a ayudar pueden criticar pero si luego dan una solucion mucho mejor, gracias a los dos en especial a kseso
  #11 (permalink)  
Antiguo 19/08/2009, 14:53
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Elemento Padre

Hola:

Cita:
Iniciado por goyo_ Ver Mensaje
Me parece mala practica nestiar un span dentro de un span dentro de un span.
¿nestiar? ¿que significa nestiar?

Saludos.

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:00.