Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS3 - Propiedades fuentes (Font-size) - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 2 de febrero de 2021 por Fernando M.

130 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues ahora vamos a ver otras propiedades de las hojas de estilo. 00:00:00
En este caso vamos a ver propiedades que tienen que ver con las fuentes y con las tipografías. 00:00:07
Y vamos a empezar viendo la propiedad font-size, ¿vale? 00:00:13
Que esto ya lo hemos visto varias veces durante lo que llevamos de curso. 00:00:19
Hemos utilizado, pero vamos a explicarlo un poquito más en detalle para que veamos algunas cosas bastante importantes, ¿vale? 00:00:23
Bueno, yo ya me he abierto aquí, como veis, mi navegador, perdón, mi brackets, ¿vale? 00:00:30
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? 00:00:39
HTML 2.5, tabulador, ¿vale? 00:00:47
Y aquí voy a poner fuentes y tipo gratis, ¿vale? 00:00:51
Voy a ponerlo en castellano y nos vamos a crear una estructura básica de web, ¿vale? 00:00:55
Vamos a empezar con una etiqueta H1 y le vamos a poner fuentes en CSS, ¿vale? 00:01:03
Y debajo vamos a empezar con la propiedad font-size, ¿vale? 00:01:09
Que es la que modifica el tamaño del contenido del texto, ¿vale? 00:01:17
Y bueno, en primer lugar nos vamos a crear un párrafo con un texto, lo de Nipson, ¿vale? 00:01:23
Entonces fijaros, lo que estáis viendo vosotros aquí en pantalla, ¿vale? 00:01:32
Es mi navegador Chrome, ¿vale? 00:01:35
Y aparece en mi página web, ¿vale? 00:01:40
Por defecto, esto tiene un tamaño que está especificado en cada uno de los navegadores, ¿vale? 00:01:45
Si estamos en el Chrome, por ejemplo, para ver esas propiedades, esa configuración, 00:01:49
¿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? 00:01:55
¿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? 00:02:12
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. 00:02:24
Si le dais a personalizar fuentes, veis, cuando pongo el ratón encima, que el tamaño por defecto son 16, ¿vale? 00:02:46
Si yo aumento el tamaño y me voy a mi página, ¿vale? Fijaros que el tamaño también aumenta, ¿vale? 00:02:52
Si yo lo disminuyo, lo pongo por defecto que son 16, el tamaño disminuye, ¿vale? 00:03:00
Ahora, ¿qué era lo que yo quería explicar o qué es lo que quiero explicar con esto? Pues vamos a fijarnos, ¿vale? 00:03:06
vamos a coger ahora 00:03:12
y dentro del head 00:03:16
vamos a poner nuestras hojas de estilo 00:03:18
como hacemos siempre, ¿vale? 00:03:20
y vamos a definir la propiedad body 00:03:22
¿vale? vamos a definir el tamaño 00:03:24
de todos los elementos que hay en el body, ¿vale? 00:03:26
que como digo por defecto en todos los navegadores 00:03:28
16 píxeles, ¿vale? 00:03:30
pero yo aquí podría modificarlo 00:03:32
y poner por ejemplo 00:03:34
font-size 20 píxeles 00:03:35
¿vale? 00:03:38
Y de la misma forma, pues yo podría forzar el del encabezado H1, podría ponerlo a 35 píxeles, ¿vale? 00:03:39
Y el del encabezado H2 podría dejarlo a 30 píxeles, ¿vale? 00:03:50
Entonces, fijaros que al hacer ese cambio, el tamaño de la fuente me ha cambiado, ¿vale? 00:03:57
¿Qué pasa? Que si ahora vengo a mi página web y donde tenía 16 píxeles, lo pongo, por ejemplo, en 34, 00:04:02
fijaros que eso no me modifica 00:04:08
mi página ¿vale? 00:04:11
me la deja siempre con el mismo tamaño 00:04:13
independientemente del tamaño que yo haya puesto aquí 00:04:14
en el navegador ¿vale? 00:04:17
esto es uno 00:04:19
de los motivos por el que el tamaño 00:04:21
eh... uy perdonad 00:04:23
creo que esto no lo habéis visto 00:04:24
voy a volver a repetirlo ¿vale? 00:04:26
eh... 00:04:29
ahora sí ¿vale? 00:04:30
fijaros lo que decía, esta es mi página ¿vale? 00:04:32
y si yo me voy ahora al tamaño de la fuente 00:04:34
y lo aumento y lo pongo por ejemplo en 36 00:04:36
¿vale? y me voy a mi web 00:04:38
todo sigue en el mismo tamaño 00:04:40
¿vale? es el mismo tamaño que yo 00:04:42
tenía definido, 35, 30 00:04:44
y 20 ¿vale? 00:04:46
esto como digo es uno de los 00:04:48
motivos por el cual cada vez se 00:04:50
utiliza menos definir 00:04:52
el tamaño de una web en píxeles 00:04:54
¿vale? ¿por qué? 00:04:56
pues principalmente 00:04:59
porque eso produce 00:04:59
que nuestra 00:05:01
web no sea responsive, ¿vale? Y ya dijimos que esto era una de nuestras prioridades durante 00:05:05
este curso. Hacer páginas web que se vean igual de bien, ¿vale? En cualquier tipo de 00:05:09
dispositivo y en cualquier tipo de pantalla, ¿vale? Entonces, ¿qué pasa? Que si nosotros 00:05:15
fijamos el tamaño de las fuentes en píxeles, siempre se va a ver en esa dimensión, ¿vale? 00:05:20
En ese tamaño. Entonces, si nos vamos a una pantalla más pequeñita, pues se va a ver 00:05:26
muy grande. O si nos vamos a una pantalla muy grande, se va a ver muy pequeñita. Entonces, 00:05:30
en diferentes dispositivos puede perjudicarnos, ¿vale? 00:05:33
Esto es por el motivo por el que se utilizan otras medidas que vamos a explicar ahora, 00:05:36
que son el porcentaje, los em y los rem, ¿vale? 00:05:40
Vamos a empezar primero con los porcentajes, ¿vale? 00:05:44
Vamos a imaginarnos que yo quiero representar, en vez de utilizar un tamaño de fuente de 20 píxeles, 00:05:47
Lo voy a comentar esto, voy a comentar todos los tamaños de fuente que habíamos puesto, ¿vale? 00:05:56
Comentado y comentado, ¿vale? 00:06:06
Pues, por ejemplo, vamos a decir que el tamaño de fuente del body, pues que sea de 110%, ¿vale? 00:06:09
Entonces fijaros que cuando yo fijo eso, me cambia el valor, ¿vale? 00:06:17
Si yo ahora aquí pongo en el H1, ¿vale? Pongo el 250%, ¿vale? También me modifica. 00:06:24
Y si yo ahora me vengo aquí al H2 y pongo el 200%, ¿vale? 200% también me modifica, ¿vale? 00:06:35
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? 00:06:45
Entonces voy a modificar el tamaño de la fuente y ahora en vez de poner 16 pongo 30, ¿vale? 00:06:55
Pues fijaros que mi web sí se modifica, ¿vale? 00:07:03
Entonces, por ejemplo, para gente que tenga problemas, alguna discapacidad visual, 00:07:07
quieran poner la fuente más grande, pues nuestra web se adaptaría a su configuración de pantalla 00:07:12
o a su configuración de dispositivos, ¿vale? 00:07:17
Por lo tanto sería mucho más responsive, ¿vale? 00:07:20
¿Qué más? 00:07:23
Vamos a ver otro tipo de unidad que se utiliza 00:07:26
¿Vale? 00:07:31
Ya hemos visto los píxeles, hemos visto los porcentajes 00:07:32
Ahora vamos a ver los M 00:07:34
¿Vale? 00:07:35
Os lo voy a poner aquí en comentarios para que lo sepáis 00:07:36
¿Vale? 00:07:39
Los M, la unidad M 00:07:45
¿Vale? 00:07:47
Que se escribe EM 00:07:48
Hace referencia al tamaño del elemento padre 00:07:49
¿Vale? 00:07:53
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. 00:07:54
2M es igual a 32 píxeles 00:08:17
Así consecutivamente 00:08:21
¿Vale? 00:08:22
Pero siempre respecto al elemento padre 00:08:23
¿Vale? 00:08:26
Que en este caso es la web principal 00:08:27
Entonces 00:08:28
Vamos por ejemplo 00:08:29
Ahora nos vamos a quitar el body 00:08:30
¿Vale? 00:08:32
Porque realmente esto no nos incluye 00:08:33
¿Vale? 00:08:35
Entonces vamos a imaginarnos 00:08:36
Que yo quiero que mi elemento H1 00:08:37
Tenga pues yo que sé 00:08:40
50 píxeles 00:08:42
¿Vale? 00:08:44
Entonces si yo quiero que tenga 00:08:45
50 píxeles, voy a poner aquí un comentario 00:08:47
50 píxeles 00:08:49
lo voy a dividir entre 16 píxeles 00:08:53
y lo que me dé va a ser el número de M 00:08:55
¿vale? entonces si yo divido 00:08:57
eso, 50 entre 16 00:08:59
3,125 ¿vale? 00:09:02
pues yo pongo 3,12 M 00:09:05
¿vale? y me vengo aquí 00:09:07
y fijaros 00:09:09
pongo 3 00:09:11
3,12 00:09:13
vale 00:09:18
y esto sería el tamaño 00:09:19
de mi web 00:09:22
vale 00:09:25
voy a poner esto 00:09:26
en comentario 00:09:28
y fijaros que se aumenta 00:09:29
vale, vamos a hacer lo mismo 00:09:32
ahora para el h2 pero en vez de poner 00:09:35
50 píxeles vamos a poner 00:09:37
por ejemplo 00:09:39
38 píxeles, o hacemos el mismo 00:09:41
38 píxeles 00:09:44
Entre 16, ¿vale? 00:09:46
Lo divido y esto me da 2,375, ¿vale? 00:09:49
Os voy a poner 2,37M, ¿vale? 00:09:55
Entonces me vengo aquí a mi tamaño de fuente y en vez de poner 200%, pongo 2,37M, ¿vale? 00:10:00
Y habéis visto cómo aumenta el tamaño, ¿vale? 00:10:09
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? 00:10:11
Y entonces ahora en P me pongo un font-size de 1,25 M, ¿vale? 00:10:34
Y ahí he visto cómo aumentó el tamaño, ¿vale? 00:10:43
¿Qué vamos a hacer ahora? Para que veáis cómo funciona la propiedad M, ¿vale? 00:10:46
La unidad de medida M, perdón, que como decíamos, depende de su padre, ¿vale? 00:10:52
Entonces, si yo pongo aquí otro párrafo, y en este caso pongo este párrafo, 00:10:57
tiene como tamaño de fuente 1,25M, ¿vale? 00:11:02
Voy a meterme dentro del párrafo un contenedor. 00:11:10
Recuerdo que teníamos dos tipos de contenedores principales, 00:11:14
que era el DIP y el SPAM, ¿vale? 00:11:16
El SPAM siempre va puesto todo en la misma línea, digamos. 00:11:18
Voy a meterme aquí un SPAM, ¿vale? 00:11:22
Y voy a poner este Spam también tiene 1,25M, ¿vale? 00:11:24
Y ahora me voy a definir aquí ese elemento Spam que está dentro de un elemento P, ¿vale? 00:11:37
Y voy a ponerle el mismo tamaño, 1,25M. 00:11:43
Y fijaros cómo el Spam aumenta. 00:11:48
¿Por qué aumenta? 00:11:51
Porque lo que hace es que pone 1,25M sobre el tamaño del párrafo, ¿vale? 00:11:52
No sobre el tamaño principal de la web, ¿eh? 00:11:57
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? 00:12:01
Ok. 00:12:10
Y ya vamos a la última unidad de medida, ¿vale? 00:12:12
Que en vez de ser M, M será REM, ¿vale? 00:12:16
Y esto es lo mismo, solo que utiliza la raíz como base. 00:12:20
Y la raíz es el elemento body principal, el elemento HTML, ¿vale? 00:12:24
Que en este caso, como nosotros lo tenemos definido en nuestro navegador a 16 píxeles, 00:12:30
pues todos los elementos calcularán esa unidad respecto a los 16 píxeles, ¿vale? 00:12:38
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? 00:12:45
Bueno, pues eso en cuanto a tamaños de fuente 00:13:12
Vamos a seguir viendo propiedades de la tipografía 00:13:19
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
130
Fecha:
2 de febrero de 2021 - 22:57
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
13′ 24″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
41.76 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid