1 00:00:00,110 --> 00:00:23,350 Bueno, vamos a continuar con nuestro pequeño curso. Y bueno, está nuestra página web. Esto se me ha escapado. Fijaros que se me ha olvidado por cerrar aquí el header. O sea, aquí abro el nav y aquí lo cierro con la barrita. Aquí abro el footer y aquí lo cierro con la barrita y aquí se me ha olvidado poner el header. 2 00:00:23,350 --> 00:00:25,190 Ahora vamos a ver lo que pasa 3 00:00:25,190 --> 00:00:26,609 Esto va a tener que ser web 4 00:00:26,609 --> 00:00:29,289 Me voy a ir 5 00:00:29,289 --> 00:00:31,269 A internet 6 00:00:31,269 --> 00:00:32,210 Y lo que vamos a usar 7 00:00:32,210 --> 00:00:33,409 Y lo que vamos a buscar 8 00:00:33,409 --> 00:00:35,649 Se llama hoja de estilos 9 00:00:35,649 --> 00:00:37,649 Hay hojas de estilos ya creadas 10 00:00:37,649 --> 00:00:39,729 Y hay algunas que funcionan muy bien 11 00:00:39,729 --> 00:00:41,070 Como esta que vamos a buscar ahora 12 00:00:41,070 --> 00:00:44,670 Se llama w3.css 13 00:00:44,670 --> 00:00:45,789 La busco 14 00:00:45,789 --> 00:00:48,509 La busco en los buscadores 15 00:00:48,509 --> 00:00:51,390 Me ha quedado un poquito 16 00:00:51,390 --> 00:00:52,469 Aquí está 17 00:00:53,729 --> 00:00:59,369 W3Schools. Bueno, aquí tengo el tutorial de la W3CSS. 18 00:01:01,130 --> 00:01:03,350 W3CSS es una hoja de estilos gratuita. 19 00:01:04,250 --> 00:01:07,390 ¿De acuerdo? Dicen aquí que la podemos usar sin problemas. 20 00:01:07,810 --> 00:01:10,189 Que no necesitamos licencia ni nada para usarla. 21 00:01:11,230 --> 00:01:13,549 ¿De acuerdo? Dicen que la podemos usarla sin problemas. 22 00:01:14,069 --> 00:01:18,769 ¿Cómo se usa? Bueno, pues para usar una hoja de estilos, en concreto esta, 23 00:01:19,049 --> 00:01:22,390 ¿veis esta línea de aquí? Pues lo que tenemos que hacer es copiarla. 24 00:01:23,349 --> 00:01:40,540 La copiamos y nos vamos al editor. Bueno, y la pegamos, que dije yo la había pegado ya aquí, estaba haciendo pruebas y ya la había pegado. Ahí la tengo, la hoja de estilos pegada. 25 00:01:43,010 --> 00:01:56,430 Si me voy a visitar la página web y la recargo, vais a ver, ¿veis? Ha cambiado el tipo de letra, ya ha hecho algún cambio. 26 00:01:56,430 --> 00:02:01,590 De momento no vemos así grandes cambios, aparte de tipo de letra. 27 00:02:01,590 --> 00:02:03,689 Bueno, esto también se puede usar de otra forma. 28 00:02:03,689 --> 00:02:10,349 ¿Podemos usarlo? Pues oyendo a descargar la página a la W3School. 29 00:02:10,349 --> 00:02:15,930 Esto indica que cada vez que visitamos la página se tiene que ir a W3School a descargar la página. 30 00:02:15,930 --> 00:02:18,750 O la podemos descargar nosotros. Eso es muy fácil. 31 00:02:18,750 --> 00:02:25,590 Venimos aquí a donde tenemos la página de W3School y aquí pone o descargarla desde tal sitio. 32 00:02:25,590 --> 00:02:50,430 Pues nos vamos a ese sitio, sin paciencia, no dice que la podemos descargar desde aquí, le echamos, bueno, nos sale esto, ya botón derecho, guardar como y la guardamos. Bueno, la voy a guardar junto a mi página web. Si voy a la página web, aquí la tengo, tengo la página y la hoja de estilos que me acabo de descargar. 33 00:02:50,430 --> 00:03:08,370 Bueno, la ha descargado con el nombre w3.css, pero podría poner cualquier nombre. Podría ser pp.css, sin problemas. Lo importante es que si ahí se llama w3.css, aquí la tengo que llamar igual. ¿De acuerdo? 34 00:03:08,370 --> 00:03:23,650 O sea, esta es la segunda forma de usar la hoja de estilos. Una, poniendo la dirección por ahí a la dirección de internet, o bien dos, me descargo la hoja de estilos, la pongo aquí junto a la página web e indico aquí la ruta a ese archivo. 35 00:03:24,729 --> 00:03:36,599 Si lo guardo y recargo, cierro esta pestañita, vamos a descargar, ves que funciona exactamente igual. Y ahora incluso más rápido porque ya la tenemos descargada. 36 00:03:36,599 --> 00:03:40,139 Bueno, pues ¿cómo funciona esto? 37 00:03:40,300 --> 00:03:42,020 Bueno, pues volvemos aquí a la hoja 38 00:03:42,020 --> 00:03:44,240 al manual 39 00:03:44,240 --> 00:03:46,520 de cómo se usa esta hoja de estilos 40 00:03:46,520 --> 00:03:48,840 Vamos a empezar, por ejemplo, con los colores 41 00:03:48,840 --> 00:03:50,500 Aquí tengo los colores 42 00:03:50,500 --> 00:03:52,479 W3, colores 43 00:03:52,479 --> 00:03:54,900 Tengo aquí la lista de colores 44 00:03:54,900 --> 00:03:56,199 ¿De acuerdo? 45 00:03:57,719 --> 00:03:58,599 Y entonces 46 00:03:58,599 --> 00:04:00,580 para usar un color, nos dice 47 00:04:00,580 --> 00:04:02,099 aquí tengo que poner W3 48 00:04:02,099 --> 00:04:04,319 menos y el nombre de color 49 00:04:04,319 --> 00:04:06,340 Aquí abajo tengo genios 50 00:04:09,300 --> 00:04:09,960 A ver, ¿lo veis aquí? 51 00:04:10,819 --> 00:04:13,699 W3 menos y el nombre del color. 52 00:04:14,219 --> 00:04:14,520 ¿De acuerdo? 53 00:04:15,020 --> 00:04:18,500 Me hay que poner este atributo, class, que no lo habíamos usado hasta ahora. 54 00:04:18,500 --> 00:04:19,699 Por ejemplo, la cabecera. 55 00:04:19,819 --> 00:04:31,560 Si pongo class igual a W3 guión blue, que me gusta el azul, pues me debería poner solo la cabecera de color azul. 56 00:04:31,959 --> 00:04:34,100 Fijaos que me he olvidado de poner aquí la barra. 57 00:04:34,180 --> 00:04:35,639 Va a pasar algo bastante curioso. 58 00:04:35,639 --> 00:04:52,689 Me ha puesto todo en azul porque como no he cerrado el tab, no he cerrado la etiqueta, pues no sabe dónde parar. Continúo. Voy a cerrar el tab, voy a cerrar la etiqueta, por importancia de cerrar las etiquetas y solo me afecta a la cabecera.