Saltar navegación

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

CSS Pseudoelementos y pseudoclases - 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 28 de diciembre de 2020 por Amadeo M.

47 visualizaciones

Más información Transcripción

Descargar la transcripción

Otro elemento importante son las pseudo clases y pseudo elementos. Se refieren a elementos que diferencian un objeto dentro de la página HTML según su estado, según si estamos encima de él, según donde aparece, etc. 00:00:00
Vamos a ver una lista de ellos, o unos cuantos de ellos, los más importantes. El primero de ellos es First Child, el primer hijo, el primer elemento contenido nuestro. Entonces, si yo selecciono dentro de div el primer párrafo que hay, y ese lo pongo en rojo, pues te obtendría esta salida. ¿De acuerdo? Esta sería la salida que tendríamos. 00:00:17
Bien, más tenemos por ejemplo en el caso de los enlaces 00:00:41
Los pseudo clases en caso de enlaces tenemos link o visitado, ambas de estas 00:00:46
Entonces link permite establecer características para aquel enlace que todavía no ha sido visitado 00:00:52
Y visite a los que si han sido visitados 00:00:59
Entonces pues en función de esa situación vamos a poner unos colores u otros 00:01:03
O poner unas características u otros 00:01:08
también es muy curioso uno que vamos a ver después 00:01:11
posteriormente que es Hover 00:01:14
que es para cuando estamos encima de ellos trabajando 00:01:15
¿de acuerdo? 00:01:19
bueno, vemos aquí más características 00:01:21
no me quiero extender en esta parte 00:01:23
porque no tiene mayor interés 00:01:26
a este me refería yo antes, a Hover 00:01:28
especificamos el aspecto de elementos 00:01:30
sobre el que se encuentra el ratón 00:01:32
y esto se aplica muy a menudo 00:01:34
por ejemplo en este enlace, cuando estemos sobre él 00:01:35
va a cambiar lo que estamos visualizando ahí 00:01:37
va a cambiarse, va a poner de fondo negro 00:01:40
y color blanco 00:01:43
como podemos apreciar 00:01:44
¿vale? 00:01:47
active lo que permite 00:01:49
especificar es el aspecto de un elemento 00:01:50
cuando se hace click sobre él 00:01:53
y se mantiene el aspecto sobre él 00:01:55
entonces yo aunque pase por encima no cambia 00:01:57
cliqueo 00:01:59
y mientras que estoy con el botón 00:02:01
apretado pues se mantiene 00:02:03
cuando levanto pues cambia 00:02:04
y focus 00:02:06
no sé si me ha saltado alguno 00:02:08
active, focus 00:02:11
lo que nos permite es 00:02:12
especificar el aspecto de un elemento 00:02:14
que toma en ese momento el foco 00:02:16
puede tomarlo bien porque 00:02:18
pongo el ratón encima 00:02:20
y vemos que en este caso el borde ha cambiado 00:02:21
o bien con el tabulador voy a pasar 00:02:25
al siguiente campo y vemos 00:02:27
cómo va cambiando 00:02:28
existe otra clase que tiene que ver con el idioma 00:02:29
lang 00:02:33
y entonces permite establecer 00:02:33
por ejemplo el mismo párrafo en dos idiomas 00:02:36
entonces aquí 00:02:38
podremos aplicar por ejemplo 00:02:40
los quotes o los 00:02:42
caracteres de cita 00:02:44
diferentes en un idioma 00:02:46
en este caso cuando es español 00:02:49
lo ponemos con estos dos menores y estos dos mayores 00:02:50
y cuando es en inglés 00:02:53
con la comilla doble, por ejemplo 00:02:54
más pseudo-elementos 00:02:56
la primera línea o la primera letra 00:02:58
no hace falta explicar mucho lo que es 00:03:01
entonces por ejemplo aquí decimos que la primera 00:03:03
línea y vemos además que aparece 00:03:05
con dobles 00:03:07
dos puntos 00:03:08
se convierte a mayúsculas 00:03:11
o la primera letra 00:03:13
podemos hacer cosas tan bonitas como esta, por ejemplo 00:03:14
incluso mejorar esto con otro tipo 00:03:17
de letra, aquí en la L, etc, etc 00:03:19
y sin hacer nada en nuestro 00:03:21
contenido, nuestro contenido 00:03:23
simplemente tendrá la primera 00:03:25
vamos a verlo, como seguramente tenemos 00:03:26
la fuente del marco, lo podemos 00:03:29
ver, aquí lo estamos viendo perfectamente 00:03:31
Aquí aparece que es un párrafo normal y corriente, normal y corriente, y sin embargo el aspecto es bastante interesante. 00:03:33
En este caso, por ejemplo, un párrafo, su primera letra va a ser este. 00:03:43
Es verdad que si hay una imagen, pues esta no la modifica, ¿de acuerdo? 00:03:48
Podemos incluso, aquí es algo que ya veremos más despacio, pero vemos cómo hacemos flotar la imagen a la derecha. 00:03:53
Entonces vemos aquí la imagen como está ahí arriba a la derecha 00:04:02
Entonces en este caso podríamos ponerlo a la izquierda y sí funcionaría la L 00:04:06
Para esto estamos contando este ejemplo 00:04:11
Y si el primer carácter no es alfanumérico 00:04:13
Pues sí se aplica a todo hasta que aparece un carácter alfanumérico 00:04:20
Después tenemos otros pseudoelementos que son before y after 00:04:25
Before por ejemplo permite establecer algo, una característica antes de lo que estamos seleccionando 00:04:29
Tenemos la clase cuidado dentro de un párrafo y antes quiero poner la palabra aviso 00:04:36
Con un tema que esté como en negrita y que tenga que ser subrayado 00:04:42
Pues aquí podemos ver aviso antes y con esas características 00:04:49
Si viéramos el código, el código de aquí, lo único, vamos a ver la fuente del marco, lo único que estamos poniendo es que la clase se ha cuidado, nada más, todo lo demás lo pone él simplemente de esta manera, con esta clase, o podemos por ejemplo, escrito por Barto, entonces nosotros podemos poner después de este párrafo, escrito por Barto. 00:04:53
También podemos incluir una imagen 00:05:18
Antes de algo pongamos esta imagen 00:05:21
Llamamos a la URL con la dirección de esa imagen 00:05:23
Mucho cuidado, y eso sí es importante 00:05:27
Es que cuando ponemos content, o bien ponemos URL o bien ponemos texto 00:05:31
Pero lo que nos admite es meter código HTML 00:05:35
No podemos poner enfatizado aviso 00:05:38
Simplemente lo pondría tal cual esa información 00:05:41
Con lo cual no nos vale para nada 00:05:44
Mención aparte merecen los contadores 00:05:46
Ya hemos visto que por ejemplo en las listas ordenadas 00:05:50
Automáticamente se puede indicar un orden de las cuestiones 00:05:53
Pero podemos nosotros establecer nuestra propia lista 00:05:57
Entonces podemos decir por ejemplo 00:06:01
Que antes de cada párrafo 00:06:03
Pongamos un contador 00:06:06
El cual se llama cuenta párrafos 00:06:08
Y irlo incrementando 00:06:11
Entonces seríamos 1, 2, 3, 4 y 5 00:06:13
En este caso, además, podemos resetearlo 00:06:16
Vemos que se resetea cada vez que aparece la etiqueta PRE 00:06:21
Con lo cual aquí no lo hemos visto porque solo hay esta información 00:06:24
Pero aquí que hemos puesto esto y esto 00:06:27
Vemos que se resetea perfectamente el contador 00:06:29
Podemos empezar incluso desde valores distintos 00:06:33
O incrementando de 10 en 10 00:06:39
Como es el caso actual 00:06:40
e incluso para dejarlo un poco más elegante 00:06:42
poner el contador y punto y un espacio 00:06:46
el contador, punto y un espacio 00:06:50
también a este contador le podemos indicar 00:06:52
cómo lo queremos ver si numérico 00:06:55
si por ejemplo en números romanos en mayúsculas 00:06:57
estamos viéndolo en números romanos 00:07:00
en letras alfabéticas dependiendo incluso del nivel 00:07:02
aquí estamos reseteando a nivel h1 y a nivel h2 y en p 00:07:07
entonces estamos reseteando 00:07:11
todo esto es un juego que podemos ir mejorando 00:07:12
de cualquier manera 00:07:15
aquí igual que ponemos este content 00:07:16
podemos poner dibujitos o cualquier otra cuestión 00:07:18
a gusto del consumidor 00:07:21
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
47
Fecha:
28 de diciembre de 2020 - 20:08
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
07′ 24″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
43.72 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid