Saltar navegación

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

CSS Estilos en cascada - 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.

125 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, ¿por qué se llama estilos en cascada? 00:00:00
Pues porque realmente se aplican en cascada 00:00:03
Lo único que ocurre es que a veces no sabemos muy bien en qué orden se están aplicando 00:00:06
Y esa es una gran dificultad que vamos a tener 00:00:09
A priori 00:00:11
Después cuando tenemos un entorno controlado pues no va a suponer gran problema 00:00:12
Pero bueno 00:00:17
Para empezar, ¿dónde pueden aparecer las propiedades de estilo? 00:00:17
Pues pueden aparecer en un enlace 00:00:20
Que es lo que se recomienda 00:00:22
Pueden aparecer en la parte de head 00:00:24
O directamente en la etiqueta correspondiente 00:00:27
¿De acuerdo? Entonces, bueno, pues esto ya va a definir un ámbito dentro de la página. 00:00:30
Entonces, todas las etiquetas que están en el atributo style se imponen a las que están en la etiqueta style. 00:00:37
Y todas las que están en la etiqueta style se imponen a las de la hoja enlazada. 00:00:43
Es decir, ese es el orden en que se aplica. 00:00:48
Dicho lo cual, volvemos a decir que recomendamos que se utilicen únicamente hojas enlazadas. 00:00:53
Pero hay veces que no tenemos más remedio que acudir a otros elementos. 00:00:59
Bien, el problema surge cuando estamos haciendo cosas que se mezclan o que se intermezclan. 00:01:03
Por ejemplo, reglas distintas que se aplican al mismo elemento. 00:01:10
¿Cuál es el que tiene preferencia? ¿Cuál es la regla que hay que aplicar? 00:01:15
Pues vamos a ir viendo ejemplos. Realmente conocerse esto de memoria es bastante complicado. 00:01:19
Entonces vamos a ir viendo ejemplos. 00:01:24
En este caso tenemos un HTML que tiene un párrafo con identificador y otro sin identificador 00:01:25
Y tenemos estas dos clases a aplicar 00:01:33
Entonces P con el identificador nuevo, color rojo, y P color black 00:01:37
A pesar de que este es el segundo, aplicamos a este el color rojo 00:01:42
Porque es mucho más específico que este, este solamente se aplica a nuevo 00:01:48
A este de ahí parece claro, ¿de acuerdo? 00:01:52
aquí decimos, lo ponemos al revés y nos va a dar igual 00:01:55
aplicamos color negro, vale, aplicamos 00:01:58
pero a nuevo, que es más específico, le aplicamos rojo 00:02:01
nos da igual esto que esto 00:02:04
es simplemente cuanto más especificamos la posición 00:02:05
esa es la que tiene preponderancia 00:02:09
en este caso tenemos un identificador viejo 00:02:12
yo con los identificadores ya ven que paso bastante del tema de la etiqueta va por delante 00:02:19
porque simplemente es que no puede existir 00:02:23
otra cosa, ¿de acuerdo? 00:02:25
div viejo, entonces yo tengo 00:02:27
div viejo que tiene un borde 00:02:29
de color negro, tres píxeles 00:02:31
y sólido, esto de aquí, ¿vale? 00:02:33
y después tiene un margen y un padding 00:02:35
muy bien, y después tengo un atributo 00:02:37
otro identificador que es nuevo 00:02:39
que lo han aplicado a un p 00:02:41
y después me dicen que nuevo 00:02:43
dentro de viejo, ¿vale? 00:02:45
que sea en color negro, pues efectivamente 00:02:47
a viejo le aplico esto 00:02:50
ahora dentro de nuevo está viejo 00:02:51
con lo cual es más específico que decir directamente nuevo 00:02:56
con lo cual le aplico directamente este black 00:02:59
es un poco la cuestión para que lo vayamos viendo 00:03:02
y da igual el orden porque simplemente tiene que ver con cuánta profundidad 00:03:06
yo estoy especificando el elemento 00:03:09
este es el caso más complicado en el cual vamos viendo el número de otros atributos 00:03:12
Hice dos clases en el selector 00:03:20
Y entonces tampoco al final es muy complicado 00:03:22
Simplemente tengo esta clase 00:03:25
Viejo 00:03:27
En esa clase que tiene viejo 00:03:28
Por dentro hay un párrafo 00:03:31
Y lo pinto en rojo 00:03:32
Y sin embargo a cualquier párrafo que haya 00:03:34
Lo pinto en negro 00:03:37
Simplemente otra vez estamos en lo mismo 00:03:38
Especifico más su profundidad 00:03:39
Lo mismo me ocurría aunque cambie el orden 00:03:42
Y aquí por el número de elementos 00:03:45
¿De acuerdo? 00:03:47
Bueno, pues tengo mi división en la cual hay un borde, etc., etc., un párrafo que es rojo y en general los párrafos son negros, pero como tengo más nivel, más indicado, más profundidad dentro de la especificación, pues efectivamente esto estará en rojo, ¿de acuerdo? 00:03:48
Y lo mismo da que dé el cambio de orden, nos va a dar exactamente igual. 00:04:10
Aquí es un caso más curioso, porque yo digo que un elemento de la lista, un list item, esté en color negro. 00:04:15
Y parece como que eso sería preponderante, pero no, porque como estoy diciendo que un elemento de la lista dentro de una lista sea color rojo, este es el que se aplica, ¿de acuerdo? 00:04:22
También la misma definición de antes. 00:04:33
Y aquí un poco la misma filosofía. Tengo un párrafo que es nuevo, entonces color negro. Y aunque yo diga que todo lo nuevo es de color rojo, como esto es más específico, pues me viene en este caso en negro. 00:04:35
Bien, dentro de eso, el aplicar las cuestiones en un sitio o en otro puede modificar 00:04:51
Sobre todo cuando aplicamos la misma, misma definición 00:04:59
Aquí tenemos dispe, color rojo, y después dispe, color negro 00:05:03
Pues se aplica la última, cuando es el mismo caso se aplica exactamente la única 00:05:07
Si le damos la vuelta, pues aplica la última, es decir, la que está en rojo 00:05:11
¿De acuerdo? 00:05:16
Y bueno, esto es lo que hay que tener en cuenta para el orden de los selectores 00:05:17
Ya les digo que si tienen cuidado a la hora de crear la página, no debería darles ningún problema. 00:05:21
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
125
Fecha:
28 de diciembre de 2020 - 20:13
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
05′ 27″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
33.61 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid