Saltar navegación

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

Introducción a hojas de estilo I. W3.CSS - 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 23 de septiembre de 2024 por Pedro Luis L.

90 visualizaciones

Más información Transcripción

Descargar la transcripción

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. 00:00:00
Ahora vamos a ver lo que pasa 00:00:23
Esto va a tener que ser web 00:00:25
Me voy a ir 00:00:26
A internet 00:00:29
Y lo que vamos a usar 00:00:31
Y lo que vamos a buscar 00:00:32
Se llama hoja de estilos 00:00:33
Hay hojas de estilos ya creadas 00:00:35
Y hay algunas que funcionan muy bien 00:00:37
Como esta que vamos a buscar ahora 00:00:39
Se llama w3.css 00:00:41
La busco 00:00:44
La busco en los buscadores 00:00:45
Me ha quedado un poquito 00:00:48
Aquí está 00:00:51
W3Schools. Bueno, aquí tengo el tutorial de la W3CSS. 00:00:53
W3CSS es una hoja de estilos gratuita. 00:01:01
¿De acuerdo? Dicen aquí que la podemos usar sin problemas. 00:01:04
Que no necesitamos licencia ni nada para usarla. 00:01:07
¿De acuerdo? Dicen que la podemos usarla sin problemas. 00:01:11
¿Cómo se usa? Bueno, pues para usar una hoja de estilos, en concreto esta, 00:01:14
¿veis esta línea de aquí? Pues lo que tenemos que hacer es copiarla. 00:01:19
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. 00:01:23
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. 00:01:43
De momento no vemos así grandes cambios, aparte de tipo de letra. 00:01:56
Bueno, esto también se puede usar de otra forma. 00:02:01
¿Podemos usarlo? Pues oyendo a descargar la página a la W3School. 00:02:03
Esto indica que cada vez que visitamos la página se tiene que ir a W3School a descargar la página. 00:02:10
O la podemos descargar nosotros. Eso es muy fácil. 00:02:15
Venimos aquí a donde tenemos la página de W3School y aquí pone o descargarla desde tal sitio. 00:02:18
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. 00:02:25
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? 00:02:50
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. 00:03:08
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. 00:03:24
Bueno, pues ¿cómo funciona esto? 00:03:36
Bueno, pues volvemos aquí a la hoja 00:03:40
al manual 00:03:42
de cómo se usa esta hoja de estilos 00:03:44
Vamos a empezar, por ejemplo, con los colores 00:03:46
Aquí tengo los colores 00:03:48
W3, colores 00:03:50
Tengo aquí la lista de colores 00:03:52
¿De acuerdo? 00:03:54
Y entonces 00:03:57
para usar un color, nos dice 00:03:58
aquí tengo que poner W3 00:04:00
menos y el nombre de color 00:04:02
Aquí abajo tengo genios 00:04:04
A ver, ¿lo veis aquí? 00:04:09
W3 menos y el nombre del color. 00:04:10
¿De acuerdo? 00:04:14
Me hay que poner este atributo, class, que no lo habíamos usado hasta ahora. 00:04:15
Por ejemplo, la cabecera. 00:04:18
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. 00:04:19
Fijaos que me he olvidado de poner aquí la barra. 00:04:31
Va a pasar algo bastante curioso. 00:04:34
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. 00:04:35
Subido por:
Pedro Luis L.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
90
Fecha:
23 de septiembre de 2024 - 14:54
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
04′ 55″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
8.91 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid