Saltar navegación

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

CSS - Aplicar estilos a una página web - 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 12 de enero de 2021 por Fernando M.

267 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues ahora vamos a ver cómo añadir hojas de estilo a un documento HTML, ¿vale? 00:00:00
Entonces, para eso vamos a utilizar el mismo programa que siempre, que es Brackets, ¿vale? 00:00:07
Que tiene todas las herramientas que en principio vamos a necesitar. 00:00:11
Y bueno, lo primero que vamos a hacer, como veis aquí en la pantalla, ¿vale? 00:00:16
Vamos a crearnos una nueva carpeta, ¿vale? 00:00:24
Esa carpeta que vamos a crear la vamos a llamar CSS3, ¿vale? 00:00:28
Porque vamos a utilizar la versión 3 de hojas de estilo, ¿vale? 00:00:34
Y lo que vamos a hacer directamente en Bragg es que le vamos a dar archivo, ¿vale? 00:00:38
Archivo, abrir carpeta y vamos a buscar esa carpeta, ¿vale? 00:00:45
Que cada uno pues la tendrá en la ruta que sea, ¿vale? 00:00:51
De tal forma que se nos queda tal como estáis viendo ahora en pantalla, ¿vale? 00:00:54
Entonces, lo que vamos a hacer es crearnos un primer archivo, ¿vale? 00:01:01
Recuerdo que para crear un archivo en brackets con control N ya se nos creaba, no aparece directamente aquí sin título, por lo tanto lo primero que hay que hacer es ponerle un nombre, ¿vale? 00:01:06
En este caso, pues, le vamos a poner un nombre con control S y yo lo voy a llamar aplicarpss.html, ¿vale? Va a ser un documento HTML donde yo voy a crear, a definir en primer lugar el contenido de mi web, ¿vale? 00:01:15
Voy a darle a la vista previa dinámica para que veáis aquí a la derecha directamente el navegador, para que veáis el efecto que va produciendo, ¿vale? Eso es. Y ahora aquí vamos a reducir esto así, ¿vale? 00:01:35
Entonces, recuerdo que lo primero que hacíamos era escribir HTML5, 2.5 y le dábamos a la tecla tabulador, ¿vale? De tal forma que se nos creaba toda la estructura HTML. Aquí le cambiamos el idioma, lo ponemos en castellano y ahora le vamos a poner un título, ¿vale? Como título, pues voy a poner cómo aplicar CSS en un documento HTML, ¿vale? Y ya veis que ese título aparece también aquí, ¿vale? 00:02:01
Y ahora lo que voy a hacer es crearme un pequeño sitio web, ¿vale? Un pequeño sitio web muy sencillito, muy simple, ¿vale? Voy a crear una etiqueta de H1, ¿vale? Voy a poner lo mismo, cómo aplicar CSS en un documento HTML, ¿vale? 00:02:29
Aquí dentro voy a poner un párrafo con lore nipsum, ¿vale? Justo debajo voy a crear una etiqueta h2 donde voy a poner, por ejemplo, esto es un encabezado de nivel 2. 00:02:54
Me creo otro párrafo, ¿vale? Y pongo otro Loren Ipsum. Voy a poner aquí otro párrafo más, también con Loren Ipsum. Voy a añadir una etiqueta, otra etiqueta H2, ¿vale? Esto es otro encabezado de nivel 2. 00:03:14
Pongo un lore nipsum. Dentro me voy a poner una etiqueta de nivel 3. Esto es un encabezado de nivel 3. Dentro me voy a poner otro lore nipsum y voy a repetir esta estructura una vez más, ¿vale? 00:03:42
Voy a poner otro nivel 2. Este es el tercer encabezado nivel 2. Me voy a poner dos parrafitos de Lore Nipsum y otro encabezado de nivel 3. Este es el segundo encabezado de nivel 3 con un par de párrafos más de Lore Nipsum, ¿vale? 00:04:05
Esto sería la web que yo he hecho. Como veis no tiene ningún estilo, simplemente el contenido directamente. Y lo que vamos a hacer es ver las diferentes formas que hay para añadir contenido o para añadir estilos en un archivo, en una página web, en un sitio web. 00:04:43
Y tenemos tres formas de añadir ese estilo, que lo vamos a ver en función de lo que yo recomiendo. 00:05:03
El último va a ser el más recomendado y es el que se utiliza normalmente en sitios web ya profesionales. 00:05:11
Cuando ya hacemos nuestro sitio web, cuando hagamos el proyecto final de la asignatura. 00:05:20
¿Vale? Entonces, el primer método de poner, de hacer hojas de estilo, ¿vale? Sería hacer lo que se llama CSS en línea, ¿vale? Entonces, fijaros, me voy a venir aquí a mi etiqueta H2, voy a ver si puedo aumentar el tamaño de la fuente, que yo recuerde cómo se hacía esto. 00:05:23
aumentar el tamaño de la fuente 00:05:46
aquí, vale, entonces 00:06:00
fijaros, me voy a ir aquí a 00:06:05
a esta etiqueta H2, vale, que veis 00:06:07
que cuando hago clic sobre ella se resalta 00:06:09
y entonces voy a poner aquí un comentario para 00:06:11
identificar que es lo que voy a hacer, vale, y 00:06:13
lo que voy a hacer es hacer 00:06:15
lo que se llama, lo que os decía 00:06:16
CSS en línea, vale 00:06:18
¿Qué ventaja o inconveniente 00:06:21
tiene este tipo de utilización o este tipo de uso de hojas de estilo, ¿vale? 00:06:24
Tiene un inconveniente y es que el primer inconveniente es que no separamos 00:06:30
las hojas de estilo como tal, es decir, la definición del estilo del contenido 00:06:35
porque lo estamos haciendo directamente sobre un archivo HTML, ¿vale? 00:06:40
Entonces no nos permite ese juego de separar las cosas, ¿vale? 00:06:43
Y además este cambio en el estilo solo se va a producir sobre ese elemento, ¿vale? 00:06:47
Por lo tanto, lo voy a poner aquí para que os quede. No es muy recomendado porque no estamos separando el contenido y la presentación. Eso en primer lugar. Y en segundo lugar, os pongo otro comentario. Solo lo usaremos cuando queramos cambiar el estilo a un elemento en concreto. 00:06:54
es decir, solo modificaremos el estilo de este elemento 00:07:20
y sin embargo no producirá ningún cambio sobre el resto de elementos 00:07:24
de ese mismo nivel, ¿vale? 00:07:28
entonces, ¿cómo añadimos ese estilo a este elemento en concreto? 00:07:31
pues muy sencillo, vamos a poner un espacio aquí, ¿vale? 00:07:36
y vamos a poner el atributo style, ¿vale? 00:07:39
y dentro de ese atributo style damos igual y ponemos entre comillas 00:07:43
y ahora aquí atundirían todas las declaraciones 00:07:47
Lo que hablábamos en el vídeo anterior del concepto de propiedad y valor, ¿vale? 00:07:49
Pues entonces yo, por ejemplo, aquí voy a cambiar el color de la letra. 00:07:55
Voy a poner color, ¿vale? 00:07:58
Dos puntos y fijaros que ya brackets directamente me da un montón de colores aquí que puedo utilizar, ¿vale? 00:08:01
Pues, por ejemplo, vamos a utilizar, yo qué sé, dark violet, ¿vale? 00:08:08
Entonces, fijaros que en cuanto lo he puesto me ha modificado el color de ese nivel 2, ¿vale? Sin embargo, no me modifica el color del resto de niveles 2 que hay en la página web, ¿vale? 00:08:13
Esto sería la primera forma de poner CSS, ¿vale? La siguiente forma sería utilizar un método que se llama, que ya he dicho, este primero se llama CSS en línea, el segundo método se llama CSS interno, ¿vale? 00:08:29
Y para eso nos vamos a ir a la cabecera, al set, ¿vale? Y justo debajo del title, ¿vale? Vamos a poner lo siguiente, vamos a poner la etiqueta style, ¿vale? Fijaros, la etiqueta de inicio y la etiqueta de cierre, ¿vale? 00:08:47
Y aquí dentro todo lo que pongamos en el style es lo que vamos a modificar, ¿vale? 00:09:06
Entonces, por ejemplo, vamos a poner el elemento que queremos modificar, 00:09:12
en este caso va a ser otra vez el h2, ¿vale? 00:09:16
Y vamos a poner, siguiendo la sintaxis que veíamos en el vídeo anterior, 00:09:19
abrimos llave, cerramos llave, tal que así, y ahora empezamos a añadir elementos. 00:09:23
En este caso yo voy a poner, por ejemplo, un color de fondo. 00:09:28
Pues pongo background color. ¿Vale? Dos puntos. Y fijaros que él ya, igual que antes, me recomienda, me ofrece colores. ¿Vale? Pues yo voy a escoger el coral, por ejemplo. ¿Vale? 00:09:30
Y fijaros que en este caso sí se han modificado todos los elementos H2, incluido el que modificamos en primer lugar, ¿vale? Por lo tanto, fijaros que utilizar este método nos permite hacer modificaciones en nuestro documento y hacer cambios en el color, ¿vale? 00:09:47
Aquí podríamos poner varios elementos. Por ejemplo, yo ahora podría poner aquí también un elemento h3, ¿vale? Y decir background color blue, ¿vale? Punto y coma, recuerdo, ¿vale? Y en el último es donde nos ponemos color, ¿vale? Pondría color white, ¿vale? 00:10:09
Y aquí veis cómo me ha cambiado el color del encabezado de nivel 3, de todos los encabezados de nivel 3, ¿vale? Entonces, este, recuerdo, os voy a poner el comentario, que se llama CSS interna, ¿vale? Y es importante acordarse que esto afecta a todos los elementos, ¿vale? A todos los elementos del documento, ¿vale? 00:10:35
Ahora, ¿cuándo utilizaremos este tipo de sistema? Solo lo vamos a utilizar cuando hagamos pruebas de estilo, ¿vale? Es decir, cuando queramos hacer pruebas sobre cómo queda un color o algo así, porque lo haremos sobre la misma web y será muy rápido, ¿vale? 00:11:02
Pero el método que vamos a seguir habitualmente no es este, ¿vale? Es otro que os voy a enseñar ahora mismo, ¿vale? Que es lo que se llama el método de hojas externas, ¿vale? 00:11:20
Entonces, para esto, lo que tenemos que hacer, o lo primero que tenemos que hacer, es definirnos una hoja de estilo, ¿vale? Entonces, lo que hacemos, muy sencillo, simplemente nos creamos un nuevo fichero, ¿vale? 00:11:32
Bueno, antes de nada tenemos que ver dónde lo vamos a crear, ¿vale? Como nosotros nos habíamos creado nuestra carpeta de CSS3, ¿vale? Que aquí dentro veis que ya tengo yo mi archivo aplicar.css.html, pues al igual que nosotros teníamos una carpeta para images, para imágenes, otra carpeta para resources, que era para los recursos, audio, vídeo, etcétera, etcétera, o documentos, ¿vale? 00:11:49
Vamos a tener una carpeta para las hojas de estilo, ¿vale? Entonces nos haremos una carpeta, crear nueva carpeta y la vamos a llamar CSS, ¿vale? Y dentro de esa carpeta será donde nos creemos nuestro documento, ¿vale? 00:12:12
¿Vale? Entonces, fijaros que aquí ya al crear yo la carpeta ahí, brackets ha detectado que dentro de CSS me ha creado esta carpetita, ¿vale? Donde ahora mismo no hay nada, ¿vale? Entonces, nosotros le vamos a dar dentro de, haciendo clic sobre CSS, le vamos a dar al botón derecho nuevo archivo. 00:12:29
Y fijaros que ya me aparece aquí sin título 2, ¿vale? Y lo vamos a llamar, por ejemplo, mi-estilos.css. Importante la extensión, ¿vale? Siempre .css y le damos a lente, ¿vale? 00:12:48
Y fijaros que ya se me ha creado aquí este archivito. Muy bien, pues entonces lo que vamos a hacer aquí es definir estilo, al igual que lo hacíamos antes, ¿vale? Le vamos a dar, por ejemplo, vamos a fijarnos que ahora mismo no tenemos ningún color para el encabezado 1, ¿vale? 00:13:07
Vamos a poner H1, ¿vale? Y dentro le vamos a poner un color que va a ser el rojo, ¿vale? Le vamos a poner también una posición, digamos, ¿vale? Le vamos a poner, perdón, un color de fondo, ¿vale? 00:13:26
background-color, le vamos a poner 00:13:46
este mismo, aqua, ¿vale? 00:13:49
va a quedar un poco hortera, pero bueno 00:13:51
la idea es que nos vayamos quedando 00:13:53
con la idea sobre cómo hacer 00:13:55
ese cambio de estilo, ¿vale? 00:13:57
¿vale? y 00:14:00
ahora por ejemplo, si os dais 00:14:01
cuenta, aquí tenemos el html 00:14:03
guardado, veis que también tenemos una 00:14:05
etiqueta de párrafo, ¿vale? esa etiqueta de párrafo 00:14:07
también se le puede modificar, entonces nos vamos 00:14:09
a ir aquí a la hoja de estilo y vamos a poner 00:14:11
vamos a modificar la hoja de párrafo, ¿vale? 00:14:13
Le vamos a poner un tamaño de letra font-size, ¿vale? Pues por ejemplo de 25 píxeles, ¿vale? Y le vamos a poner un color verde, ¿vale? Así, ¿vale? Y fijaros que cuando yo guardo no se produce ningún cambio sobre mi archivo, sin embargo sí ocurría cuando hacíamos el cambio utilizando CSS interno. 00:14:15
¿Esto por qué? Pues ocurre porque todavía no le hemos dicho a nuestro archivo HTML dónde está su hoja de estilos correspondiente, ¿vale? 00:14:41
Entonces, vamos a poner aquí un comentario que vamos a decir que vamos a utilizar el método de hojas de estilo externas, ¿vale? 00:14:52
Que como digo es el más utilizado, ¿vale? Y para utilizar esto simplemente lo que vamos a poner es la etiqueta link, ¿vale? Y con el atributo rel, ¿vale? Utilizando como argumento de este atributo vamos a poner stylesheet, ¿vale? 00:15:04
Es decir, hoja de estilos. Y vamos a poner href, al igual que cuando hacíamos un enlace, ¿vale? Y le vamos a decir que dentro de la carpeta CSS, coja el archivo misestilos.css, ¿vale? 00:15:25
Y ahora ya cerramos. Y fijaros que en cuanto he cerrado me he aplicado todos esos estilos, ¿vale? Y aquí veis lo que sería el resultado de mi web, ¿vale? Voy a ponerlo un poco más grande para que lo veáis. 00:15:42
Entonces veis que tenemos mi encabezado H1, mis encabezados H2, el encabezado H3 y todas las etiquetas, todos los párrafos que yo había hecho. 00:15:57
Esas son las tres formas de utilizar hojas de estilo. 00:16:13
Como ya digo, nosotros habitualmente en las prácticas o en las clases vamos a estar utilizando el segundo método, que es el de hojas de estilo interna. 00:16:17
Pero tenemos que saber que en nuestro proyecto final de la asignatura, en nuestro examen, siempre utilizaremos el método de hojas de estilo externa, ¿vale? 00:16:28
Muy bien, pues espero que haya sido útil. 00:16:40
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
267
Fecha:
12 de enero de 2021 - 19:05
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
16′ 43″
Relación de aspecto:
1.79:1
Resolución:
1096x614 píxeles
Tamaño:
203.08 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid