Saltar navegación

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

CSS3 - Propiedad fuentes (Weight, Style y Variant) - 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 3 de febrero de 2021 por Fernando M.

112 visualizaciones

Más información Transcripción

Descargar la transcripción

Vale, vamos a seguir viendo propiedades de las fuentes tipográficas en los capestilos, ¿vale? 00:00:00
Vamos a ver el font-weight, font-style y font-variant, ¿vale? 00:00:09
Vamos a empezar sobre, o vamos a seguir trabajando sobre el archivo fuentes.html que teníamos en el vídeo anterior, ¿vale? 00:00:13
Vamos a crearnos aquí una cabecera de nivel 2 que va a poner propiedad font-weight, ¿vale? 00:00:22
Y aquí vamos a poner también comentarios, propiedad font-weight, site. 00:00:30
Vale, pues la propiedad font-weight lo que hace simplemente es que se encarga de que los textos aparezcan en negrita o no, ¿vale? 00:00:40
Puede aceptar varios valores, que los vamos a ver ahora, pero para ello lo que vamos a hacer es ponernos aquí cuatro palabras, ¿vale? 00:00:48
Entonces, lo que voy a hacer, para aprovechar los accesos directos de M, voy a poner una P y una P llave, y voy a poner este párrafo tiene una propiedad font-weight de, y voy a ponerlo, y voy a dejar el de ahí, ¿vale? 00:00:56
Y esto es lo que yo voy a ir rellenando. 00:01:18
Voy a poner que me lo multiplique por 4, ¿vale? 00:01:19
Le doy al tabulador y fijaros que me aparecen 4 párrafos, ¿vale? 00:01:25
Bueno, en el primero le voy a poner una propiedad de norma, ¿vale? 00:01:31
En el segundo voy a poner una propiedad de bold, que sería lo equivalente a negrita. 00:01:35
En el tercero voy a poner un valor de 100. 00:01:39
Y en el último, una propiedad del valor de 900, ¿vale? 00:01:43
Y lo que voy a hacer es que al segundo párrafo le voy a dar un ID que va a ser P-Volt, ¿vale? 00:01:55
Al tercer párrafo le voy a dar un ID que va a ser P-100. 00:02:03
Y al último párrafo le voy a dar un ID que va a ser P-900, ¿vale? 00:02:08
Y ahora nos vamos a venir aquí a la parte de estilo, vamos a poner aquí font-style, vamos a poner aquí, como decíamos, propiedad font-weight, y como lo que estamos modificando son id, 00:02:15
Entonces, ¿vale? Pues ponemos almohadilla, el nombre del ID, en este caso el primer es el Bolt, ¿vale? 00:02:41
Y ponemos font-weight y vamos a elegir Bolt, ¿vale? 00:02:47
Y fijaros que aparece como más en negrita, ¿vale? 00:02:52
Vamos a modificar ahora el ID de 100 y vamos a poner font-weight, ¿vale? 00:02:56
Y fijaros que aquí veis todos los valores posibles que nos deja poner hojas de estilo, ¿vale? 00:03:03
Y veis que hay la posibilidad de poner valores numéricos que van entre 100 y 900, ¿vale? 00:03:09
Pues fijaros que si yo pongo 100, el valor realmente no se modifica mucho. 00:03:15
Esto es porque el tipo de fuente que ahora mismo tenemos seleccionada, que por defecto está en New Roman, no modifica ese valor, ¿vale? 00:03:20
Ya veremos que si modificamos el tipo de fuente, estos valores también se van a modificar, ¿vale? 00:03:26
Y por último voy a poner el P900 poniendo un font-weight de 900, ¿vale? 00:03:31
Y veis que aquí se modifica, pero de la misma forma no veis mucha diferencia respecto al elemento gold, ¿vale? 00:03:40
Pero ya insisto que esto cuando veamos otros tipos de fuentes veréis que sí hay cambios sustanciales. 00:03:48
Vale, vamos a ver otra propiedad. Vamos a poner un h2 y vamos a poner propiedad font-style, ¿vale? Y vamos a hacer lo mismo, vamos a poner, bueno, como veis el primero normal no lo modifico porque el estilo normal sería el estilo normal, ¿vale? 00:03:56
Vamos a poner ahora un p, entre ya lo voy a poner, este párrafo tiene una propiedad onStyle de, y lo dejo como está, ¿vale? 00:04:17
Que luego lo rellenaré, y lo voy a multiplicar por 3, lo voy a poner 3, ¿vale? 00:04:28
En el primer caso va a ser de normal, ¿vale? Por lo tanto no vamos a ver ninguna diferencia. 00:04:34
En el segundo va a ser italic, ¿vale? Y en el último va a ser de oblique. 00:04:39
Oblique es un tipo de fuente, un tipo de letra, que básicamente lo que hace es la letra normal y la inclina, ¿vale? 00:04:47
Por lo tanto, no es lo mismo que cursiva, ¿vale? No lo distingamos. 00:04:53
Porque cursiva, digamos que el diseñador ha hecho una fuente que es esencialmente cursiva. 00:04:58
Sin embargo, la oblique es que cogemos la fuente normal y la inclinamos, ¿vale? 00:05:02
Entonces, nos vamos a ir al segundo párrafo, le vamos a poner un id, que va a ser itálica, ¿vale? 00:05:06
Y en el tercer párrafo le vamos a poner una id que va a ser oblicua, ¿vale? 00:05:13
Y ahora nos venimos aquí, vamos a poner unos comentarios que va a ser propiedad font-style, ¿vale? 00:05:20
Y lo mismo, vamos a modificar la propiedad itálica, vamos a poner un font-style de itálica, ¿vale? 00:05:29
Y fijaros que el cambio ya se produce en la hoja de contenido, ¿vale? 00:05:36
en la página web. Y aquí 00:05:40
vamos a poner una almohadilla, vamos a poner 00:05:42
oblicua 00:05:44
y vamos a decir font-style 00:05:45
oblique. ¿Vale? 00:05:48
Y fijaros que es 00:05:53
sutilmente diferente. No se aprecia 00:05:55
mucho, pero ya digo que 00:05:57
esto también, el tipo de puente, se notará 00:05:59
para los cambios. ¿Vale? 00:06:01
Vale. Y la última 00:06:03
propiedad que quería ver en esta 00:06:05
parte era la propiedad 00:06:07
font-variable. 00:06:10
¿Vale? Esta propiedad sirve para hacer el tipo de letra lo que sería versátil, ¿vale? 00:06:12
Es decir, una mayúscula, pero no de un tamaño de mayúscula normal, ¿vale? 00:06:18
Lo vamos a ver mejor con un ejemplo para entender. 00:06:22
Vamos a poner dos párrafos, ¿vale? 00:06:25
En este vamos a poner, este párrafo tiene texto en mayúscula, ¿vale? 00:06:28
Y debajo, en el párrafo de abajo, vamos a poner lo mismo, pero en minúscula. 00:06:37
tiene texto también en mayúscula, ¿vale? 00:06:41
Y a este párrafo le voy a poner un id que va a ser versátil. 00:06:49
Y aquí vamos a poner propiedad, propiedad, font, vale. 00:06:56
Y como veis, ahora modifico la propiedad versátil y lo que vamos a hacer es poner la propiedad font-variant 00:07:06
y la vamos a fijar a small caps, ¿vale? 00:07:13
Que digamos que serían las mayúsculas pequeñas. 00:07:15
Fijaros cómo se modifica la web. 00:07:17
Ah, porque es Bexánicas. 00:07:23
Entonces fijaros cómo aparece una mayúscula, pero del tamaño de las minúsculas. 00:07:27
Muy bien, pues esas son las tres propiedades que seguimos viendo, 00:07:35
font-web, font-size, font-variance. 00:07:40
Seguimos viendo propiedades de fuente o tipografía y vamos viendo cómo afecta. 00:07:43
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
112
Fecha:
3 de febrero de 2021 - 0:18
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
07′ 50″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
27.07 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid