Saltar navegación

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

CSS3 - Selectores - 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 19 de enero de 2021 por Fernando M.

216 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues ahora vamos a ver selectores en hojas de estilo, en CSS. Un selector es simplemente cómo identificar un componente en una web y cómo darle estilo, ¿vale? Y vamos a ver diferentes formas de identificar esos componentes dentro de una página web, ¿vale? 00:00:00
Entonces, como siempre digo, nos vamos a ir a nuestro Brackets, ¿vale? 00:00:17
Yo tengo aquí abierto Brackets y también tengo abierto el navegador, ¿vale? 00:00:22
He creado un archivo que como veis aquí se llama selectores.html, ¿vale? 00:00:27
Así es como lo tendréis que llamar vosotros. 00:00:35
Y bueno, vamos a empezar como siempre hacemos, poniendo html 2.5 y le damos al tabulador, ¿vale? 00:00:39
Y ahora aquí, pues, lo que hacemos, le cambiamos al idioma, lo ponemos como español, y el título vamos a poner selectores en ATSS3, ¿vale? 00:00:47
Y lo primero que vamos a hacer es crearnos una estructura de web sencillita, ¿vale? 00:00:59
Voy a empezar con un encabezado H1, y luego con un par de párrafos. 00:01:03
Recuerdo que para poner texto aleatorio ponemos la palabra lorem terminado en M, ¿vale? 00:01:13
Y le damos al tabulador y como digo voy a poner un par de párrafos, esto es, ahora voy a poner un encabezado de nivel 2, ¿vale? 00:01:18
Y lo mismo, me voy a poner un par de párrafos, 1 y 2 y por último me voy a poner un encabezado de nivel 3 con la misma estructura, ¿vale? 00:01:31
Un par de párrafos a la 2, ¿vale? 00:01:51
Entonces, una vez que ya tenemos esto, que esto sería la estructura de una web súper, súper simple, ¿vale? 00:01:57
Vamos a empezar a aplicar estilo y vamos a empezar a ver lo que son los selectores, ¿vale? 00:02:05
Entonces, en primer lugar, recuerdo que teníamos tres formas de poner estilo, hojas de estilo, una era utilizando el estilo en línea, ¿vale? 00:02:11
Que era simplemente modificar las etiquetas, ¿vale? Ya dijimos que eso no es recomendado. 00:02:21
luego teníamos el estilo interno 00:02:26
que es el que vamos a utilizar aquí 00:02:29
que lo utilizamos porque es para hacer pruebas 00:02:30
y luego tenemos utilizando hojas de estilo en archivos externos 00:02:33
que es lo que yo recomiendo que se haga, ¿vale? 00:02:36
aquí lo voy a hacer en el mismo sitio 00:02:38
para que podamos ver los cambios de forma inmediata en la web, ¿vale? 00:02:40
entonces, nos vamos a venir aquí al head, ¿vale? 00:02:45
y justo debajo de title 00:02:48
voy a poner la etiqueta style, ¿vale? 00:02:49
le doy al tabulador y fijaros que ya me aparece 00:02:53
el apertura y el cierre, ¿vale? 00:02:55
Y ahora aquí dentro es donde yo voy a definir esos selectores, ¿vale? 00:02:59
Entonces, en primer lugar os voy a explicar cómo se ponen comentarios en hojas de estilo, ¿vale? 00:03:05
Recuerdo que si queríamos poner el comentario en HTML era utilizando esta estructura, ¿vale? 00:03:10
Es decir, signo de menor, exclamación y dos guiones y pondría esto es un comentario. 00:03:16
Y luego poníamos otra vez los dos guiones y el símbolo de Mallorca, ¿vale? 00:03:22
Sin embargo, en hojas de estilo se hace un poco diferente. 00:03:27
Se hace poniendo la barra del 7, ¿vale? 00:03:30
Y asterisco, y luego asterisco y la barra del 7. 00:03:34
Y todo lo que vaya aquí dentro es un comentario, ¿vale? 00:03:38
Entonces, lo primero que vamos a ver son los selectores de etiquetas. 00:03:42
¿Vale? 00:03:47
Selectores de etiquetas. 00:03:48
¿Una etiqueta qué era? 00:03:49
Una etiqueta era, por ejemplo, h1, que era la etiqueta p, h2, que era la etiqueta table, la etiqueta tb, ¿vale? 00:03:50
Todo esto eran etiquetas, ¿vale? 00:03:57
Nosotros nos vamos a venir aquí y, por ejemplo, si queramos modificar la etiqueta h1, pues yo pondría h1 y luego abrimos y cerramos llave, ¿vale? 00:03:59
Al poner abrir llave ya automáticamente brackets hace el cierre, ¿vale? 00:04:09
Y hago pulso la tecla Enter para poner el estilo que queremos poner, ¿vale? 00:04:14
En este caso lo que yo voy a hacer es cambiar el color de fondo de ese título, ¿vale? 00:04:23
Para eso utilizo la propiedad background color, ¿vale? 00:04:27
Y le voy a poner como color, pues por ejemplo, el amarillo, ¿vale? 00:04:33
Fijaros que automáticamente me sale ese color amarillo, ¿vale? 00:04:42
Luego podemos utilizar otra etiqueta, por ejemplo, para cambiar el tamaño de fuente de los párrafos, ¿vale? 00:04:46
Pues yo pongo mi etiqueta P, utilizo el selector de etiqueta P y pongo font-size, ¿vale? 00:04:52
Y le voy a poner 20 píxeles, ¿vale? 00:04:59
Y fijaros como el tamaño de la fuente ha aumentado, ¿vale? 00:05:03
Esto lo podríamos hacer también para etiquetas H2, etiquetas H3, etc, etc, etc, ¿vale? 00:05:08
Luego, recuerdo, vamos a ver ahora otro tipo de etiqueta, de forma de selectores, perdón, ¿vale? 00:05:16
Que van a ser los selectores por ID, ¿vale? 00:05:24
Entonces, vamos a imaginarnos que yo pongo en este párrafo, este párrafo de aquí, le voy a poner un ID, ¿vale? 00:05:37
Recordad que el ID era el identificador que nosotros poníamos para los párrafos. 00:05:49
Entonces, vamos a ponerle yo a este párrafo de aquí, quiero que tenga un color rojo, ¿vale? La letra, y le voy a poner rojo, ¿vale? Y ese va a ser su identificador, ¿vale? 00:05:53
Pues entonces, yo ahora podría decir que poniendo la tecla almohadilla y diciendo rojo, es decir, el identificador rojo, que tenga un color rojo, ¿vale? 00:06:10
Entonces, como yo a este elemento le he puesto el identificador rojo, fijaros que solo me cambia en ese elemento, ¿vale? 00:06:32
Esto puede tener muchas utilidades, ¿vale? ¿Por qué? Pues porque nosotros tenemos la posibilidad de seleccionar un elemento en concreto al que le queramos cambiar el estilo, ¿vale? 00:06:41
Vale, eso en cuanto a selectores ID, ¿vale? Eso en cuanto a selectores ID. 00:06:59
Ahora vamos a ver otro tipo de selectores, ¿vale? 00:07:05
Recuerdo que el id es un identificador único, que no solo debemos de poner a más párrafos ni a más elementos, ¿vale? 00:07:09
Pero luego tenemos otro tipo de selector, que es el selector class, ¿vale? 00:07:15
Selector class. 00:07:24
Esto significa que nosotros englobamos o agrupamos elementos en función de una clase, ¿vale? 00:07:25
Entonces, vamos a coger, por ejemplo, y a este párrafo de aquí le vamos a poner el clas verde, ¿vale? Y se lo vamos a poner también a este de aquí, clas verde, ¿vale? 00:07:31
Fijaros que estos son párrafos, ¿vale? Y se lo vamos a poner también al encabezado 3, ¿vale? Clas verde, ¿vale? 00:07:48
Y yo ahora me vengo aquí y lo que voy a hacer es, en primer lugar, seleccionar un elemento de esa clase, ¿vale? 00:08:01
Entonces, ¿qué vamos a hacer? 00:08:14
En primer lugar, voy a elegir, si yo quisiera seleccionar un elemento class, ¿vale? 00:08:16
A diferencia que los elementos ID que poníamos en la almohadilla, aquí lo que haremos será poner un punto, ¿vale? 00:08:23
Entonces yo pondría punto verde, ¿vale? 00:08:27
Eso ya me estaría identificando esa clase, ¿vale? Y yo aquí pondría, por ejemplo, color dos puntos, color dos puntos gris, ¿vale? Entonces, fijaros que ya se me ha cambiado automáticamente el color de los dos párrafos que yo había marcado y el del encabezado, ¿vale? 00:08:29
Pero ahora nosotros podemos hacer elementos más complejos, ¿vale? O sectores más complejos. ¿Por qué? Porque nosotros podemos escoger, por ejemplo, vamos a imaginarnos que yo quiero cambiar el color de fondo de los elementos verde de P, ¿vale? 00:08:47
O quiero hacer la letra más pequeña, ¿vale? Por ejemplo, entonces yo diría, cógeme de los elementos P aquellos que tienen la clase verde, ¿vale? 00:09:09
Es decir, esto que yo acabo de hacer, esta primera opción, ¿vale? Lo voy a poner aquí entre comentarios, sería modifica la clase verde, ¿vale? 00:09:24
Y esto ahora modifica sólo los elementos P de la clase verde, ¿vale? 00:09:36
Entonces yo a este, por ejemplo, elemento P le voy a cambiar el tamaño de la letra, ¿vale? 00:09:46
Por ejemplo, y se lo voy a poner a 10, ¿vale? 00:09:52
10 piso, ¿vale? 00:09:58
Y fijaros que sólo me ha modificado los elementos P de la clase verde, ¿vale? 00:10:00
Y de la misma forma podría modificar, voy a poner aquí un comentario, modifica solo los elementos h3 de la clase verde, ¿vale? Pues de la misma forma pondríamos h3.verde, ¿vale? 00:10:07
Y ahora aquí, pues, por ejemplo, le cambiamos el color a white, ¿vale? Pongo punto y coma porque voy a poner varias propiedades, varias declaraciones, voy a poner un color de verde, ¿vale? Y voy a poner un tamaño de letra mayor, ¿vale? 00:10:23
Y ya para terminar, otra cosa que es importante que sepáis es la posibilidad de tener varias clases dentro de un mismo elemento, ¿vale? 00:10:47
Para eso, por ejemplo, nos vamos a crear justo al final de la web, ¿vale? Nos vamos a crear un botón, ¿vale? 00:11:08
Bueno, vamos a crear un botón, etiqueta button, ¿vale? 00:11:16
Y vamos a poner pulsar aquí, ¿vale? 00:11:22
Fijaros que aparece el botón normal. 00:11:25
Si yo a este botón le asigno la clase verde, fijaros que automáticamente me pone letra verde, ¿vale? 00:11:28
¿Por qué? Pues porque nosotros habíamos dicho que la clase verde tuviera un color de fuente verde, ¿vale? 00:11:36
Pero, como decía, podemos tener varias, un elemento puede pertenecer a varias clases, ¿vale? 00:11:42
Entonces, si yo, por ejemplo, tengo ese elemento verde ahí, ¿vale? 00:11:50
Y yo aquí añado otra clase que voy a poner, por ejemplo, destacado, ¿vale? 00:11:53
Destacado. 00:12:00
Y lo que hago en esta clase es que pongo un tamaño de letra más grande, onSize igual a 30, ¿vale? 00:12:01
Yo ahora puedo decirle que el botón pertenezca a la clase verde y para que pertenezca también a la clase destacado simplemente espacio y pongo el nombre de la nueva clase, destacado, ¿vale? 00:12:11
Y fijaros que automáticamente aparece el botón con un tamaño de fuente mayor, ¿vale? 00:12:25
esto es muy importante que lo dominemos 00:12:33
¿por qué? porque va a dar 00:12:36
es lo que va a hacer que agilicemos en el diseño 00:12:37
de los estilos de la web ¿vale? 00:12:40
porque así no vamos a tener que estar modificando 00:12:42
uno a uno cada uno de los elementos 00:12:44
¿vale? 00:12:46
entonces es importante que 00:12:48
tengamos organización, que metamos 00:12:50
elementos dentro de clases, que le demos 00:12:52
identificadores, etcétera 00:12:54
¿vale? 00:12:56
bueno, espero que os haya quedado 00:12:58
claro como utilizan los selectores, aún no 00:13:00
Estamos viendo muchas propiedades, muchas formas de cambiar el estilo de la web, 00:13:02
pero lo iremos viendo poco a poco. 00:13:07
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
216
Fecha:
19 de enero de 2021 - 23:38
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
13′ 09″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
38.88 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid