Saltar navegación

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

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

47 visualizaciones

Más información Transcripción

Descargar la transcripción

¿Cómo seleccionamos los elementos para después aplicarles a esos concretamente unas características visuales? 00:00:01
Pues, en primer lugar tenemos selectores de tipo E, o tipo etiqueta, ¿de acuerdo? 00:00:08
Donde a una etiqueta se le aplica unas características. 00:00:16
Dentro de estos hay uno muy especial que es el asterisco, que dice todos los elementos de la página. 00:00:19
Si quisiéramos que todos los elementos tuvieran un rojo, pues ponemos simplemente asterisco. 00:00:25
después tenemos los selectores de clase 00:00:30
que pueden ir asociados a una etiqueta 00:00:33
como en este caso p.aviso 00:00:36
o directamente .aviso 00:00:38
y cualquier elemento que lo tenga se le va a aplicar 00:00:41
esto es equivalente a .aviso 00:00:44
es equivalente a asterisco .aviso 00:00:46
porque se va a aplicar a cualquier etiqueta que exista 00:00:48
tenemos algunos de tipo id 00:00:52
aunque es verdad que hay algunos elementos que se les aconsejan 00:00:56
también son útiles otras veces, con lo cual no voy a decir yo que esto no se utilice 00:01:00
porque a veces es muy cómodo que un elemento concreto tenga un identificador 00:01:04
se puede directamente aplicarse una etiqueta, aunque tiene poco sentido 00:01:08
puesto que los identificadores son únicos, no se pueden repetir 00:01:12
por lo cual lo más lógico es directamente poner 00:01:15
almohadilla y el nombre de identificador 00:01:18
entonces eso solamente vale para ese aviso 00:01:22
menos sentido todavía tiene esto de a este disco 00:01:24
almohadilla aviso, porque solamente debería haber un identificador aviso 00:01:27
después tenemos elementos descendentes 00:01:33
si se escriben dos etiquetas que están seguidas, una etiqueta E y una etiqueta F 00:01:37
los características que indiquemos dentro se aplican a la segunda etiqueta 00:01:42
aunque haya algunas intermedias 00:01:50
entonces imaginemos que tenemos un div 00:01:52
que dice, un div al cual vamos a decir que el borde 00:01:56
es de color rojo, de 3 píxeles y sólido 00:01:59
es decir, esta cajita que estamos viendo aquí 00:02:03
que tiene un margen y tiene un margen interno 00:02:05
el padding es el margen interno 00:02:09
bueno, pues este es nuestra imagen 00:02:11
entonces podemos decir que los párrafos 00:02:15
que están dentro de este div 00:02:18
sean de color rojo 00:02:22
vemos que estos párrafos de aquí siguen negros 00:02:24
esto de aquí es una lista 00:02:26
esto de aquí es un adres 00:02:29
y efectivamente todo lo que está dentro de este div 00:02:31
que es un párrafo, está en color rojo 00:02:34
así podemos meter varios niveles 00:02:38
por ejemplo, dentro de una lista el párrafo que hay 00:02:42
dentro del div, dentro de la lista y dentro del párrafo que hay 00:02:44
este ejemplo de aquí 00:02:47
¿De acuerdo? Este es un orden en el que va una cosa dentro de otra. 00:02:48
Si incluimos el signo de mayor, esto afecta a los elementos de esta segunda etiqueta que están contenidos dentro de la primera, pero no afecta a las etiquetas intermedias que hay entre ellos. 00:02:53
Es decir, tiene que haber una relación directa. Aquí tenemos el mismo caso anterior, la única diferencia, el caso no anterior, sino el caso que teníamos aquí, la única diferencia es que aquí hemos introducido ese mayor, este mayor de aquí. 00:03:09
Entonces vemos que efectivamente div y dentro p ha funcionado 00:03:23
Div y dentro p directamente ha funcionado 00:03:28
Pero este párrafo ya no es div p, es un div li p 00:03:30
Por lo tanto este no lo afecta 00:03:36
Es decir, tiene que estar inmediatamente, tienen que ser hijos este elemento del anterior 00:03:38
Si se escriben dos etiquetas pero con un más 00:03:44
las propiedades afectan únicamente a los elementos con la segunda etiqueta 00:03:52
que van justo, justo después de ese elemento 00:03:57
entonces, si hiciéramos este mismo ejemplo con div p 00:04:00
esto se aplicaría justo al párrafo que está inmediatamente detrás del div 00:04:03
exactamente este que hay aquí 00:04:10
con este carácter, el carácter, no sé, que está al lado del 4 habitualmente 00:04:13
Con este carácter lo que hacemos es que las propiedades afectan únicamente a los elementos de la misma etiqueta 00:04:22
Que van después de un elemento con la primera etiqueta 00:04:31
Y ambos tienen que ser hermanos 00:04:35
Entonces si ponemos div p, div y este carácter p 00:04:38
Pues entonces lo que estamos diciendo es 00:04:43
Este era el primero, pues afecta al segundo que es hermano 00:04:46
Este era el primero y afecta al segundo, que es hermano. 00:04:50
Bueno, también podemos, en caso de que haya atributos, seleccionar elementos propios del atributo. 00:04:55
Por ejemplo, vamos a ver varios casos que hay. 00:05:02
P class, es decir, solamente vamos a transformar en mayúsculas aquellos que tienen un atributo de tipo class. 00:05:06
Este primero está claro que tiene P1 porque está en rojo 00:05:16
Este segundo tiene P2 porque está en azul 00:05:20
Y este podría no tener nada 00:05:22
¿De acuerdo? 00:05:24
Entonces solamente los dos que tienen clase se les pone en mayúscula 00:05:25
Lo vemos claramente 00:05:30
Podemos incluso poner de varios tipos 00:05:31
Quiero que los párrafos que tienen la clase P1, P2 puedan transformarse 00:05:35
Entonces, P1 es de color rojo, P2 es de color azul, y en mayúsculas son aquellos que tienen P1 y P2 en ese orden. 00:05:42
Entonces, este es un párrafo con clase P1 y P2 en ese orden, y este es un párrafo que tiene P2 y P1. 00:05:53
Con lo cual, el único que está en mayúsculas es este de aquí. 00:06:01
Con esta expresión, lo que queremos decir es todos los atributos que contienen este valor 00:06:05
Es decir, si tuviéramos P1, P2, P3 y pusiéramos P2, pues esos que tienen ese valor 00:06:13
Mientras que con esta expresión de aquí, lo que queremos es cómo empiezan 00:06:19
El atributo comienza con este valor 00:06:25
Esto, por ejemplo, valdría para el idioma 00:06:28
es-es mayúscula 00:06:31
por ejemplo 00:06:33
o n-us 00:06:34
etcétera, es decir, todos los que empiezan 00:06:37
de esta manera 00:06:39
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
47
Fecha:
28 de diciembre de 2020 - 20:03
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
06′ 43″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
37.52 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid