Saltar navegación

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

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

77 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, ahora vamos a continuar viendo también pseudoselectores, pero en este caso vamos a ver las pseudoclases, ¿vale? 00:00:03
Una vez más, pues nos vamos a ir a nuestra ventana de brackets, ¿vale? 00:00:12
Y vamos a ver si consigo que se vea el Chrome. 00:00:19
Ahí, ¿vale? 00:00:25
Yo ya me he creado aquí un archivo HTML que se llama pseudo-elementos.html, ¿vale? 00:00:27
Y vamos a hacer como siempre, nos creamos una estructura HTML5, cambiamos el idioma y ponemos pseudo-elementos en hoja de texto, ¿vale? 00:00:33
Y me voy a poner una carretera de nivel 1 con el mismo contenido, ¿vale? 00:00:46
Y bueno, esto va a ser muy sencillo, ¿vale? Los pseudo-elementos se hacen de una forma muy parecida a pseudo-clases, ¿vale? 00:00:54
Solo que se utilizan de una forma diferente, ¿vale? 00:01:07
Vamos a ir viéndolo con un ejemplo y lo vamos a ir entendiendo mejor. 00:01:12
Vamos a crearnos varios párrafos, ¿vale? 00:01:16
Vamos a crearnos varios párrafos. 00:01:21
En este caso nos vamos a crear unos cinco párrafos, por ejemplo. 00:01:23
Para crearnos esos cinco párrafos, recuerda, le ponemos p, multiplicamos por cinco, ¿vale? 00:01:27
Y le vamos a poner contexto Loren Ibsen, entonces ponemos el símbolo mayor que y escribimos Loren y le damos el tabulador, ¿vale? 00:01:32
Y ahí tenemos los cinco párrafos. 00:01:40
Entonces, el primer set de elementos que vamos a ver es aquel que modifica únicamente la primera letra de un párrafo, ¿vale? 00:01:44
Entonces, le vamos a dar a este párrafo un id y ese id va a ser primera letra, ¿vale? 00:01:54
Y ahora nos vamos a ir aquí al head, vamos a poner el elemento style y dentro vamos a utilizar el pseudo-elemento de primera letra, ¿vale? 00:02:00
Pseudo-elemento, primera letra, ¿vale? 00:02:12
Entonces, lo que vamos a hacer es elegir un párrafo, dentro de ese párrafo únicamente el que tiene el id de primera letra, ¿vale? 00:02:17
Y para utilizar pseudo clases utilizábamos los dos puntos, ¿vale? 00:02:26
Pues para utilizar pseudo elementos vamos a poner dos puntos dos veces, ¿vale? 00:02:31
Y en este caso vamos a utilizar el pseudo elemento llamado first letter, ¿vale? 00:02:36
Y aquí dentro vamos a poner, por ejemplo, un color rojo y un tamaño de letra de 30 píxeles, ¿vale? 00:02:42
Y fijaros que aparece la L marcada como una L capital, ¿vale? 00:02:51
Como una L mayúscula, en un color rojo, ¿vale? 00:02:57
Podríamos también modificar el estilo de la primera línea, ¿vale? 00:03:03
Nos vamos a ir al segundo párrafo y vamos a poner como id primera línea. 00:03:06
Y vamos a seguir un protocolo parecido, ¿vale? 00:03:12
En vez de ser el segundo elemento de primera letra, va a ser de primera línea. 00:03:18
Y en vez de poner, elegir el párrafo primera letra, vamos a elegir el párrafo primera línea, ¿vale? 00:03:22
Fijaros que como yo estoy manteniendo eso, me acaba de modificar la A de ese párrafo, ¿vale? 00:03:31
Pero como yo no quiero la primera letra, sino que quiero la primera línea, quito letter, ¿vale? 00:03:36
Y fijaros que ya me está proponiendo first line. 00:03:43
Le doy y me ha modificado la primera línea, ¿vale? 00:03:47
Fijaros que esto es curioso porque si aumentáis el tamaño de la ventana, la línea también aumenta. 00:03:52
Por lo tanto, digamos que él cambia el estilo de la primera línea que se vea en pantalla, en el dimensionamiento del navegador. 00:04:15
Y luego vamos a ver dos elementos que van a ser, que se van a llamar 00:04:24
Dos pseudo-elementos que son after y before, o before y after 00:04:35
Que van a servir para colocar contenido antes o después en un determinado caso 00:04:43
Entonces, para eso vamos a hacer una cosa 00:04:48
os vais a ir a Pixabay, ¿vale? Y dentro de Pixabay os vais a descargar una imagen, ¿vale? 00:04:53
Una imagen de error. Yo os voy a enseñar la que yo me he descargado. Dejadme un segundito. 00:05:03
Vale. Estáis viendo aquí mi ventana del navegador, ¿vale? Yo me he creado dentro de la carpeta 00:05:17
donde tengo todos los códigos que estamos haciendo, me he creado una carpeta que se 00:05:23
llama images vale y dentro de esta carpeta 00:05:26
me he descargado una imagen como la que estáis viendo que es una imagen de 00:05:31
error o algo así y lo importante es que modifique es el tamaño para que aparezca 00:05:36
para que sea de 20 x 20 esto en windows lo podéis hacer de una forma muy rápida 00:05:42
utilizando el paint vale para utilizar el paint simplemente le 00:05:48
Le dais al botón derecho en la imagen y le dais a editar. 00:05:52
O si no, también podéis darle aquí donde aparece... 00:06:00
Le dais aquí, seleccionáis la imagen y aquí arriba donde marca mi cursor, si le dais aparecerán todos los programas que tenéis instalados. 00:06:03
¿Vale? Y le podéis dar al pane 00:06:31
¿Vale? Si le dais 00:06:34
Al pane 00:06:36
Os lo voy a poner para que 00:06:36
Para que lo veáis 00:06:39
¿Dónde está? 00:06:40
Aquí 00:06:44
¿Vale? Ahí estáis viendo el pane 00:06:44
Veis la imagen ¿Vale? 00:06:49
Entonces lo que le daréis sería esta opción 00:06:52
Que pone cambiar tamaño 00:06:54
Y dándole a cambiar tamaño 00:06:55
O aparece la opción de cambiar por porcentaje 00:06:58
por píxeles, ¿vale? Pues cambiéis por píxeles 00:07:02
y ponéis 20 por 20, ¿vale? 00:07:04
Simplemente 00:07:07
simplemente eso, ¿vale? 00:07:08
Entonces, yo ya tengo esa 00:07:10
imagen como decía ahí 00:07:12
y ahora lo que vamos a ver es cómo 00:07:13
ponerla antes de un 00:07:16
párrafo. Entonces, 00:07:18
voy a poner a este párrafo de aquí 00:07:20
le voy a poner una clase, ¿vale? 00:07:22
Para poder reutilizar 00:07:25
este 00:07:26
este código, ¿vale? 00:07:27
entonces voy a poner aquí 00:07:30
error, ¿vale? 00:07:32
recuerdo que para poner clase poníamos punto 00:07:35
ponemos 00:07:37
dos puntos y voy a poner before 00:07:38
¿vale? para que aparezca antes del párrafo 00:07:41
abro y cierro llave y lo que voy a poner va a ser 00:07:44
la propiedad content 00:07:47
¿vale? y dentro voy a poner url 00:07:51
y aquí es para poner imágenes, ¿vale? 00:07:53
para poner la imagen en sí 00:07:56
entonces elijo dentro de images 00:07:57
mi imagen que se llama error.png 00:07:59
¿vale? 00:08:03
voy a poner otra propiedad 00:08:04
que es vertical align 00:08:06
¿vale? que esto es para la alineación vertical 00:08:08
que ya lo veremos más adelante 00:08:11
y voy a poner middle para que vaya en el centro 00:08:12
y la separación 00:08:14
desde la derecha 00:08:17
¿vale? 00:08:19
que sea de 3 píxeles 00:08:21
¿vale? 00:08:23
al poner esto 00:08:24
si actualizáis 00:08:26
Ya veréis que aparece la imagen que vosotros habéis puesto ahí, ¿vale? 00:08:28
Si no reducís la imagen a 20x20, aquí va a aparecer la imagen en su tamaño real, ¿vale? 00:08:33
Y puede ser que no quede bien, ¿vale? 00:08:39
Entonces, justo aquí debajo de ese elemento class, ¿vale? 00:08:43
Después del elemento del inicio de la etiqueta del párrafo, vamos a poner la etiqueta spam, ¿vale? 00:08:48
Pero sin contenido ni nada. 00:08:55
Recuerdo que la diferencia entre poner un span y poner, por ejemplo, un párrafo es que el span iba poniendo uno al lado del otro, ¿vale? 00:08:57
Sin embargo, los párrafos iban hacia abajo, ocupaban todo el ancho de la página, ¿vale? 00:09:04
Entonces, lo que nosotros vamos a hacer ahora es que después de esa etiqueta span aparezca un texto, ¿vale? 00:09:09
Entonces, nos vamos a ir y vamos a poner error de nuevo, ¿vale? De la clase error. 00:09:22
Y ahora, queremos que después de ese spam, por lo tanto ponemos espacio spam, dos puntos, after, ¿vale? 00:09:32
Y ahora, como contenido, queremos que aparezca un texto, pues ponemos entre comillas, atención, dos puntos, ¿vale? 00:09:40
Ese texto queremos que aparezca en un color que va a ser rojo 00:09:49
Queremos que tenga un tamaño que va a ser de 20 píxeles, ¿vale? 00:09:54
Y vamos a ponerle font-weight, ¿vale? 00:10:01
Que es para modificar la anchura del texto y lo vamos a poner en bold que es negrita, ¿vale? 00:10:04
Y fijaros como me aparece justo después de la imagen, me aparece ese elemento, atención, ¿vale? 00:10:11
Y fijaros si es curioso que yo puedo seleccionar todo el texto del párrafo, pero no puedo seleccionar este contenido, ¿vale? 00:10:19
De atención, porque este contenido pertenece a la hoja de estilo, no pertenece al contenido de la web, ¿vale? 00:10:27
Y lo bueno de esto es que yo, con ese párrafo error que ya tengo ahí creado, yo podría irme ahora al último párrafo, por ejemplo, y añadirlo a esa clase, ¿vale? 00:10:34
Decir que también forma parte de la clase error, ¿vale? 00:10:45
Y le vuelvo a añadir aquí, si solo le pongo el error, solo me aparece el símbolo, pero si le pongo el error y luego le pongo el spam, pues me aparecen las dos cosas, ¿vale? 00:10:48
¿Ok? 00:11:00
Esto es todo en cuanto a pseudo clase y pseudo elemento, ¿vale? 00:11:02
Espero que os haya quedado claro. 00:11:09
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
77
Fecha:
26 de enero de 2021 - 19:40
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
11′ 12″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
36.89 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid