1 00:00:00,560 --> 00:00:06,799 Vale, vamos a seguir viendo propiedades de las fuentes tipográficas en los capestilos, ¿vale? 2 00:00:09,080 --> 00:00:12,859 Vamos a ver el font-weight, font-style y font-variant, ¿vale? 3 00:00:13,699 --> 00:00:22,399 Vamos a empezar sobre, o vamos a seguir trabajando sobre el archivo fuentes.html que teníamos en el vídeo anterior, ¿vale? 4 00:00:22,399 --> 00:00:29,760 Vamos a crearnos aquí una cabecera de nivel 2 que va a poner propiedad font-weight, ¿vale? 5 00:00:30,559 --> 00:00:39,539 Y aquí vamos a poner también comentarios, propiedad font-weight, site. 6 00:00:40,280 --> 00:00:47,000 Vale, pues la propiedad font-weight lo que hace simplemente es que se encarga de que los textos aparezcan en negrita o no, ¿vale? 7 00:00:48,920 --> 00:00:56,159 Puede aceptar varios valores, que los vamos a ver ahora, pero para ello lo que vamos a hacer es ponernos aquí cuatro palabras, ¿vale? 8 00:00:56,159 --> 00:01:18,459 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? 9 00:01:18,459 --> 00:01:19,840 Y esto es lo que yo voy a ir rellenando. 10 00:01:19,920 --> 00:01:24,980 Voy a poner que me lo multiplique por 4, ¿vale? 11 00:01:25,439 --> 00:01:30,420 Le doy al tabulador y fijaros que me aparecen 4 párrafos, ¿vale? 12 00:01:31,000 --> 00:01:34,579 Bueno, en el primero le voy a poner una propiedad de norma, ¿vale? 13 00:01:35,060 --> 00:01:39,680 En el segundo voy a poner una propiedad de bold, que sería lo equivalente a negrita. 14 00:01:39,680 --> 00:01:43,920 En el tercero voy a poner un valor de 100. 15 00:01:43,920 --> 00:01:53,629 Y en el último, una propiedad del valor de 900, ¿vale? 16 00:01:55,129 --> 00:02:02,049 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? 17 00:02:03,510 --> 00:02:08,849 Al tercer párrafo le voy a dar un ID que va a ser P-100. 18 00:02:08,849 --> 00:02:15,849 Y al último párrafo le voy a dar un ID que va a ser P-900, ¿vale? 19 00:02:15,930 --> 00:02:41,150 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, 20 00:02:41,150 --> 00:02:47,069 Entonces, ¿vale? Pues ponemos almohadilla, el nombre del ID, en este caso el primer es el Bolt, ¿vale? 21 00:02:47,349 --> 00:02:52,030 Y ponemos font-weight y vamos a elegir Bolt, ¿vale? 22 00:02:52,210 --> 00:02:55,810 Y fijaros que aparece como más en negrita, ¿vale? 23 00:02:56,569 --> 00:03:02,810 Vamos a modificar ahora el ID de 100 y vamos a poner font-weight, ¿vale? 24 00:03:03,110 --> 00:03:09,469 Y fijaros que aquí veis todos los valores posibles que nos deja poner hojas de estilo, ¿vale? 25 00:03:09,469 --> 00:03:15,370 Y veis que hay la posibilidad de poner valores numéricos que van entre 100 y 900, ¿vale? 26 00:03:15,689 --> 00:03:19,969 Pues fijaros que si yo pongo 100, el valor realmente no se modifica mucho. 27 00:03:20,189 --> 00:03:26,389 Esto es porque el tipo de fuente que ahora mismo tenemos seleccionada, que por defecto está en New Roman, no modifica ese valor, ¿vale? 28 00:03:26,409 --> 00:03:31,009 Ya veremos que si modificamos el tipo de fuente, estos valores también se van a modificar, ¿vale? 29 00:03:31,009 --> 00:03:40,610 Y por último voy a poner el P900 poniendo un font-weight de 900, ¿vale? 30 00:03:40,629 --> 00:03:47,710 Y veis que aquí se modifica, pero de la misma forma no veis mucha diferencia respecto al elemento gold, ¿vale? 31 00:03:48,370 --> 00:03:56,009 Pero ya insisto que esto cuando veamos otros tipos de fuentes veréis que sí hay cambios sustanciales. 32 00:03:56,009 --> 00:04:16,410 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? 33 00:04:17,029 --> 00:04:28,529 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? 34 00:04:28,529 --> 00:04:33,029 Que luego lo rellenaré, y lo voy a multiplicar por 3, lo voy a poner 3, ¿vale? 35 00:04:34,149 --> 00:04:39,110 En el primer caso va a ser de normal, ¿vale? Por lo tanto no vamos a ver ninguna diferencia. 36 00:04:39,790 --> 00:04:45,110 En el segundo va a ser italic, ¿vale? Y en el último va a ser de oblique. 37 00:04:47,410 --> 00:04:53,350 Oblique es un tipo de fuente, un tipo de letra, que básicamente lo que hace es la letra normal y la inclina, ¿vale? 38 00:04:53,629 --> 00:04:57,490 Por lo tanto, no es lo mismo que cursiva, ¿vale? No lo distingamos. 39 00:04:58,050 --> 00:05:02,310 Porque cursiva, digamos que el diseñador ha hecho una fuente que es esencialmente cursiva. 40 00:05:02,310 --> 00:05:05,990 Sin embargo, la oblique es que cogemos la fuente normal y la inclinamos, ¿vale? 41 00:05:06,670 --> 00:05:13,670 Entonces, nos vamos a ir al segundo párrafo, le vamos a poner un id, que va a ser itálica, ¿vale? 42 00:05:13,670 --> 00:05:20,329 Y en el tercer párrafo le vamos a poner una id que va a ser oblicua, ¿vale? 43 00:05:20,730 --> 00:05:28,449 Y ahora nos venimos aquí, vamos a poner unos comentarios que va a ser propiedad font-style, ¿vale? 44 00:05:29,310 --> 00:05:36,410 Y lo mismo, vamos a modificar la propiedad itálica, vamos a poner un font-style de itálica, ¿vale? 45 00:05:36,850 --> 00:05:40,350 Y fijaros que el cambio ya se produce en la hoja de contenido, ¿vale? 46 00:05:40,350 --> 00:05:42,910 en la página web. Y aquí 47 00:05:42,910 --> 00:05:44,850 vamos a poner una almohadilla, vamos a poner 48 00:05:44,850 --> 00:05:45,829 oblicua 49 00:05:45,829 --> 00:05:48,970 y vamos a decir font-style 50 00:05:48,970 --> 00:05:53,220 oblique. ¿Vale? 51 00:05:53,819 --> 00:05:55,759 Y fijaros que es 52 00:05:55,759 --> 00:05:57,560 sutilmente diferente. No se aprecia 53 00:05:57,560 --> 00:05:59,379 mucho, pero ya digo que 54 00:05:59,379 --> 00:06:01,180 esto también, el tipo de puente, se notará 55 00:06:01,180 --> 00:06:02,699 para los cambios. ¿Vale? 56 00:06:03,899 --> 00:06:05,379 Vale. Y la última 57 00:06:05,379 --> 00:06:07,839 propiedad que quería ver en esta 58 00:06:07,839 --> 00:06:10,139 parte era la propiedad 59 00:06:10,139 --> 00:06:11,839 font-variable. 60 00:06:12,879 --> 00:06:18,240 ¿Vale? Esta propiedad sirve para hacer el tipo de letra lo que sería versátil, ¿vale? 61 00:06:18,300 --> 00:06:22,000 Es decir, una mayúscula, pero no de un tamaño de mayúscula normal, ¿vale? 62 00:06:22,660 --> 00:06:24,860 Lo vamos a ver mejor con un ejemplo para entender. 63 00:06:25,939 --> 00:06:27,980 Vamos a poner dos párrafos, ¿vale? 64 00:06:28,720 --> 00:06:37,300 En este vamos a poner, este párrafo tiene texto en mayúscula, ¿vale? 65 00:06:37,759 --> 00:06:41,420 Y debajo, en el párrafo de abajo, vamos a poner lo mismo, pero en minúscula. 66 00:06:41,420 --> 00:06:48,680 tiene texto también en mayúscula, ¿vale? 67 00:06:49,000 --> 00:06:52,480 Y a este párrafo le voy a poner un id que va a ser versátil. 68 00:06:56,800 --> 00:07:05,579 Y aquí vamos a poner propiedad, propiedad, font, vale. 69 00:07:06,480 --> 00:07:13,160 Y como veis, ahora modifico la propiedad versátil y lo que vamos a hacer es poner la propiedad font-variant 70 00:07:13,160 --> 00:07:15,459 y la vamos a fijar a small caps, ¿vale? 71 00:07:15,819 --> 00:07:17,899 Que digamos que serían las mayúsculas pequeñas. 72 00:07:17,899 --> 00:07:19,600 Fijaros cómo se modifica la web. 73 00:07:23,300 --> 00:07:25,019 Ah, porque es Bexánicas. 74 00:07:27,660 --> 00:07:34,319 Entonces fijaros cómo aparece una mayúscula, pero del tamaño de las minúsculas. 75 00:07:35,240 --> 00:07:40,689 Muy bien, pues esas son las tres propiedades que seguimos viendo, 76 00:07:40,810 --> 00:07:42,730 font-web, font-size, font-variance. 77 00:07:43,269 --> 00:07:48,790 Seguimos viendo propiedades de fuente o tipografía y vamos viendo cómo afecta.