Saltar navegación

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

Final-HTML-Estilos - 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 22 de febrero de 2021 por Julio G.

100 visualizaciones

Más información Transcripción

Descargar la transcripción

Vamos ahora a cambiar los estilos de la página a través de la hoja de estilos de la plantilla que estamos utilizando. 00:00:00
Primero vamos a fijarnos un poco en la estructura de esta página. 00:00:07
Vemos que body engloba todo lo que es el contenido de la página, 00:00:12
pero observamos que después se ha obtenido un contenedor denominado container 00:00:16
que integra también todo 00:00:21
o sea, integra todo el contenido dentro de la página 00:00:25
pero dentro del body, a su vez, es decir, puedo cambiar 00:00:29
opciones del body de forma independiente a las opciones 00:00:32
que cambie de esta clase. Después encontramos 00:00:37
un encabezado, esta parte de aquí, que incluye solamente 00:00:41
el H1 y es la cabrera, encontramos 00:00:45
un contenedor denominado 00:00:49
nav, un contenedor denominado article 00:00:53
que incluye lo que sería 00:00:57
la parte central del contenido y por último 00:01:01
tendríamos, perdón, esa sería la tabla que hemos encontrado 00:01:05
un contenedor denominado footer, es decir, nuestra página 00:01:09
está construida por 00:01:13
Está constituida por el body, que es el conjunto completo de todos los elementos, un contenedor global que incluye dentro el header, el encabezado, la barra de navegación, el article, que es el contenido central, y el footer. 00:01:17
Vale, pues esos van a ser los elementos HTML que voy a tener que localizar dentro de la hoja de estilos para modificar sus propiedades. 00:01:35
Para ver la hoja de estilos, si trabajamos con Blue Grifo, lo más cómodo es habilitar un panel en el que van a aparecer las hojas de estilos asociadas a este documento HTML. 00:01:45
Aquí aparece. 00:01:58
Y puedo trabajar desde esta opción. 00:01:59
Por ejemplo, voy a cambiar el color del header y del footer. Vamos a buscar esos elementos dentro de la hoja de estilos. 00:02:02
Vamos a ver qué propiedades tienen. Aquí nos encontramos. Ambos tienen las mismas propiedades, por eso aparecen nombrados ambos elementos y separados por coma. 00:02:17
Y vemos que tienen un color de letra en blanco y un color de fondo en negro. Voy a modificar ese color de fondo. 00:02:28
Bueno, para elegir el color que quiero utilizar podemos buscar en internet, por ejemplo, múltiples páginas que nos muestran los códigos para los diferentes colores. 00:02:35
Por ejemplo, yo ya he buscado este color, lo voy a copiar y lo voy a utilizar para, como os decía, los elementos encabezado y pie o header y footer. 00:02:51
Entonces voy a cambiar la propiedad background color, control V para pegar, y si ejecuto los cambios, 00:03:06
vemos que inmediatamente el HTML 00:03:16
coge los estilos de la página y los modifica 00:03:20
muy bien, lo siguiente que quiero cambiar 00:03:24
es el color del 00:03:28
elemento nav, que sería la barra de navegación 00:03:31
vale, pues vamos a ir a los estilos, vamos a buscar las propiedades de este 00:03:35
elemento, aquí lo vemos, y en principio 00:03:40
nav no tiene ningún color 00:03:43
probablemente, realmente 00:03:47
el color que afecta a la verdadera navegación 00:03:51
sea el color que está establecido para el fondo de los elementos 00:03:55
ul, si os fijáis, realmente 00:03:59
el nav está compuesto por un 00:04:03
elemento ul que incluye todos los ítems de navegación 00:04:07
Luego va a ser ese color el que debemos modificar. Aquí lo tenemos y vamos a modificarlo. Bueno, he elegido un color y si ejecuto los cambios, pues ahí veríamos, efectivamente ha cogido el color deseado. 00:04:11
Vale, como vemos los elementos ul cambian su aspecto al colocar el cursor encima, al colocar el ratón encima. 00:04:40
Recordad que eso era una pseudo clase que quedaba definida por la palabra dos puntos over. 00:04:51
Es decir, aquí tenemos los ítems de navegación que quedan definidos por el elemento Lee, que a su vez son enlaces y que cuando están con el ratón por encima, es decir, en la posición hover, pues están cambiando a este color. 00:05:00
Podríamos modificar ese color o no, según nos interese. 00:05:17
Yo de momento lo voy a dejar así, ¿vale? 00:05:21
Y lo que quiero cambiar es el fondo de toda la página del body. 00:05:24
Bien, como vemos el elemento body no aparece dentro de la lista que tenemos de elementos dentro de la hoja de CSS, entonces voy a ponerlo yo como selector CSS y le voy a poner propiedades. 00:05:28
propiedades, por ejemplo, le voy a poner 00:05:46
un color de fondo 00:05:48
negro 00:05:51
vale, bueno, cuidado porque 00:05:54
me he dado cuenta que BlueGryphon en ocasiones 00:06:03
no coge inmediatamente las propiedades 00:06:05
que estamos aplicando a los estilos, voy a comprobar que esté bien 00:06:08
pero ya me he dado cuenta 00:06:11
me ha pasado en alguna ocasión que este programa 00:06:14
no coge a la primera esos colores 00:06:16
o sea, esas modificaciones de las propiedades de la hoja de estilos. Vamos a comprobar en la vista 00:06:21
del navegador si sí que lo ha cogido 00:06:25
y efectivamente aquí comprobamos que ha puesto todo el body 00:06:28
de color negro. Esto me 00:06:33
tiene un inconveniente que es que el body ha incluido todos los elementos 00:06:36
y claro, como teníamos esta parte 00:06:41
de aquí con el contenido con el color de letra negro, pues no se va a ver 00:06:45
lo que voy a hacer es poner un fondo blanco para esta parte de aquí, recordad 00:06:49
que era un contenedor llamado artigo 00:06:53
entonces vamos a ir a ese elemento 00:06:57
aquí lo encontramos, dentro del 00:07:00
documento CSS, vale, y vamos 00:07:04
a añadirle, voy a copiar, control c, vamos a añadirle 00:07:09
un color, en este caso blanco, para mantener, podríamos poner cualquier otro color, pero 00:07:13
lo hemos puesto, ahora sí nos ha cogido las propiedades, vamos a ver si también en la 00:07:23
vista del navegador, al recargar la página vemos que efectivamente así es. Bueno, como 00:07:28
he puesto un fondo negro, la propiedad hover de los elementos de los ítems de la barra 00:07:35
navegación, pues no quedan mal, en negro, lo voy a dejar así 00:07:40
bien, pues como veis he cambiado algunas de las propiedades 00:07:43
y bueno, voy a hacer alguna otra modificación, por ejemplo vamos a quitar 00:07:47
a los enlaces que aparecen aquí, le vamos a quitar 00:07:52
el subrayado y vamos a poner un borde 00:07:56
un borde por ejemplo a las imágenes, voy a ir a los estilos 00:08:00
no hay ninguna, no hay ningún selector 00:08:06
de imagen, luego lo voy a crear y voy a añadir la propiedad 00:08:10
borde y le vamos a dar un valor de 6 píxeles 00:08:19
y el color que vamos a utilizar 00:08:25
va a ser por ejemplo el del fondo del encabezado 00:08:30
y el pie, para que quede bien 00:08:34
vale 00:08:39
comprobamos y ahí veríamos que ha aparecido ese borde 00:08:41
sobre la imagen. Y ahora vamos a ir a los enlaces, a estos enlaces, y bueno, si aplicamos 00:08:47
el estilo sobre, queremos los enlaces de dentro de la tabla, lo que haremos es seleccionar 00:08:56
el elemento tabla e indicar que será un enlace dentro de la tabla. Tiene un enlace anidado 00:09:08
en la tabla los que queremos utilizar 00:09:17
la propiedad testDecoration 00:09:22
con el valor null. 00:09:25
Si hacemos eso, vemos que ha desaparecido 00:09:31
el subrayado típico que aparece de forma 00:09:35
predeterminada siempre en los enlaces en los navegadores. 00:09:37
Vamos a volver a comprobar el aspecto 00:09:41
de nuestra página y bueno, 00:09:43
pues lo vamos a dejar así. 00:09:50
Podríamos hacer tantas modificaciones 00:09:52
como queramos, consultando las diferentes propiedades 00:09:55
para los estilos CSS. Todo lo que queráis se podría modificar 00:09:58
y por supuesto lo voy a tener en cuenta cuantas más modificaciones se hagan. 00:10:03
Lo que vamos a hacer ahora es utilizar las tipografías de Google 00:10:08
para modificar los estilos de las letras. Lo voy a hacer en un 00:10:11
vídeo, en el siguiente vídeo. 00:10:15
Subido por:
Julio G.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
100
Fecha:
22 de febrero de 2021 - 13:08
Visibilidad:
Público
Centro:
IES LA CABRERA
Duración:
10′ 20″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
82.90 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid