Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Quiz: Responsive Design

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Medidas EM

34/55
Recursos

Aportes 136

Preguntas 23

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

EM = es un acronimo de elemento y lo que hace es tomar el tama帽o de fuente que tenga el padre directo ejemplo:

.container {
   font-size: 20px
   }

.container div {
    font-size: 2em
   }

aqui los el tama帽o del div que esta dentro de la clase container tenda un tama帽o de 40px, ya que
.
1em = 20px
.
y como estamos asignandole 2 em seria como 20px + 20px
.
y si por ejemplo tenemos el siguiente caso :

.container {
   font-size: 20px
   }

.container div {
    font-size: 2em
   }

.container div p {
   font-size: 1.5em
   }

a continuacion veremos que la etiqueta p tendra un tama帽o de fuente de 60px
ya que toma como referencia el tama帽o de su padre ( 40px ) y haria la siguiente operacion 40*1.5 que es igual a 60, es por eso que la etiqueta p tomo el valor de 60px

Unidades absolutas
Generalmente se usa el pixel 鈥減x鈥.

h1{
	width: 500px;
}

El problema de usar medidas absolutas es que pueden ser desproporcionadas para distintos tipos de dispositivos.
Unidades Relativas
*
Porcentaje

/*Ocupar谩 todo el ancho de la pantalla sin importar el tama帽o*/
h1{
	width: 100%;
}

em
Depende exclusivamente del cuerpo tipogr谩fico. Es decir del font-size de la etiqueta de su elemento padre.

body{
	font-size: 20px;
}
h1{
	font-size: 2em; /*  2 x 20 = 40px */		
}

Lo bueno de esta unidad es que si en un futuro modificamos el valor del font-size, entonces sus otros valores se ajustar谩n como podr铆a pasar en el siguiente ejemplo de c贸digo.

p {
	font-size: 24px;
	margin-top: 1em; /* 1 x 24 = 24px */
	margin-bottom: 1em; /* 1 x 24 = 24 px*/ 
}

Lo malo, es que si lo usamos como el profesor plante贸 como un problema al usar em, podr铆amos perder la cuenta de c贸mo calcular el em si es que tenemos muchos elementos anidados (un elemento dentro de otro) ya que depende de su padre directo.

Si te gust贸 mi resumen dale me gusta y comenta, as铆 me motivo a hacer m谩s res煤menes 鉁

Sigamos aprendiendo juntos 馃挭

Los navegadores tienen por defecto 16px de font-size en el html

Una utilidad que se le suele dar a em (Cuando la aplicas bien) es la de escalar una p谩gina web, es decir, simplemente cambiando el tama帽o de fuente de un padre general, puedes escalar todo un sitio web con base en dicha medida y cambiando solo un valor ^^

Justo como lo explic贸 Diego, las diferencias de cada uno, ac谩 les dejo esta imagen y que la veremos tambi茅n en la siguiente clase:

em: va a tomar el tama帽o de fuente que tenga el padre directo, o en su defecto, a su ancestro m谩s pr贸ximo que tenga un tama帽o declarado.

Este video tambi茅n tiene una explicaci贸n excelente de estas 2 unidades de medidas 鈥渆m鈥 y 鈥渞em鈥. Recomiendo verlo como un complemento de estas clases: https://www.youtube.com/watch?v=nz6DIeBdZtY&ab_channel=FalconMasters

em = unidad de medida que toma valor por el elemento padre o mas cercano,
Ejemplo:

<div> <!-- font-size: 16px -->
        <p> <!-- font-size: .5em; valor 8px r=16/2 -->
          	<p> <!-- font-size: 2em; valor 16px  r= 8*2 -->
          	</p>
        </p>
</div>

Si quieres que un elemento tenga 200 p铆xeles y el tama帽o de la fuente en su contenedor es de 16 p铆xeles, en em tendr铆as que darle el valor 200 / 16 = 12.5em

As铆 acabe despu茅s de esta clase 鈥> 馃樀鈥嶐煉煠

creo que si se puede usar EM, pero hay que tener cierto nivel de habilidad respecto a la aplicaci贸n de la medida. para no tener conflictos con etiquetas superiores. es cuesti贸n de gustos y de como se sienta cada desarrollador al trabajar.

Mi aporte:

Resumen del capitulo en Notion
https://n9.cl/vmiv

En CSS, la unidad de medida 鈥榚m鈥 hace referencia al tama帽o en puntos de la letra que se est谩 utilizando. Por ejemplo, si se utiliza una tipograf铆a de 12 puntos, 1em es equivalente a 12 puntos.

La unidad em se utiliza para hacer referencia al tama帽o actual de la fuente que ha sido establecido en el navegador, que habitualmente es un valor aproximado de 16px. Normalmente est谩 establecido en la etiqueta <body>, as铆 se aplica a todo el documento en general, otra forma de establecer valores generales es con la pseudoclase :root.
De esta forma, una cantidad de 1em ser铆a este tama帽o establecido por el usuario, mientras que una cantidad de 2em ser铆a justo el doble y una cantidad de 0.5em ser铆a justo la mitad.

Con 1ex establecemos la mitad del tama帽o de la fuente, ya que 1ex = 0.5em. Realmente, la medida ex est谩 basada en la altura de la x min煤scula.

Si quieres tener la vista del Dev tools que tiene el profe, haz click en 鈥淪how computed styles sidebar鈥.

Medida EM: Em es un acr贸nimo de elemento y lo que hace es que toma el tama帽o de fuente de su padre directo. Si un parrafo est谩 encerrado en un div que tiene un tama帽o fuente de 16px, entonces:

  • 1em 鈫 16px

  • 2em 鈫 32px

  • 1.5em 鈫 24px

Si usamos em en la propiedad width, por ejemplo:

body
{
    background-color: blueviolet;
    font-size: 16px;
}
.text-container
{
    background-color: aqua;
    width: 18.75em;
}

Calcular谩 el ancho tomando como referencia el tama帽o de la fuente(font-size: 16px) de su padre.
Dando como resultado un valor de 300px (16*18.75)

Creo que el profesor cometi贸 un error. En otro curso me explicaron que em toma la medida del elemento con medida absoluta m谩s cercano no de su padre directo como dice el profesor y rem es al contrario la toma del elemento con medida absoluta m谩s lejano. igual se entiende el funcionamiento pero creo que ser铆a bueno aclarar este punto. corrija me si me equivoqu茅.

Clase 34 - Medidas EM


驴C贸mo funciona la medida em en CSS?

  • Con esta medida podemos hacer que un elemento tenga como medida la de su padre directo:
  • Ejemplo:
  • HTML:
<main class="text-container">
        <p>Soy un texto ejemplo</p>
        <div>
            <p>Soy otro texto ejemplo</p>
        </div>
</main>

  • CSS
.text-container{
    font-size: 1.5em;
}

.text-container div
{
    font-size: 1.5em;
}

  • C贸mo sabemos todos los elementos HTML toman como su padre directo el elemento <html> el cual por estilos del navegador tiene un font-size de 16px. En este ejemplo vemos que tenemos tenemos un contenedor <main> el cual tiene una clase 鈥渢ext-container鈥 y en el CSS le estamos diciendo que el font-size sea de 1.5em. Entonces lo que pasar谩 es que el contendor <main> tomar谩 por herencia el tama帽o de 16px qu茅 tiene de su padre directo <html> y lo multiplicar谩 por 1.5 que tiene de su propio font-size, d谩ndonos un resultado de 24px como su font-size. Este ser谩 el valor que tendr谩 como font-size el primer elemento <p>.
    Con el contenedor <div> pasa m谩s o menos parecido, pero en este caso el padre directo del elemento <div> no es <html> sino <main>. Debido a este cambio de padres directos lo que pasar谩 es que el elemento <div> toma como referencia el valor del elemento <main>, el cual en este momento es de 24px y nuevamente se multiplicar谩 por 1.5 que tiene como font-size el elemento <div>, d谩ndonos como resultado que el elemento <p> tendr谩 un font-size de 36px.

驴Es buena pr谩ctica usar la medida em?

  • La verdad es que no, ya que se puede volver engorroso la asignaci贸n de medidas a elementos debido a la herencia de sus padres directos.

Em significa element, est谩 medida toma la medida de su padre, por ejemplo 1em as铆 no m谩s ser铆an 16px que es la medida del html pero si a una etiqueta contenedora le damos una medida, a la etiqueta que est谩 adentro de esa contenedora al usarse em, em ya va a valer lo que se especifico en la medida de la etiqueta contenedora y no la medida del html.

Em es un acr贸nimo de elemento, lo que hace em va a tomar el tama帽o de fuente que tenga el padre directo, quiere decir en este caso a nosotros a main no le hemos puesto ning煤n tama帽o de fuente, esta tomando el tama帽o de fuente que tenga el html, si yo le pongo un tama帽o de fuente a main por ejemplo de 6px, de ah铆 va a empezar a tomarlo y 1 em van a ser estos 16px.

En CSS, las unidades em son un m煤ltiplo del tama帽o de fuente del elemento.

Por ejemplo, si para un selector CSS hemos especificado un font-size de 16px, entonces 1em = 16px:

鉁 sigamos aprendiendo juntos!

Con lo visto en este curso de la parte de medidas, investigue mas e hice una entrada en mi blog explicandolo detalladamente: https://www.comsoft-mexico.com/blog/unidades-de-medida-para-el-desarrollo-web/

EM Calculator Es una herramienta que nos permite convertir el tama帽o de unidades de pixeles a unidades em relativas 馃槃

Lo bueno de aprender en platzi son los comentarios.
Las clases son muy buenas pero con los comentarios entender la clase es mas f谩cil.

Este tema si esta enredado.

Nota: em podr铆a ser un problema si no se tiene cuidado de donde se mandan a llamar las dimensiones. em no es una de las mejores medidas.

  • em=Tama帽o de letra del elemento padre

  • rem =Tama帽o de letra elemento ra铆z

em se trata de una medida que toma como referencia la medida del contenedor padre
.
Veamos el siguiente c贸digo:
.
En html

<body>
    <main>
        <div>
            <p>Este es un p谩rrafo</p>
        </div>        
        <section class="main-section">
            <p>Este es otro p谩rrafo</p>
        </section>
    </main>
</body>

En CSS

p {
    font-size: 1em;
}

Por defecto, html tiene como font-size: 16px. Por tanto, 1em es igual a 16px que es el padre de todas las l铆neas de c贸digo antes de aplicar ninguna modificaci贸n a los estilos por defecto.
.
Ahora vamos a aplicar un font-size diferente a la clase 鈥渕ain-section鈥 dentro de la etiqueta section

.main-section {
    font-size: 20px;
}

Ahora tenemos dos font-size diferentes. Para todo el c贸digo fuera del section el font-size padre ser谩 16px. Mientras que para el c贸digo dentro de section el font-size padre ser谩 20px.
.
Si en CSS duplicamos valores:

p {
    font-size: 2em;
}

Para todo el c贸digo fuera de section 2em ser谩 igual a 32px porque el font-size padre es de 16px. Mientras que para el c贸digo dentro de main.section, 2em ser谩 igual a 40x porque el font-size padre de esa secci贸n es 20px.

Em no toma como referencia al padre, sino el tama帽o de fuente del elemento mismo.
Lo que pasa es que se genera una confusi贸n debido a que si no se establece la propidead font-size antes de usar em, el elemento hereda el tama帽o de del padre.
Esto se puede comprobar si cambias la propiedad font-size antes de usar em, por ejemplo:

.container{
	font-size:10px;	
	border:  .1em solid black;
}

El valor en del borde equivalente en px es 1, porque el tama帽o de la fuente no se hereda del padre, debido a que 茅ste se cambi贸 en la propiedad font-size.

Medidas absolutas:
MM = mil铆metros

CM = cent铆metros

IN = pulgada

PC = picas

PX = pixel

Medidas relativas:
%

EM

REM

34.-Medidas EM

em es un acr贸nimo de elemento y lo que hace es tomar el tama帽o de fuente que tenga el padre directo. Es decir, 1em= 16 pixeles que vienen por defecto en HTML. Y, si cambio el tama帽o de main se modifica el valor de em. Pj. font-size: 20px har谩 que 1em=20px porque toma el tama帽o del padre directo.

Hay que tener cuidado donde utilizamos em por lo que no es de las mejores medidas.

em

Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

https://developer.mozilla.org/en-US/docs/Web/CSS/length

*Recuerda que em toma el tama帽o de su elemento padre directo, rem toma su tama帽o de la ra铆z de todo, el html.

Notas de la clase

un muy excelente video


/*Medida EM 

	toma el tama帽o de la fuente del padre mas cercano, por ejemplo si el padre
	tiene el tama帽o de fuente de 16px entonces 1em seria igual a 16px

*/

.text-container{
	font-size: 20px; /*medida en pixeles */
}

p{
	font-size: 2em; /*1em = 20px*/
}

.text-container div{
	font-size: 16px; /*medida en pixeles*/
}

div p{
	font-size: 1.5em; /*1em = 16px */
}

MEDIDAS EM

  • Depende de quien hereda ese tama帽o, es decir, el valor de 鈥渆m(elemento)鈥 va a estar condicionado por el valor asignado en su elemento padre.
.text-container{
		font-size: 1em;
}
  • Por ejemplo si tenemos que un contenedor de texto tiene 20 pixeles como tama帽o original, el texto que se encuentre dentro de ese contenedor va a estar referenciado por ese tama帽o.
  • Por consecuencia si nosotros le decimos al texto que esta dentro de ese contenedor que es tenga 1em, eso quiere decir que tendr谩 el valor de su padre, y como su padre tiene 20 pixeles, 1 em = 20px
.text-container{
	font-size: 20px;
}
p{
	font-size: 1em; /*  1 x 20 = 40px */		
}

Queda claro el concepto Em.

Unidades relativas a la tipograf铆a
em: unidad relativa al tama帽o de texto definido en un determinado contexto. El em es una unidad que proviene del dise帽o tipogr谩fico y equivale al espacio que ocupa el ancho de una letra M (鈥渕鈥 may煤scula) de un determinado cuerpo y alfabeto. El em hace referencia al tama帽o de letra que se est谩 usando.

Cuando se utiliza la unidad em, es imprescindible conocer el valor de referencia, de lo contrario saber que un texto tiene 1em 贸 5em no nos dice realmente el tama帽o de la letra.

Cuando se asigna una medida en ems, su referencia es el tama帽o de letra del primer elemento contenedor que tenga establecido un tama帽o de letra.

Px: Unidad canonica de una imagen
1Em: Es el tama帽o de su padre directo
Rem: Sirve mucho para entornos escalables y responsivos

Muy sencillo de entender las medidas relativas , este tipo de temas son faciles de digerir si ya traes una base de logica matematica

Medida em en css

nota: em es un acronimo de 鈥渆lemento鈥 y lo que hace es tomar el tama帽o fuente que tenga el padre directo.

Aqui el tama帽o del div que est谩 dentro de la clase container tendr谩 un tama帽o de 40px ya que 1em=20px como estamos declarando en el ejemplo:

.container {
    font-size: 20px;
}
/* Este es el padre, que le asignamos un font-size de 20px */
.container div {
    font-size: 2em;
}
/*Aqu铆 2em significa que tiene 40px, tomando su padre .container que tiene 20px */

Y si tendemos el siguiente caso:

.container {
    font-size: 20px;
}
/* Padre de .container div */
.container div {
    font-size: 2em; /* 1em=20px entonces 2em=40px. Heredado de .container */
}
/* padre de container div p */
.container div p {
    font-size: 1.5em; /* 60px */
}
/* .container div p tendr谩 un tama帽o de fuente de 60 ya que toma como referencia su padre directo que es ".container div" y NO ".container" */

"em"
Es una medida que se basa en el tama帽o de la fuente actual. Si se establece el tama帽o de fuente de un elemento en 1em, significa que el tama帽o de fuente ser谩 igual al tama帽o de fuente del elemento padre.

La ventaja de utilizar 鈥渆m鈥 es que son m谩s adaptables a diferentes tama帽os de pantalla y dispositivos. Los usuarios pueden cambiar el tama帽o de fuente de su navegador y la p谩gina web a煤n se ver谩 bien.

.

El tener medidas variables para cada elemento usando em es muy malo luego si se quiere hacer cambios al estilo del proyecto, por eso es mejor tener una fuente ra铆z para poder trabajar sin problema alguno. Rem es la voz 馃榿

notese que, para el ejemplo de los DIV anidados, ya no uso los 20px en el body, si no, se verian mas grandes, pero el hecho es el mismo, se multiplicaria una y otra vez por 1.5 en anterior dato que tiene el hemano mas cercano.

Bueno de esta clase, no me quedo del todo clara profe, quede volando.

Jugando un poco con el c贸digo y aprovechando ese comportamiento anidado, les dejo una semilla visual para que prueben el resultado鈥

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <div>
        <p>Esto es un texto</p>
        <div>
          <p>Esto es un texto</p>
          <div>
            <p>Esto es un texto</p>
            <div>
              <p>Esto es un texto</p>
              <div>
                <p>Esto es un texto</p>
                <div>
                  <p>Esto es un texto</p>
                  <div>
                    <p>Esto es un texto</p>
                    <div>
                      <p>Esto es un texto</p>
                      <div>
                        <p>Esto es un texto</p>
                        <div>
                          <p>Esto es un texto</p>
                          <div>
                            <p>Esto es un texto</p>
                            <div>
                              <p>Esto es un texto</p>
                              <div>
                                <p>Esto es un texto</p>
                                <div>
                                  <p>Esto es un texto</p>
                                  <div>
                                    <p>Esto es un texto</p>
                                    <div>
                                      <p>Esto es un texto</p>
                                      <div>
                                        <p>Esto es un texto</p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

y ahora el style.css

* {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: yellow;
  font-family: 'Courier New', Courier, monospace;
}

main {
  font-size: 0.8em;
}

main div {
  font-size: 1.1em;
  line-height: 0.4em;
  letter-spacing: 1.01em;
  color: blueviolet;

  text-shadow: red 2px 2px 0px;
}

Al heredar las medidas, no es tan recomendable usar esta medida en su lugar es mejor usar REM

em va a tomar la medida del padre directo

em (elemento) toma el tama帽o de fuente del elemento o el HTML (16px) si pongo 1.5em nos da 24px ya que 1em = 16px

me cost贸 entender bien esto de la em hasta que vi algo curioso que lo lleve a reflejo de lo que conozco despu茅s de verlo como 6 veces, es una lupa, o mejor reflejado, un lente fotogr谩fico, es decir, 16x1em, es 16 no hay zoom, si aumentamos la em a 1.5, aumenta el zoom de la lupa, y si hacemos como en el ejercicio que se presenta, se sobre entiende que hace un aumento del aumento, me cost贸 comprenderlo hasta que vi mi c谩mara y record茅 que hay lentes que tienen ese zoom.

(

Ya entiendo por qu茅 puede llegar a ser algo confunso el uso del EM pero esto solo sucede cuando son etiquetas anidadas unas dentro de otras

La unidad em siempre depende de su elemento padre es relativa al tama帽o de texto definido en un determinado contexto cambia a los elementos hijos de acuerdo con el tama帽o de fuente
(font-size) del elemento padre

hay que fijarse bien al padre antes de poner la etiqueta em y rem

El font-size por defecto de html es 16px.

EM es = a la medida de su papa (en este caso el padre de main es html)
si le damos 8px a HTML 鈥> MAIN tomara 1 em como 8px鈥> luego div tomara el resultado de MAIN (si le damos 1.5em = 8x1.5 = 12px) 鈥> si le damos 2em a div seran 24px ya que toma la medida del papa y la multiplica x2.
y asi sucesivamente鈥

html {
    font-size: 8px;
}
.text-container {
    font-size: 1.5em;
}

.text-container div {
    font-size: 2em;
}

Medida EM

La medida EM toma el tama帽o de fuente que tiene el padre directo del elemento al que le estamos colocando dicha medida, y calcula la proporci贸n que le estamos indicando.

NOTA: Tama帽o por defecto en un navegador [etiqueta <html> : 16px]


EJEMPLO
En este ejemplo el elemento main tiene un tama帽o de fuente por defecto de 16px, dentro de este hay un elemento hijo que en este ejemplo ser谩 <p> el cual tendr谩 un tama帽o de 1.5em , lo que significa que <p> tomar谩 el tama帽o del elemento padre que en este caso es <main> y lo va a aumentar 1.5 veces, por lo que al multiplicar los 16px que tiene <main> por los 1.5 que indicamos con la medida em nos da como resultado un font-size de 24px, el cu谩l ser谩 el tama帽o que tendr谩 en este caso nuestra etiqueta <p>

main {
	font-size: 16px;
}

p {
	font-size: 1.5em;  /* 16px * 1.5 = 24px */

鈿狅笍 Sin embargo hay un problema con esta medida, y es que si no tenemos cuidado de cuantos elementos padres con un Font-size indicado hay por arriba del al que le indicamos la medida EM podemos empezar a tener texto con medidas muy diferentes a las que buscamos, ya que como comentamos en llenas anteriores, el em asigna como medida la proporci贸n indicada con relaci贸n a los elementos padres pudiendo tener el problema de que estos por una mala organizaci贸n se vayan anidando uno con otro conforme m谩s elementos padres vamos tendiendo en nuestro proyecto).

EM: Toma el tama帽o de fuente del Padre.

.text-container{
    font-size: 1.5em;
    /* em agarra el tama帽o de fuente del contenedor padre directo, en este caso el tag html que es de 16px y se le agrega 0.5 el valor del mismo, siendo que, 16px * 1.5 = 24px */
}

/* 1 em = pixeles originales o predeterminados del contenedor padre directo

Por ejemplo: en body se tiene un font-size de 20px, pero al momento de asigna un font-size en el contenedor main de 1.5em, este valor ser谩 de 30px
*/

.text-container div{
    font-size: 1.5em;
    /* Esto genera un problema de fuente en contenedores anidados al obtener el elemento font-size del contenedor padre haciendo que la fuente se vuelva m谩s y m谩s grande */
}

Yo antes cre铆a que la medida EM era porque se refer铆a al tama帽o de la letra M.

1em = 16px

RESUMEN CLASE 34:
MEDIDAS EM

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medidas EM</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <main class="text-container">
        <p>Soy un texto ejemplo</p>
        <div>
            <p>Soy otro texto ejemplo</p>
            <div>
                <p>Soy otro texto ejemplo</p>
                <div>
                    <p>Soy otro texto ejemplo</p>
                    <div>
                        <p>Soy otro texto ejemplo</p>
                    </div>
                </div>
            </div>
        </div>

    </main>
</body>

</html>

CSS

.text-container {
    font-size: 1.5em;
}
.text-container div {
    font-size: 1.5em;
}

EM puede ser un dolor de cabeza

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • em es un acr贸nimo de elemento y toma el tama帽o de la fuente que tiene el padre directo

  • Es importante saber usar em y no es tan bueno usarlo como medida

https://type-scale.com/ Les comparto este recurso que nos permite ayudar a definir la escala de nuestra font en sus distintos niveles (de h1 a h6) ya sea en px o en em. 隆Saludos!

y ahora??.. en que momento pongo en practica todo esto 鈥 ay ay ay

Oh que interesante

Medidas EM

.text-container {
    font-size: 1.5em;
}

em toma el tama帽o de fuente que tenga el padre directo. Como no tiene, toma la del html. Aqu铆 hace un c谩lculo, el tama帽o de fuente de html (16px) por 1.5, que nos da 24px.

body {
    font-size: 20px;
}

Si agregamos un tama帽o de fuente al body, ahora nuestro valor anterior tomar谩 茅ste como referencia, ya que su padre m谩s cercano.

Pero ojo: Aplicar medidas em puede ocasionarnos problemas. Los valores se acumulan por lo que una de nuestras etiquetas contenidas puede salir del tama帽o esperado.

div {
    font-size: 1.5em;
}

El valor de este div tendr谩 el tama帽o aumentado del padre directo, que tambi茅n est谩 aumentado.

Es por esto que em no es el mejor sistema de medida.

Hola. Les comparto este repositorio que sirve de gu铆a para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificaci贸n y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 馃槃.
Platzi-Test

El EM me recuerda a la escala de fuente de algunos Editores de texto.

unidad em : es una unidad de medida relativa que depende del tama帽o de letra asignado al contenedor padre mas cercano. la unidad se llama em (pronunciacion de la m en ingles) porque en imprenta se usa la letra m como referencia ya que es el caracter mas ancho que existe por lo tanto el tama帽o de la letra m se usa para calcular el tama帽o del resto de letras.
.
.
1em = valor del atributo font-size del contenedor padre mas cercano, osea, si el contenedor <body> tiene el atributo font-size = 10px, entonces, todos los atributos del elemento hijo ya sea padding, margin, etc, donde se asigne 2em tendran un tama帽o de 20px, osea, se multiplica el valor de em por el valor que se ponga al font-size del contenedor padre mas cercano. si el contenedor padre no tiene el atributo font-size, entonces, em toma como referencia 16px que es el tama帽o de la letra m que tiene la raiz del documento html

EM NO ES DE LAS MEJORES MEDIDAS

DIFERENCIAS DE LAS MEDIDAS EM Y REM:

La unidad em tiene como referencia de medida el font-size del elemento actual.
La unidad rem tiene como referencia de medida el font-size del elemento root, la etiqueta <html> (en ingl茅s ser铆a como 鈥渞oot em鈥).

Ahora en detalle: Ya sabes que em y rem son dos unidades de CSS relativas. En concreto son relativas al font-size existente. Sin embargo, mientras que em tiene referencia el tama帽o de la fuente del elemento donde se usa esa unidad, rem tiene referencia al tama帽o de la fuente definido en el elemento root.

Mis notas de clase: Puedes verlo en ejecic贸n desde aqu铆

HTML

<section id="em-size" class="text-container">
	<h2>Medidas EM</h2>
	<p>Soy un texto de ejemplo por fuerita de un div, solo dentro de un section</p>
	<div>
		<p>Como parrafo dentro de un div cambio en comparaci贸n al otro parrafo!</p>
		<div>
			<p>Souy un parrafo dentro de otro div, con tama帽os de locura!</p>
		</div>
	</div>
</section>


CSS

body {
	font-size: 20px;
}

.text-container {
	font-size: 1.5em;
	/* 1em es el 100% del tama帽o de fuente del elemento padre, para este caso, quien determina el tama帽o es la etiqueta body, ya que en la rama de .text-container ningun otro elemento ha determinado un tama帽o distinto*/
}

.text-container div {
	font-size: 1.5em;
	/* hace doble heredado por lo siguiente:
	1 .text-container tiene un font-size de 1.5em (1.5em de body es igual a 30px)
	2 div tiene un font-size de 30px (herdado de .text-container) y este determina el tama帽o base para tomar un nuevo font-size. Aqui el font-size es 1.5em de 30px 贸 45px
*/
}

隆HEEEEEYYYY! Si no quieren estar haciendo siempre la conversi贸n de px a rem, existe una extensi贸n para ello en VS Code llamada "px to rem"
Una vez la tengamos instalada, lo 煤nico que tenemos que hacer es dar 鈥渁lt izq + z鈥 y autom谩ticamente nos har谩 la conversi贸n.
La pueden descargar aqu铆

Espero les sirva 馃榿

Forma Grafica EM vs REM


Excelente

Excelente

.text-container {
  font-size: 1.5em;
}
.text-container div {
  font-size: 1.5em;
}

em

Hereda el tama帽o de su elemento padre directo.

<style>
      
        /*** em: hereda el tama帽o de su elemento padre ***/
    
        .text-container {
            font-size: 1.5em;

        }
        .text-container div {
            font-size: 1.5em;

        }
    </style>
</head>
<body>
    <main class="text-container">
        <p>Soy un texto ejemplo</p>
        <div>
            <p>Soy un texto ejemplo dos</p>
        </div>
    </main>
</body>

Si mal no recuerdo es bueno utilizar unidades relativas, ya que al pasar a ver esta pagina en un movil no afecte y se mantenga

En el CSS les dejo esta explicaci贸n, del mismo c贸digo de ejemplo.

body{
    font-size: 20px;
}

.text-container{
    font-size:1.5em;
}

.text-container div{
    font-size: 1.5em;
}

Como body tiene 20px de tama帽o de fuente, el .text-container equivale a (1.520)px = 30px.
Ahora .text-container div, toma como 1em=30px, porque esa es la medida de su padre directo. Entonces el tama帽o del texto dentro del div equivale a (1.5
30)px=45px

El plug-in que est谩 usando se llama Alfred, Y no hay para Linux 馃槮

/* Agrandando el tama帽o del texto con em, lo que hace es que toma el tama帽o de fuente que tenga el padre directo, es decir esta tomando
el tama帽o de fuente del html en este caso
donde 1em corresponder铆a a 1em toma la medida del padre como tal
Para este caso el 1.5 corresponde a 24px, ya que seria 1.5em * 16px(valor del html) =24px /
/
body{
font-size: 20px;
} /
/
.text-container {
font-size: 1.5em;
} */

.text-container {
font-size: 1.5em;
}
/* para este caso el em del div va a tomar es el del texto de arriba, es decir 1.5em * 24px = 36px */
.text-container div{
font-size: 1.5em;
}

body {
    font-size: 20px;
}

.text-container {
    font-size: 1em; /* em toma el tama帽o de fuente que tiene el padre y lo multiplica por el valor que le demos */
}

/* em no se considera de las mejores medidas para utilizar ya que en proyectos grandes puede generar confucion y resultados no deseados.

ya que si el padre de una etiqueta que declaramos con em tambi茅n tiene un em CSS no tomara en cuenta el valor del padre del primer em sino el valor del em y con base a este se realizara la multiplicaci贸n, con grandes cantidades de codigo esto puede generar confucion y muchos resultados no deseado, por lo que se recomienda usar rem. */

em: "elemento": toma el tama帽o de la fuente de su padre directo.

Gracias al profe entendi em, pero siento que es inventar la rueda. Realizar recalculos porque si y que dependa de un padre, cuando hagas anidacion de dependencias puede ser un total dolor de cabeza y en una pagina muy grande o extensa podrias hacer un codigo poco legible o entendible sobretodo. Siento que fue inventado para hacer las cosas mas complejas.

EM toma como referencia la medida del padre directo para hacer la conversi贸n

Muy buena forma de explicarlo, puede llegar a ser algo complicado de usar esta medida relativa, pero ahora se como funciona

Por fin pude entender bien acerca del EM excelente clase