1
00:00:00,750 --> 00:00:03,310
Bueno, ¿por qué se llama estilos en cascada?

2
00:00:03,450 --> 00:00:06,110
Pues porque realmente se aplican en cascada

3
00:00:06,110 --> 00:00:09,189
Lo único que ocurre es que a veces no sabemos muy bien en qué orden se están aplicando

4
00:00:09,189 --> 00:00:11,169
Y esa es una gran dificultad que vamos a tener

5
00:00:11,169 --> 00:00:12,890
A priori

6
00:00:12,890 --> 00:00:17,129
Después cuando tenemos un entorno controlado pues no va a suponer gran problema

7
00:00:17,129 --> 00:00:17,850
Pero bueno

8
00:00:17,850 --> 00:00:20,750
Para empezar, ¿dónde pueden aparecer las propiedades de estilo?

9
00:00:20,910 --> 00:00:22,850
Pues pueden aparecer en un enlace

10
00:00:22,850 --> 00:00:24,449
Que es lo que se recomienda

11
00:00:24,449 --> 00:00:27,149
Pueden aparecer en la parte de head

12
00:00:27,149 --> 00:00:30,550
O directamente en la etiqueta correspondiente

13
00:00:30,550 --> 00:00:36,549
¿De acuerdo? Entonces, bueno, pues esto ya va a definir un ámbito dentro de la página.

14
00:00:37,649 --> 00:00:43,490
Entonces, todas las etiquetas que están en el atributo style se imponen a las que están en la etiqueta style.

15
00:00:43,789 --> 00:00:47,990
Y todas las que están en la etiqueta style se imponen a las de la hoja enlazada.

16
00:00:48,710 --> 00:00:52,070
Es decir, ese es el orden en que se aplica.

17
00:00:53,570 --> 00:00:59,229
Dicho lo cual, volvemos a decir que recomendamos que se utilicen únicamente hojas enlazadas.

18
00:00:59,229 --> 00:01:02,689
Pero hay veces que no tenemos más remedio que acudir a otros elementos.

19
00:01:03,530 --> 00:01:09,950
Bien, el problema surge cuando estamos haciendo cosas que se mezclan o que se intermezclan.

20
00:01:10,030 --> 00:01:15,069
Por ejemplo, reglas distintas que se aplican al mismo elemento.

21
00:01:15,670 --> 00:01:19,189
¿Cuál es el que tiene preferencia? ¿Cuál es la regla que hay que aplicar?

22
00:01:19,569 --> 00:01:24,090
Pues vamos a ir viendo ejemplos. Realmente conocerse esto de memoria es bastante complicado.

23
00:01:24,230 --> 00:01:25,909
Entonces vamos a ir viendo ejemplos.

24
00:01:25,909 --> 00:01:33,590
En este caso tenemos un HTML que tiene un párrafo con identificador y otro sin identificador

25
00:01:33,590 --> 00:01:37,790
Y tenemos estas dos clases a aplicar

26
00:01:37,790 --> 00:01:42,829
Entonces P con el identificador nuevo, color rojo, y P color black

27
00:01:42,829 --> 00:01:48,390
A pesar de que este es el segundo, aplicamos a este el color rojo

28
00:01:48,390 --> 00:01:52,930
Porque es mucho más específico que este, este solamente se aplica a nuevo

29
00:01:52,930 --> 00:01:55,049
A este de ahí parece claro, ¿de acuerdo?

30
00:01:55,049 --> 00:01:58,390
aquí decimos, lo ponemos al revés y nos va a dar igual

31
00:01:58,390 --> 00:02:01,129
aplicamos color negro, vale, aplicamos

32
00:02:01,129 --> 00:02:04,189
pero a nuevo, que es más específico, le aplicamos rojo

33
00:02:04,189 --> 00:02:05,989
nos da igual esto que esto

34
00:02:05,989 --> 00:02:09,969
es simplemente cuanto más especificamos la posición

35
00:02:09,969 --> 00:02:12,729
esa es la que tiene preponderancia

36
00:02:12,729 --> 00:02:19,110
en este caso tenemos un identificador viejo

37
00:02:19,110 --> 00:02:23,169
yo con los identificadores ya ven que paso bastante del tema de la etiqueta va por delante

38
00:02:23,169 --> 00:02:25,770
porque simplemente es que no puede existir

39
00:02:25,770 --> 00:02:26,830
otra cosa, ¿de acuerdo?

40
00:02:27,490 --> 00:02:29,770
div viejo, entonces yo tengo

41
00:02:29,770 --> 00:02:31,789
div viejo que tiene un borde

42
00:02:31,789 --> 00:02:33,909
de color negro, tres píxeles

43
00:02:33,909 --> 00:02:35,389
y sólido, esto de aquí, ¿vale?

44
00:02:35,629 --> 00:02:37,629
y después tiene un margen y un padding

45
00:02:37,629 --> 00:02:39,310
muy bien, y después tengo un atributo

46
00:02:39,310 --> 00:02:41,569
otro identificador que es nuevo

47
00:02:41,569 --> 00:02:43,090
que lo han aplicado a un p

48
00:02:43,090 --> 00:02:45,610
y después me dicen que nuevo

49
00:02:45,610 --> 00:02:47,289
dentro de viejo, ¿vale?

50
00:02:47,409 --> 00:02:50,169
que sea en color negro, pues efectivamente

51
00:02:50,169 --> 00:02:51,789
a viejo le aplico esto

52
00:02:51,789 --> 00:02:56,530
ahora dentro de nuevo está viejo

53
00:02:56,530 --> 00:02:59,210
con lo cual es más específico que decir directamente nuevo

54
00:02:59,210 --> 00:03:02,370
con lo cual le aplico directamente este black

55
00:03:02,370 --> 00:03:06,210
es un poco la cuestión para que lo vayamos viendo

56
00:03:06,210 --> 00:03:09,550
y da igual el orden porque simplemente tiene que ver con cuánta profundidad

57
00:03:09,550 --> 00:03:12,270
yo estoy especificando el elemento

58
00:03:12,270 --> 00:03:20,509
este es el caso más complicado en el cual vamos viendo el número de otros atributos

59
00:03:20,509 --> 00:03:22,210
Hice dos clases en el selector

60
00:03:22,210 --> 00:03:25,550
Y entonces tampoco al final es muy complicado

61
00:03:25,550 --> 00:03:27,409
Simplemente tengo esta clase

62
00:03:27,409 --> 00:03:28,150
Viejo

63
00:03:28,150 --> 00:03:31,189
En esa clase que tiene viejo

64
00:03:31,189 --> 00:03:32,949
Por dentro hay un párrafo

65
00:03:32,949 --> 00:03:34,469
Y lo pinto en rojo

66
00:03:34,469 --> 00:03:37,189
Y sin embargo a cualquier párrafo que haya

67
00:03:37,189 --> 00:03:38,409
Lo pinto en negro

68
00:03:38,409 --> 00:03:39,990
Simplemente otra vez estamos en lo mismo

69
00:03:39,990 --> 00:03:42,349
Especifico más su profundidad

70
00:03:42,349 --> 00:03:45,330
Lo mismo me ocurría aunque cambie el orden

71
00:03:45,330 --> 00:03:47,849
Y aquí por el número de elementos

72
00:03:47,849 --> 00:03:48,590
¿De acuerdo?

73
00:03:48,590 --> 00:04:10,189
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?

74
00:04:10,189 --> 00:04:13,949
Y lo mismo da que dé el cambio de orden, nos va a dar exactamente igual.

75
00:04:15,050 --> 00:04:22,550
Aquí es un caso más curioso, porque yo digo que un elemento de la lista, un list item, esté en color negro.

76
00:04:22,970 --> 00:04:32,610
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?

77
00:04:33,089 --> 00:04:35,009
También la misma definición de antes.

78
00:04:35,009 --> 00:04:51,769
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.

79
00:04:51,769 --> 00:04:59,629
Bien, dentro de eso, el aplicar las cuestiones en un sitio o en otro puede modificar

80
00:04:59,629 --> 00:05:03,610
Sobre todo cuando aplicamos la misma, misma definición

81
00:05:03,610 --> 00:05:07,990
Aquí tenemos dispe, color rojo, y después dispe, color negro

82
00:05:07,990 --> 00:05:11,550
Pues se aplica la última, cuando es el mismo caso se aplica exactamente la única

83
00:05:11,550 --> 00:05:16,329
Si le damos la vuelta, pues aplica la última, es decir, la que está en rojo

84
00:05:16,329 --> 00:05:16,970
¿De acuerdo?

85
00:05:17,810 --> 00:05:21,209
Y bueno, esto es lo que hay que tener en cuenta para el orden de los selectores

86
00:05:21,209 --> 00:05:26,529
Ya les digo que si tienen cuidado a la hora de crear la página, no debería darles ningún problema.