Elemento Padre

jasamestica · #1 (**permalink**) 18/08/2009, 11:27

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:


El tamaño del texto es de 1em

El tamaño del texto es de 2em

Cual es el tamaño de mi fuente

visitante28 · #2 (**permalink**) 18/08/2009, 11:51

Cita:

Iniciado por jasamestica

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:


El tamaño del texto es de 1em

El tamaño del texto es de 2em

Cual es el tamaño de mi fuente

yo veo que tienes el mismo font-size para los dos estilos.

kseso? · #3 (**permalink**) 18/08/2009, 11:53

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>kseso? jugando con css</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; outline: none; position: relative;}
html, body {
background-color: #cdcdcd;
}
body{font-size:1em;}
p {font-size: 1em; }
p span {font-size:2em; display:block;}
p span span {font-size:2em;}
</style>
</head>
<body>
<p>el primer párrafo
<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>
</p>  
</body>
</html>

goyo_ · #4 (**permalink**) 18/08/2009, 13:40

Cita:

Iniciado por jasamestica

este es el CSS:

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

este es el html:


El tamaño del texto es de 1em

El tamaño del texto es de 2em

Cual es el tamaño de mi fuente

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>

kseso? · #5 (**permalink**) 18/08/2009, 13:50

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

goyo_ · #6 (**permalink**) 18/08/2009, 14:09

Cita:

Iniciado por kseso?

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?

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>

kseso? · #7 (**permalink**) 18/08/2009, 14:36

Cita:

Iniciado por goyo_

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

goyo_ · #8 (**permalink**) 18/08/2009, 14:57

Cita:

Iniciado por kseso?

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

kseso? · #9 (**permalink**) 18/08/2009, 15:16

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.

jasamestica · #10 (**permalink**) 18/08/2009, 17:58

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

jomaruro · #11 (**permalink**) 19/08/2009, 14:53

Hola:

Cita:

Iniciado por goyo_

Me parece mala practica nestiar un span dentro de un span dentro de un span.

¿nestiar? ¿que significa nestiar?

Saludos.