1
00:00:00,620 --> 00:00:07,839
Bueno, pues ahora vamos a ver otras propiedades de las hojas de estilo.

2
00:00:07,940 --> 00:00:12,560
En este caso vamos a ver propiedades que tienen que ver con las fuentes y con las tipografías.

3
00:00:13,419 --> 00:00:18,980
Y vamos a empezar viendo la propiedad font-size, ¿vale?

4
00:00:19,079 --> 00:00:22,600
Que esto ya lo hemos visto varias veces durante lo que llevamos de curso.

5
00:00:23,260 --> 00:00:30,219
Hemos utilizado, pero vamos a explicarlo un poquito más en detalle para que veamos algunas cosas bastante importantes, ¿vale?

6
00:00:30,620 --> 00:00:39,460
Bueno, yo ya me he abierto aquí, como veis, mi navegador, perdón, mi brackets, ¿vale?

7
00:00:39,479 --> 00:00:47,759
Me he creado un archivo que se llama fuentes.html y lo que voy a hacer ahora va a ser crear la estructura básica, como hacemos siempre, ¿vale?

8
00:00:47,859 --> 00:00:51,179
HTML 2.5, tabulador, ¿vale?

9
00:00:51,560 --> 00:00:55,920
Y aquí voy a poner fuentes y tipo gratis, ¿vale?

10
00:00:55,920 --> 00:01:03,219
Voy a ponerlo en castellano y nos vamos a crear una estructura básica de web, ¿vale?

11
00:01:03,240 --> 00:01:09,099
Vamos a empezar con una etiqueta H1 y le vamos a poner fuentes en CSS, ¿vale?

12
00:01:09,920 --> 00:01:16,819
Y debajo vamos a empezar con la propiedad font-size, ¿vale?

13
00:01:17,280 --> 00:01:23,900
Que es la que modifica el tamaño del contenido del texto, ¿vale?

14
00:01:23,900 --> 00:01:29,859
Y bueno, en primer lugar nos vamos a crear un párrafo con un texto, lo de Nipson, ¿vale?

15
00:01:32,040 --> 00:01:35,500
Entonces fijaros, lo que estáis viendo vosotros aquí en pantalla, ¿vale?

16
00:01:35,840 --> 00:01:39,239
Es mi navegador Chrome, ¿vale?

17
00:01:40,420 --> 00:01:44,900
Y aparece en mi página web, ¿vale?

18
00:01:45,319 --> 00:01:49,599
Por defecto, esto tiene un tamaño que está especificado en cada uno de los navegadores, ¿vale?

19
00:01:49,599 --> 00:01:55,180
Si estamos en el Chrome, por ejemplo, para ver esas propiedades, esa configuración,

20
00:01:55,280 --> 00:02:10,430
¿Vale? A ver si lo puedo enseñar. Vamos a ver. Creo que si hago así... No, esto no se está viendo. Un segundito. ¿Vale?

21
00:02:12,150 --> 00:02:24,669
¿Qué voy a hacer con la cosa para que veáis la pantalla completa? Capturar pantalla. Eso. Vale. Vale, creo que ahora mismo estoy viendo la pantalla completa. ¿Vale?

22
00:02:24,669 --> 00:02:46,490
Entonces, aquí sobre mi web, si yo quiero ver solo el tamaño, ¿vale? El tamaño de la fuente, pues nos iríamos aquí a los tres puntos, configuración, ¿vale? Y en la configuración, en la parte de aspecto, veis que aparece aquí tamaño de la fuente, ¿vale? ¿Ok? Incluso tenéis la opción de personalizar fuentes.

23
00:02:46,490 --> 00:02:52,229
Si le dais a personalizar fuentes, veis, cuando pongo el ratón encima, que el tamaño por defecto son 16, ¿vale?

24
00:02:52,710 --> 00:02:59,349
Si yo aumento el tamaño y me voy a mi página, ¿vale? Fijaros que el tamaño también aumenta, ¿vale?

25
00:03:00,289 --> 00:03:06,389
Si yo lo disminuyo, lo pongo por defecto que son 16, el tamaño disminuye, ¿vale?

26
00:03:06,930 --> 00:03:12,330
Ahora, ¿qué era lo que yo quería explicar o qué es lo que quiero explicar con esto? Pues vamos a fijarnos, ¿vale?

27
00:03:12,330 --> 00:03:16,449
vamos a coger ahora

28
00:03:16,449 --> 00:03:18,550
y dentro del head

29
00:03:18,550 --> 00:03:20,509
vamos a poner nuestras hojas de estilo

30
00:03:20,509 --> 00:03:21,629
como hacemos siempre, ¿vale?

31
00:03:22,250 --> 00:03:24,430
y vamos a definir la propiedad body

32
00:03:24,430 --> 00:03:26,770
¿vale? vamos a definir el tamaño

33
00:03:26,770 --> 00:03:28,370
de todos los elementos que hay en el body, ¿vale?

34
00:03:28,430 --> 00:03:30,689
que como digo por defecto en todos los navegadores

35
00:03:30,689 --> 00:03:31,969
16 píxeles, ¿vale?

36
00:03:32,210 --> 00:03:34,009
pero yo aquí podría modificarlo

37
00:03:34,009 --> 00:03:35,490
y poner por ejemplo

38
00:03:35,490 --> 00:03:38,349
font-size 20 píxeles

39
00:03:38,349 --> 00:03:39,009
¿vale?

40
00:03:39,009 --> 00:03:48,389
Y de la misma forma, pues yo podría forzar el del encabezado H1, podría ponerlo a 35 píxeles, ¿vale?

41
00:03:50,009 --> 00:03:56,689
Y el del encabezado H2 podría dejarlo a 30 píxeles, ¿vale?

42
00:03:57,449 --> 00:04:01,990
Entonces, fijaros que al hacer ese cambio, el tamaño de la fuente me ha cambiado, ¿vale?

43
00:04:02,310 --> 00:04:08,250
¿Qué pasa? Que si ahora vengo a mi página web y donde tenía 16 píxeles, lo pongo, por ejemplo, en 34,

44
00:04:08,250 --> 00:04:11,009
fijaros que eso no me modifica

45
00:04:11,009 --> 00:04:12,509
mi página ¿vale?

46
00:04:13,169 --> 00:04:14,870
me la deja siempre con el mismo tamaño

47
00:04:14,870 --> 00:04:17,029
independientemente del tamaño que yo haya puesto aquí

48
00:04:17,029 --> 00:04:18,709
en el navegador ¿vale?

49
00:04:19,629 --> 00:04:21,089
esto es uno

50
00:04:21,089 --> 00:04:23,069
de los motivos por el que el tamaño

51
00:04:23,069 --> 00:04:24,889
eh... uy perdonad

52
00:04:24,889 --> 00:04:26,689
creo que esto no lo habéis visto

53
00:04:26,689 --> 00:04:28,949
voy a volver a repetirlo ¿vale?

54
00:04:29,850 --> 00:04:30,889
eh...

55
00:04:30,889 --> 00:04:32,209
ahora sí ¿vale?

56
00:04:32,730 --> 00:04:34,670
fijaros lo que decía, esta es mi página ¿vale?

57
00:04:34,870 --> 00:04:36,670
y si yo me voy ahora al tamaño de la fuente

58
00:04:36,670 --> 00:04:38,990
y lo aumento y lo pongo por ejemplo en 36

59
00:04:38,990 --> 00:04:40,870
¿vale? y me voy a mi web

60
00:04:40,870 --> 00:04:42,730
todo sigue en el mismo tamaño

61
00:04:42,730 --> 00:04:44,569
¿vale? es el mismo tamaño que yo

62
00:04:44,569 --> 00:04:46,970
tenía definido, 35, 30

63
00:04:46,970 --> 00:04:47,810
y 20 ¿vale?

64
00:04:48,790 --> 00:04:50,930
esto como digo es uno de los

65
00:04:50,930 --> 00:04:52,889
motivos por el cual cada vez se

66
00:04:52,889 --> 00:04:54,829
utiliza menos definir

67
00:04:54,829 --> 00:04:56,649
el tamaño de una web en píxeles

68
00:04:56,649 --> 00:04:57,970
¿vale? ¿por qué?

69
00:04:59,069 --> 00:04:59,949
pues principalmente

70
00:04:59,949 --> 00:05:01,810
porque eso produce

71
00:05:01,810 --> 00:05:05,129
que nuestra

72
00:05:05,129 --> 00:05:09,050
web no sea responsive, ¿vale? Y ya dijimos que esto era una de nuestras prioridades durante

73
00:05:09,050 --> 00:05:15,870
este curso. Hacer páginas web que se vean igual de bien, ¿vale? En cualquier tipo de

74
00:05:15,870 --> 00:05:20,410
dispositivo y en cualquier tipo de pantalla, ¿vale? Entonces, ¿qué pasa? Que si nosotros

75
00:05:20,410 --> 00:05:26,370
fijamos el tamaño de las fuentes en píxeles, siempre se va a ver en esa dimensión, ¿vale?

76
00:05:26,370 --> 00:05:30,089
En ese tamaño. Entonces, si nos vamos a una pantalla más pequeñita, pues se va a ver

77
00:05:30,089 --> 00:05:33,490
muy grande. O si nos vamos a una pantalla muy grande, se va a ver muy pequeñita. Entonces,

78
00:05:33,490 --> 00:05:36,329
en diferentes dispositivos puede perjudicarnos, ¿vale?

79
00:05:36,610 --> 00:05:40,269
Esto es por el motivo por el que se utilizan otras medidas que vamos a explicar ahora,

80
00:05:40,389 --> 00:05:44,709
que son el porcentaje, los em y los rem, ¿vale?

81
00:05:44,930 --> 00:05:47,230
Vamos a empezar primero con los porcentajes, ¿vale?

82
00:05:47,930 --> 00:05:56,670
Vamos a imaginarnos que yo quiero representar, en vez de utilizar un tamaño de fuente de 20 píxeles,

83
00:05:56,670 --> 00:06:04,889
Lo voy a comentar esto, voy a comentar todos los tamaños de fuente que habíamos puesto, ¿vale?

84
00:06:06,170 --> 00:06:08,870
Comentado y comentado, ¿vale?

85
00:06:09,410 --> 00:06:16,610
Pues, por ejemplo, vamos a decir que el tamaño de fuente del body, pues que sea de 110%, ¿vale?

86
00:06:17,689 --> 00:06:24,329
Entonces fijaros que cuando yo fijo eso, me cambia el valor, ¿vale?

87
00:06:24,329 --> 00:06:35,180
Si yo ahora aquí pongo en el H1, ¿vale? Pongo el 250%, ¿vale? También me modifica.

88
00:06:35,500 --> 00:06:44,459
Y si yo ahora me vengo aquí al H2 y pongo el 200%, ¿vale? 200% también me modifica, ¿vale?

89
00:06:45,040 --> 00:06:55,300
Y yo ahora, si aquí me vengo y modifico, ¿vale? Aquí estáis viendo que yo puedo modificar el tamaño de la fuente, ¿vale?

90
00:06:55,639 --> 00:07:03,360
Entonces voy a modificar el tamaño de la fuente y ahora en vez de poner 16 pongo 30, ¿vale?

91
00:07:03,360 --> 00:07:07,120
Pues fijaros que mi web sí se modifica, ¿vale?

92
00:07:07,279 --> 00:07:12,319
Entonces, por ejemplo, para gente que tenga problemas, alguna discapacidad visual,

93
00:07:12,480 --> 00:07:17,680
quieran poner la fuente más grande, pues nuestra web se adaptaría a su configuración de pantalla

94
00:07:17,680 --> 00:07:19,759
o a su configuración de dispositivos, ¿vale?

95
00:07:20,680 --> 00:07:23,720
Por lo tanto sería mucho más responsive, ¿vale?

96
00:07:23,720 --> 00:07:26,019
¿Qué más?

97
00:07:26,779 --> 00:07:31,579
Vamos a ver otro tipo de unidad que se utiliza

98
00:07:31,579 --> 00:07:31,860
¿Vale?

99
00:07:32,019 --> 00:07:34,180
Ya hemos visto los píxeles, hemos visto los porcentajes

100
00:07:34,180 --> 00:07:35,439
Ahora vamos a ver los M

101
00:07:35,439 --> 00:07:35,860
¿Vale?

102
00:07:36,500 --> 00:07:39,339
Os lo voy a poner aquí en comentarios para que lo sepáis

103
00:07:39,339 --> 00:07:39,660
¿Vale?

104
00:07:45,550 --> 00:07:47,250
Los M, la unidad M

105
00:07:47,250 --> 00:07:47,990
¿Vale?

106
00:07:48,029 --> 00:07:49,009
Que se escribe EM

107
00:07:49,009 --> 00:07:53,269
Hace referencia al tamaño del elemento padre

108
00:07:53,269 --> 00:07:54,430
¿Vale?

109
00:07:54,430 --> 00:08:17,930
Es decir, si nosotros tenemos nuestra web definida a 16 píxeles, que será la unidad por defecto en un navegador, si nuestra web está definida a 16 píxeles, un M es igual a 16 píxeles.

110
00:08:17,930 --> 00:08:21,329
2M es igual a 32 píxeles

111
00:08:21,329 --> 00:08:22,610
Así consecutivamente

112
00:08:22,610 --> 00:08:23,069
¿Vale?

113
00:08:23,569 --> 00:08:26,410
Pero siempre respecto al elemento padre

114
00:08:26,410 --> 00:08:26,850
¿Vale?

115
00:08:27,029 --> 00:08:28,670
Que en este caso es la web principal

116
00:08:28,670 --> 00:08:29,389
Entonces

117
00:08:29,389 --> 00:08:30,750
Vamos por ejemplo

118
00:08:30,750 --> 00:08:32,929
Ahora nos vamos a quitar el body

119
00:08:32,929 --> 00:08:33,129
¿Vale?

120
00:08:33,149 --> 00:08:35,990
Porque realmente esto no nos incluye

121
00:08:35,990 --> 00:08:36,210
¿Vale?

122
00:08:36,809 --> 00:08:37,830
Entonces vamos a imaginarnos

123
00:08:37,830 --> 00:08:40,470
Que yo quiero que mi elemento H1

124
00:08:40,470 --> 00:08:42,029
Tenga pues yo que sé

125
00:08:42,029 --> 00:08:44,970
50 píxeles

126
00:08:44,970 --> 00:08:45,330
¿Vale?

127
00:08:45,990 --> 00:08:47,389
Entonces si yo quiero que tenga

128
00:08:47,389 --> 00:08:49,710
50 píxeles, voy a poner aquí un comentario

129
00:08:49,710 --> 00:08:53,629
50 píxeles

130
00:08:53,629 --> 00:08:55,909
lo voy a dividir entre 16 píxeles

131
00:08:55,909 --> 00:08:57,909
y lo que me dé va a ser el número de M

132
00:08:57,909 --> 00:08:59,929
¿vale? entonces si yo divido

133
00:08:59,929 --> 00:09:02,129
eso, 50 entre 16

134
00:09:02,129 --> 00:09:02,830
da

135
00:09:02,830 --> 00:09:05,809
3,125 ¿vale?

136
00:09:05,950 --> 00:09:07,870
pues yo pongo 3,12 M

137
00:09:07,870 --> 00:09:09,850
¿vale? y me vengo aquí

138
00:09:09,850 --> 00:09:11,909
y fijaros

139
00:09:11,909 --> 00:09:13,690
pongo 3

140
00:09:13,690 --> 00:09:17,980
3,12

141
00:09:17,980 --> 00:09:18,559
M

142
00:09:18,559 --> 00:09:19,620
vale

143
00:09:19,620 --> 00:09:22,919
y esto sería el tamaño

144
00:09:22,919 --> 00:09:25,019
de mi web

145
00:09:25,019 --> 00:09:26,039
vale

146
00:09:26,039 --> 00:09:28,799
voy a poner esto

147
00:09:28,799 --> 00:09:29,779
en comentario

148
00:09:29,779 --> 00:09:32,500
y fijaros que se aumenta

149
00:09:32,500 --> 00:09:35,080
vale, vamos a hacer lo mismo

150
00:09:35,080 --> 00:09:37,019
ahora para el h2 pero en vez de poner

151
00:09:37,019 --> 00:09:39,080
50 píxeles vamos a poner

152
00:09:39,080 --> 00:09:39,480
por ejemplo

153
00:09:39,480 --> 00:09:41,679
38

154
00:09:41,679 --> 00:09:44,860
38 píxeles, o hacemos el mismo

155
00:09:44,860 --> 00:09:46,500
38 píxeles

156
00:09:46,500 --> 00:09:49,779
Entre 16, ¿vale?

157
00:09:49,779 --> 00:09:55,399
Lo divido y esto me da 2,375, ¿vale?

158
00:09:55,500 --> 00:09:59,460
Os voy a poner 2,37M, ¿vale?

159
00:10:00,220 --> 00:10:08,919
Entonces me vengo aquí a mi tamaño de fuente y en vez de poner 200%, pongo 2,37M, ¿vale?

160
00:10:09,179 --> 00:10:11,419
Y habéis visto cómo aumenta el tamaño, ¿vale?

161
00:10:11,419 --> 00:10:34,960
Y ahora en el P, ¿vale? Voy a poner, por ejemplo, pues 25 píxeles, ¿vale? O 20 píxeles, que es un poquito más grande, ¿vale? Pues 20, tendría que hacer 20 píxeles entre 16 píxeles, son 1,25 M, ¿vale?

162
00:10:34,960 --> 00:10:43,000
Y entonces ahora en P me pongo un font-size de 1,25 M, ¿vale?

163
00:10:43,120 --> 00:10:45,259
Y ahí he visto cómo aumentó el tamaño, ¿vale?

164
00:10:46,039 --> 00:10:51,059
¿Qué vamos a hacer ahora? Para que veáis cómo funciona la propiedad M, ¿vale?

165
00:10:52,279 --> 00:10:56,600
La unidad de medida M, perdón, que como decíamos, depende de su padre, ¿vale?

166
00:10:57,759 --> 00:11:02,919
Entonces, si yo pongo aquí otro párrafo, y en este caso pongo este párrafo,

167
00:11:02,919 --> 00:11:10,139
tiene como tamaño de fuente 1,25M, ¿vale?

168
00:11:10,440 --> 00:11:14,120
Voy a meterme dentro del párrafo un contenedor.

169
00:11:14,360 --> 00:11:16,639
Recuerdo que teníamos dos tipos de contenedores principales,

170
00:11:16,740 --> 00:11:18,299
que era el DIP y el SPAM, ¿vale?

171
00:11:18,299 --> 00:11:22,179
El SPAM siempre va puesto todo en la misma línea, digamos.

172
00:11:22,639 --> 00:11:24,299
Voy a meterme aquí un SPAM, ¿vale?

173
00:11:24,299 --> 00:11:36,559
Y voy a poner este Spam también tiene 1,25M, ¿vale?

174
00:11:37,220 --> 00:11:42,840
Y ahora me voy a definir aquí ese elemento Spam que está dentro de un elemento P, ¿vale?

175
00:11:43,519 --> 00:11:47,240
Y voy a ponerle el mismo tamaño, 1,25M.

176
00:11:48,019 --> 00:11:50,440
Y fijaros cómo el Spam aumenta.

177
00:11:51,220 --> 00:11:52,100
¿Por qué aumenta?

178
00:11:52,100 --> 00:11:57,820
Porque lo que hace es que pone 1,25M sobre el tamaño del párrafo, ¿vale?

179
00:11:57,940 --> 00:12:01,340
No sobre el tamaño principal de la web, ¿eh?

180
00:12:01,940 --> 00:12:08,779
Entonces, de la misma forma aquí, si yo ahora aumento el tamaño de la fuente y lo pongo a 24, pues fijaros que todo me aumenta, ¿vale?

181
00:12:10,679 --> 00:12:11,159
Ok.

182
00:12:12,159 --> 00:12:16,039
Y ya vamos a la última unidad de medida, ¿vale?

183
00:12:16,139 --> 00:12:20,139
Que en vez de ser M, M será REM, ¿vale?

184
00:12:20,139 --> 00:12:24,460
Y esto es lo mismo, solo que utiliza la raíz como base.

185
00:12:24,679 --> 00:12:30,759
Y la raíz es el elemento body principal, el elemento HTML, ¿vale?

186
00:12:30,919 --> 00:12:38,419
Que en este caso, como nosotros lo tenemos definido en nuestro navegador a 16 píxeles,

187
00:12:38,940 --> 00:12:45,360
pues todos los elementos calcularán esa unidad respecto a los 16 píxeles, ¿vale?

188
00:12:45,360 --> 00:13:12,240
Entonces fijaros que si yo pongo aquí en H1 REM no se modifica, si lo pongo en H2 no se modifica, si lo pongo en P no se modifica y si lo pongo en el SPAM de P sí se modifica. ¿Por qué? Porque me vuelve a calcular el 1,25 REM, me lo calcula sobre el raíz. De tal forma que estos dos que os tengo aquí señalados tienen el mismo tamaño de fuente. ¿Vale?

189
00:13:12,240 --> 00:13:19,200
Bueno, pues eso en cuanto a tamaños de fuente

190
00:13:19,200 --> 00:13:24,139
Vamos a seguir viendo propiedades de la tipografía