1
00:00:00,940 --> 00:00:23,359
Bueno, vamos a seguir con clases. Entonces cualquier etiqueta puede tener su propia clase o clases trabajando. El número de etiquetas de HTML no es muy amplio y a veces como lo que hace una etiqueta es ir describiendo el contenido del documento, pues a veces queremos que su apariencia sea diferente en función de una serie de características.

2
00:00:23,359 --> 00:00:41,979
Veamos este ejemplo de aquí. Entonces tenemos un párrafo en esta parte de aquí que corresponde a esta parte de aquí en su salida en el navegador y este párrafo cuya clase es aviso que es esta información que tenemos aquí dentro y que vemos que está en color rojo.

3
00:00:41,979 --> 00:00:44,320
sin embargo nosotros aquí no hemos dicho nada del color rojo

4
00:00:44,320 --> 00:00:47,619
esto sería el documento html

5
00:00:47,619 --> 00:00:50,700
y tendríamos asociado o incluido en algún sitio

6
00:00:50,700 --> 00:00:55,899
el css correspondiente en cual decimos

7
00:00:55,899 --> 00:00:59,100
que un párrafo punto que esto indica que está dentro

8
00:00:59,100 --> 00:01:03,100
tiene clase aviso el color rojo

9
00:01:03,100 --> 00:01:05,939
y esta sería la información completa del documento

10
00:01:05,939 --> 00:01:08,640
si les parece vamos a ver como esto es un frame

11
00:01:08,640 --> 00:01:10,579
un marco dentro del documento

12
00:01:10,579 --> 00:01:12,459
vamos a ver el fuente de este marco

13
00:01:12,459 --> 00:01:14,439
para ver exactamente que es lo que se ha hecho

14
00:01:14,439 --> 00:01:16,879
entonces vemos que es un documento típico

15
00:01:16,879 --> 00:01:18,840
con su cabecera y su cuerpo

16
00:01:18,840 --> 00:01:21,040
el cuerpo es exactamente el que hemos visto

17
00:01:21,040 --> 00:01:22,920
en el cual hay un párrafo sin nada

18
00:01:22,920 --> 00:01:24,280
y un párrafo con clase

19
00:01:24,280 --> 00:01:26,799
y aquí

20
00:01:26,799 --> 00:01:28,000
ha incrustado el estilo

21
00:01:28,000 --> 00:01:30,200
ya sabemos que esto está desaconsejado

22
00:01:30,200 --> 00:01:33,000
pero para ejemplos de este tipo puede ser cómodo

23
00:01:33,000 --> 00:01:34,659
el estilo en el cual decimos

24
00:01:34,659 --> 00:01:36,120
que p.aviso

25
00:01:36,120 --> 00:01:38,980
y entre llaves ponemos sus características

26
00:01:38,980 --> 00:01:40,659
color rojo

27
00:01:40,659 --> 00:01:43,879
por eso se lo visualizamos de esta manera

28
00:01:43,879 --> 00:01:45,340
vamos a continuar

29
00:01:45,340 --> 00:01:47,439
y en este caso

30
00:01:47,439 --> 00:01:50,760
hemos introducido unas etiquetas que son SPAM

31
00:01:50,760 --> 00:01:53,040
entonces SPAM clase aviso

32
00:01:53,040 --> 00:01:54,579
color rojo

33
00:01:54,579 --> 00:01:57,980
si hubiera un SPAM que dentro tuviera la clase aviso

34
00:01:57,980 --> 00:02:00,620
pues entonces aparecería como no es el caso

35
00:02:00,620 --> 00:02:02,340
pues se ve de la misma manera

36
00:02:02,340 --> 00:02:04,780
o en este caso

37
00:02:04,780 --> 00:02:08,960
y mucho cuidado porque si diferenciamos minúsculas y mayúsculas

38
00:02:08,960 --> 00:02:12,400
en este caso aviso sin minúsculas es de color rojo

39
00:02:12,400 --> 00:02:15,419
y aviso con mayúsculas es de color azul

40
00:02:15,419 --> 00:02:17,439
y así se muestra en este caso

41
00:02:17,439 --> 00:02:22,939
bueno, también por eso se llama hoja de estilos en cascada

42
00:02:22,939 --> 00:02:26,159
podemos tener un estilo para todos los párrafos

43
00:02:26,159 --> 00:02:29,340
en este caso que sean oblicuos, que se escriba de forma oblicua

44
00:02:29,340 --> 00:02:34,219
y para el caso de que además tenga una clase como es aviso

45
00:02:34,219 --> 00:02:35,879
sea en rojo, de tal manera que

46
00:02:35,879 --> 00:02:38,159
se aplican todos los

47
00:02:38,159 --> 00:02:40,139
elementos que haya dentro

48
00:02:40,139 --> 00:02:42,259
de los atributos

49
00:02:42,259 --> 00:02:43,879
de CSS

50
00:02:43,879 --> 00:02:46,280
o cosas como esto

51
00:02:46,280 --> 00:02:47,840
es decir, aquí en la clase

52
00:02:47,840 --> 00:02:50,300
que es la clase groucho, este párrafo

53
00:02:50,300 --> 00:02:52,039
no tiene ninguna clase y este tiene

54
00:02:52,039 --> 00:02:53,939
dos clases, groucho y aviso

55
00:02:53,939 --> 00:02:56,060
entonces en este último

56
00:02:56,060 --> 00:02:57,800
vemos que groucho

57
00:02:57,800 --> 00:02:59,680
es que sean oblicuos

58
00:02:59,680 --> 00:03:01,639
entonces efectivamente si vemos la información

59
00:03:01,639 --> 00:03:03,500
groucho está en oblicuo

60
00:03:03,500 --> 00:03:05,960
Este no está afectado por nada

61
00:03:05,960 --> 00:03:07,340
Y el último dice

62
00:03:07,340 --> 00:03:08,680
Está en rojo y oblicuo

63
00:03:08,680 --> 00:03:10,180
Porque tenía groucho

64
00:03:10,180 --> 00:03:12,680
Y por ser groucho es oblicuo

65
00:03:12,680 --> 00:03:15,120
Y por ser aviso está en rojo

66
00:03:15,120 --> 00:03:15,659
¿De acuerdo?

67
00:03:17,120 --> 00:03:18,900
Podemos tener miles de elementos

68
00:03:18,900 --> 00:03:21,620
Por ejemplo, que tengamos un borde 1

69
00:03:21,620 --> 00:03:23,300
Y un borde 2

70
00:03:23,300 --> 00:03:25,180
O un borde 2 o un borde 1

71
00:03:25,180 --> 00:03:26,099
Esto significa lo mismo

72
00:03:26,099 --> 00:03:28,819
Realmente da exactamente lo mismo

73
00:03:28,819 --> 00:03:29,900
Entonces aquí tenemos

74
00:03:29,900 --> 00:03:37,300
que tenemos el borde rojo de 3 pincel sólido

75
00:03:37,300 --> 00:03:39,360
y vemos que aquí rojo no hay

76
00:03:39,360 --> 00:03:41,780
porque después borde 2

77
00:03:41,780 --> 00:03:43,900
que viene definida posteriormente

78
00:03:44,479 --> 00:03:45,500
dice que es azul

79
00:03:45,500 --> 00:03:47,520
y con puntitos

80
00:03:47,520 --> 00:03:49,659
entonces realmente hay que tener cuidado

81
00:03:49,659 --> 00:03:51,659
porque una está anulando a la otra

82
00:03:51,659 --> 00:03:52,240
¿de acuerdo?

83
00:03:53,960 --> 00:03:55,259
en este caso

84
00:03:55,259 --> 00:03:57,800
en este caso pues es al revés

85
00:03:57,800 --> 00:03:59,080
estamos poniéndolo al revés

86
00:03:59,080 --> 00:04:01,620
Y efectivamente queda el borde rojo

87
00:04:01,620 --> 00:04:08,000
Más cuestiones, pues este tiene borde 1, este tiene borde 2

88
00:04:08,000 --> 00:04:09,919
Y este borde 1 y borde 2

89
00:04:09,919 --> 00:04:15,740
Entonces, este primero, que es borde 1, pues es simplemente sólido

90
00:04:15,740 --> 00:04:18,519
El borde 2 es simplemente azul

91
00:04:18,519 --> 00:04:24,139
Y el borde 1, borde 2, dice que es borde 1 o borde 2

92
00:04:24,139 --> 00:04:28,040
Es 3px doted, que es este de aquí, en puntitos

93
00:04:28,040 --> 00:04:32,920
bueno, podemos asignar la misma clase a muchos elementos

94
00:04:32,920 --> 00:04:35,800
por supuesto, aquí tenemos borde1 aplicado a p

95
00:04:35,800 --> 00:04:39,680
y en cambio aquí tenemos borde1 aplicado a span

96
00:04:39,680 --> 00:04:44,060
entonces esto, en este caso, decimos que esto va a ser sólido

97
00:04:44,060 --> 00:04:48,980
el de aquí, y en este caso el span, que va a tener puntitos en el de ahí

98
00:04:48,980 --> 00:04:51,459
podemos explicarlo así

99
00:04:51,459 --> 00:04:53,839
también podemos haberlo no puesto en ningún sitio

100
00:04:53,839 --> 00:04:56,339
podemos poner una información tal que así

101
00:04:56,339 --> 00:04:58,199
si fuera así, se aplicaría

102
00:04:58,199 --> 00:05:00,259
a todos los elementos que lo tengan

103
00:05:00,259 --> 00:05:01,620
¿de acuerdo? este es el caso

104
00:05:01,620 --> 00:05:04,120
entonces tengo que este

105
00:05:04,120 --> 00:05:06,379
párrafo, esto es exactamente igual que antes

106
00:05:06,379 --> 00:05:07,920
el párrafo tiene esta clase

107
00:05:07,920 --> 00:05:09,540
y el span tiene esta clase

108
00:05:09,540 --> 00:05:12,300
y esto se aplica a todos los que hay ahí

109
00:05:12,300 --> 00:05:12,879
¿de acuerdo?

110
00:05:13,920 --> 00:05:16,279
poner esto es lo mismo que poner asterisco

111
00:05:16,279 --> 00:05:18,100
punto, lo que sea

112
00:05:18,100 --> 00:05:20,040
porque asterisco son

113
00:05:20,040 --> 00:05:22,000
todos los elementos que hay

114
00:05:22,000 --> 00:05:22,779
¿de acuerdo?

115
00:05:24,000 --> 00:05:27,639
bueno, en este caso

116
00:05:27,639 --> 00:05:29,399
es muy interesante lo que está ocurriendo aquí

117
00:05:29,399 --> 00:05:31,680
porque estamos en un diálogo entre Groucho

118
00:05:31,680 --> 00:05:33,680
y Chico, ambos

119
00:05:33,680 --> 00:05:35,660
Marx, son los hermanos Marx

120
00:05:35,660 --> 00:05:37,699
¿de acuerdo? y es una charla entre ambos

121
00:05:37,699 --> 00:05:39,819
entonces estamos diciendo que a Groucho

122
00:05:39,819 --> 00:05:41,600
siempre tiene el color rojo y Chico

123
00:05:41,600 --> 00:05:43,639
el color azul, y efectivamente podemos ir viendo

124
00:05:43,639 --> 00:05:44,959
toda su conversación

125
00:05:44,959 --> 00:05:46,699
poco a poco, ¿vale?

126
00:05:48,100 --> 00:05:49,620
es una manera de hacerlo, ¿de acuerdo?

127
00:05:50,639 --> 00:05:51,000
bueno

128
00:05:51,000 --> 00:05:56,420
aquí lo que hace es que dice

129
00:05:56,420 --> 00:05:58,139
voy a poner menos, voy a ver de poner

130
00:05:58,139 --> 00:06:00,259
Groucho y Chico, voy a poner que

131
00:06:00,259 --> 00:06:01,480
todos los párrafos son azules

132
00:06:01,480 --> 00:06:04,199
y los de Groucho, rojos

133
00:06:04,199 --> 00:06:05,819
entonces, es verdad que se ahorra

134
00:06:05,819 --> 00:06:08,360
la información sale igual, se ahorra un poquito

135
00:06:08,360 --> 00:06:10,360
pero realmente el otro es muchísimo

136
00:06:10,360 --> 00:06:12,339
más claro, ¿de acuerdo? porque sabemos

137
00:06:12,339 --> 00:06:13,920
exactamente a qué corresponde

138
00:06:13,920 --> 00:06:15,839
es más, si interviniera otro

139
00:06:15,839 --> 00:06:18,540
otro personaje en esta escena

140
00:06:18,540 --> 00:06:20,519
pues tendríamos que identificarlo

141
00:06:20,519 --> 00:06:22,079
y ya no lo valdría el método anterior

142
00:06:22,079 --> 00:06:24,540
bueno, pues esto es todo lo que hay

143
00:06:24,540 --> 00:06:25,500
sobre clases