1
00:00:01,020 --> 00:00:06,030
Entonces en este video nos enfocaremos en tres selectores de CSSA.

2
00:00:06,030 --> 00:00:08,490
Esas son ID de elemento en clase.

3
00:00:08,610 --> 00:00:11,610
Entonces hay muchas más opciones para seleccionar elementos.

4
00:00:11,730 --> 00:00:15,630
Vamos a aprender sobre ellos más adelante. Nos centraremos en estos tres para comenzar.

5
00:00:15,960 --> 00:00:21,980
Y cuando digo selector, vuelva a pensar en esta regla general de la que hablamos desde el

6
00:00:21,980 --> 00:00:28,370
inicio cuando CSSA comenzó hace algunos videos donde tenemos un selector y luego llaves y luego algunas propiedades.

7
00:00:28,860 --> 00:00:32,660
Así que vamos a ver algunos selectores diferentes que podemos poner aquí.

8
00:00:33,030 --> 00:00:37,440
Y la forma en que vamos a hacer eso, vamos a construir una lista realmente simple para todos juntos.

9
00:00:38,340 --> 00:00:39,980
Así que voy a hacer un nuevo archivo.

10
00:00:40,170 --> 00:00:44,580
Voy a guardarlo y voy a llamarlo para hacer una lista de ese HMO

11
00:00:48,270 --> 00:00:51,740
una vez que tengamos eso, entonces continuaremos y agregaremos el HMO.

12
00:00:52,530 --> 00:00:54,930
Y la forma en que funcionará va a ser

13
00:00:58,080 --> 00:01:01,550
una H1 y luego vamos a tener un pozo con los aliados.

14
00:01:02,010 --> 00:01:08,880
Pero en cada aliado vamos a tener algo de texto y vamos a tener una pequeña casilla de verificación para

15
00:01:08,880 --> 00:01:18,960
ver si puedes recordar cómo hacer la casilla de verificación, es la casilla de verificación tipo de entrada igual y luego debajo de eso o después de eso tendremos

16
00:01:18,960 --> 00:01:20,090
nuestro texto .

17
00:01:20,220 --> 00:01:30,210
Entonces caminaremos oxidados entonces solo voy a duplicar esto.

18
00:01:30,210 --> 00:01:39,020
Entonces, tendremos tres de ellos que caminen por Rusty solo para comprar comida.

19
00:01:40,590 --> 00:01:41,490
Y finalmente

20
00:01:45,150 --> 00:01:48,660
termine de grabar, vea evaluar a Phidias.

21
00:01:48,960 --> 00:01:54,990
Entonces, si abrimos esto en un navegador, veremos una versión suave y estilizada de nuestro producto final, pero

22
00:01:55,440 --> 00:01:56,940
el esqueleto está ahí.

23
00:01:57,090 --> 00:02:01,520
Tenemos nuestras dos cosas y cada una de ellas es una pequeña casilla de verificación al lado.

24
00:02:02,650 --> 00:02:03,390
DE ACUERDO.

25
00:02:04,050 --> 00:02:08,590
Entonces, lo próximo que queremos hacer es conectar una hoja de estilos.

26
00:02:09,060 --> 00:02:17,190
Entonces, para hacerlo, esta vez comencemos conectando una hoja de estilo no existente y luego crearemos una hoja

27
00:02:17,400 --> 00:02:18,480
de estilo.

28
00:02:18,480 --> 00:02:23,970
Entonces, algunas personas llamarían a este desarrollo impulsado por errores donde escribimos algo que sabemos que

29
00:02:23,970 --> 00:02:26,960
no funcionará y luego lo hacemos funcionar luego.

30
00:02:26,970 --> 00:02:34,060
Así que voy a llamar a esto para hacer la evaluación introducir C ver evaluar lo que no existe.

31
00:02:34,670 --> 00:02:40,820
Lo siguiente que haremos es continuar y convertir ese archivo en Dewes que C evalúe.

32
00:02:40,920 --> 00:02:43,860
Y esto tiene que estar en el mismo lugar que para hacer un estudio.

33
00:02:43,860 --> 00:02:48,550
Tim lo guardaré y solo para asegurarme de que esté conectado.

34
00:02:48,660 --> 00:02:55,980
Hagamos algo así como el fondo del cuerpo anaranjado y usted sabe que esto es realmente de lo que estaba hablando

35
00:02:55,980 --> 00:02:57,870
en el video a color.

36
00:02:57,870 --> 00:03:01,380
Esta es una de las únicas veces que realmente usaría un color como el naranja.

37
00:03:01,380 --> 00:03:06,780
Además de enseñar, solo lo usaría para asegurarme de que algo esté conectado. Solo quiero un color brillante.

38
00:03:06,930 --> 00:03:11,760
Quiero ver si esto para usar ese C Ss se hace referencia aquí correctamente.

39
00:03:11,820 --> 00:03:12,920
Entonces si estamos frescos.

40
00:03:13,170 --> 00:03:16,320
De acuerdo, las cosas buenas están conectadas.

41
00:03:16,320 --> 00:03:23,580
Entonces, lo que vamos a hacer es volver a las diapositivas aquí y hablar sobre el selector de elementos primero, que

42
00:03:23,580 --> 00:03:27,180
es el que realmente hemos dedicado mucho tiempo para estar listos.

43
00:03:27,180 --> 00:03:35,100
Básicamente es el tipo de ataques a medida que especificas div o paragraph o body y luego selecciona todos los elementos

44
00:03:35,100 --> 00:03:38,240
correspondientes a todas las instancias que coinciden con eso.

45
00:03:38,610 --> 00:03:46,620
Entonces, en este caso, tenemos dos divs y cada div tiene dos párrafos, por lo que establecemos todos los divs, ese fondo es de

46
00:03:46,620 --> 00:03:53,730
color púrpura obtenemos dos dispositivos de color púrpura, establecemos que todos los párrafos sean de COLOR AMARILLO obtenemos cuatro párrafos amarillos.

47
00:03:55,140 --> 00:03:57,840
Entonces eso es lo que estamos haciendo aquí cuando seleccionamos el cuerpo.

48
00:03:57,840 --> 00:04:08,190
También podríamos hacerlo para todos los ALWIS y darles una orden o vamos a chirrido borde de dos píxeles de color rojo sólido.

49
00:04:10,910 --> 00:04:14,560
Ahora, por supuesto, eso funciona con todos los aliados.

50
00:04:15,360 --> 00:04:15,970
DE ACUERDO.

51
00:04:16,380 --> 00:04:24,180
Entonces, lo siguiente que podríamos hacer es seleccionar un aliado o una H-1 o una instancia de algo.

52
00:04:24,870 --> 00:04:30,510
Entonces en este ejemplo estamos seleccionando el tercer lie y volviéndolo amarillo.

53
00:04:30,690 --> 00:04:37,020
Y la forma en que lo hacemos es en realidad alterando ligeramente el equipo y luego usando un gancho que agregamos a

54
00:04:37,020 --> 00:04:41,800
H H M L y R C Ss todos se refieren a él y lo vuelven amarillo.

55
00:04:42,180 --> 00:04:45,700
Entonces, el primer paso es agregar ese gancho que se llama ID.

56
00:04:46,050 --> 00:04:52,420
Y así, la forma en que funciona una idea la agrega como un atributo a cualquier ID de elemento igual.

57
00:04:52,440 --> 00:04:57,120
Y luego, entre comillas, cualquier nombre que quieras puede ser cualquier cosa.

58
00:04:57,360 --> 00:05:03,860
Y luego lo que hacemos es referirnos a eso más adelante al escribir Octa Thorpe o el signo de almohadilla y luego el nombre

59
00:05:03,870 --> 00:05:08,420
de la ID y eso seleccionará el de un elemento que coincida con ese nombre de identificación.

60
00:05:08,820 --> 00:05:18,510
Entonces, como ejemplo, digamos que quiero que este aliado final aquí se vea ligeramente diferente.

61
00:05:19,080 --> 00:05:23,790
Lo que podría hacer es ir aquí, Ally, y darle una identificación.

62
00:05:23,970 --> 00:05:25,860
Y este puede ser cualquier nombre en absoluto.

63
00:05:25,950 --> 00:05:27,030
lo llamo especial

64
00:05:29,620 --> 00:05:35,650
no es realmente un gran nombre, pero sí muestra que el objetivo de usar una identificación es señalar algo.

65
00:05:35,650 --> 00:05:40,210
Vamos a llamar a esto especial y la razón por la que digo que

66
00:05:40,330 --> 00:05:46,490
Es una forma de orientar un elemento individual y una nota sobre una ID.

67
00:05:46,560 --> 00:05:49,300
Solo puede aparecer en una página una vez.

68
00:05:49,480 --> 00:05:56,270
Entonces, si hago esto y luego trato de darle una identificación especial a dos elementos que en realidad son HMO no válidos.

69
00:05:56,530 --> 00:05:58,920
Por lo tanto, siempre se supone que debe estar allí una vez en la página.

70
00:05:59,130 --> 00:06:02,640
Es puramente utilizado para separar un solo elemento.

71
00:06:02,680 --> 00:06:09,280
Sin embargo, podemos tener múltiples ID en una página, siempre y cuando no aparezcan más de una vez.

72
00:06:09,590 --> 00:06:09,830
DE ACUERDO.

73
00:06:09,850 --> 00:06:12,180
Así que vamos con este especial.

74
00:06:12,240 --> 00:06:17,180
Ahora hagamos esto, echemos un vistazo aquí.

75
00:06:17,350 --> 00:06:18,550
Es este último aquí.

76
00:06:18,790 --> 00:06:20,390
Vamos a darle un color de fondo.

77
00:06:20,650 --> 00:06:24,470
Entonces para hacer eso Id. El nombre es especial.

78
00:06:24,490 --> 00:06:32,670
Vamos a nuestro archivo CSSA y escribimos especial y ponemos una octava en frente de él y eso

79
00:06:32,950 --> 00:06:37,220
simplemente nos dice que estamos hablando de una identificación.

80
00:06:37,500 --> 00:06:48,020
Entonces, todo lo que hacemos es escribir o C S S aquí, así que hagamos el color de fondo y hagámoslo amarillo.

81
00:06:48,250 --> 00:06:54,730
Guarde la actualización del archivo y solo podrá ver esto cuando sea amarillo.

82
00:06:54,790 --> 00:06:56,770
Así que hay algunas cosas que quiero señalar.

83
00:06:56,830 --> 00:06:59,890
El primero es que este código todavía está funcionando.

84
00:06:59,880 --> 00:07:01,760
Resulta que todos los aliados.

85
00:07:01,930 --> 00:07:05,310
Les da un borde rojo que incluye este el último.

86
00:07:05,650 --> 00:07:12,010
Y luego añadimos un fondo amarillo solo al último basado en este

87
00:07:12,000 --> 00:07:15,520
gancho que agregamos y llamamos en ID.

88
00:07:15,580 --> 00:07:21,930
forma de seleccionar un elemento, solo puede usar una ID una vez por página, pero podemos tener tantos ID como deseemos en una página.

89
00:07:21,940 --> 00:07:24,480
Por lo tanto, para resumir una idea como una

90
00:07:24,730 --> 00:07:30,820
Así que los ID son geniales para seleccionar elementos individuales, pero muchas veces queremos tener múltiples elementos que

91
00:07:30,810 --> 00:07:34,380
se parecen pero no queremos todos los aliados, por ejemplo.

92
00:07:34,450 --> 00:07:41,320
Digamos que quería darle un estilo a la mitad de los Aliados de una manera y la otra mitad de otra manera en que

93
00:07:41,320 --> 00:07:43,410
pudiéramos usar una clase para lograr eso.

94
00:07:43,420 --> 00:07:48,970
Entonces, la forma en que funciona una clase es como una ID, excepto que se llama clase y podemos aplicarla

95
00:07:49,020 --> 00:07:51,410
a cualquier cantidad de elementos en una página.

96
00:07:51,430 --> 00:07:57,850
luego nos referimos a ella en nuestro éxito con un punto en lugar de una octava Thorpe.

97
00:07:57,850 --> 00:08:05,240
Entonces, como pueden ver aquí, estamos aplicando una clase llamada resaltado al primer párrafo y al tercer párrafo, y

98
00:08:05,250 --> 00:08:12,750
Así que de nuevo para contrastar que aquí para seleccionar una identificación usamos el signo de almohadilla o la octava Thorpe aquí para seleccionar

99
00:08:12,750 --> 00:08:13,350
una clase.

100
00:08:13,380 --> 00:08:14,540
Usamos punto

101
00:08:14,710 --> 00:08:16,600
De lo contrario, funcionan de la misma manera.

102
00:08:16,660 --> 00:08:19,030
Así que hagamos un ejemplo.

103
00:08:19,230 --> 00:08:26,050
Voy a agregar una clase y la forma en que quiero que esto funcione, vamos a pretender que estos

104
00:08:27,310 --> 00:08:28,390
dos están marcados.

105
00:08:28,480 --> 00:08:32,720
Entonces quiero que haya una línea en el texto.

106
00:08:32,760 --> 00:08:38,800
Entonces, cuando miramos comprar alimentos y caminamos resti debería haber una huelga al revisar este

107
00:08:38,800 --> 00:08:40,810
texto, pero no el último.

108
00:08:40,840 --> 00:08:44,320
Entonces, la forma en que hacemos eso o una forma de hacerlo es con la clase.

109
00:08:44,400 --> 00:08:52,720
Así que sobre la marcha voy a seguir adelante y agregar una clase y va a llamar a esto completado y

110
00:08:52,720 --> 00:08:58,050
otra clase igual a completado y voy a guardar eso y si actualizo.

111
00:08:58,170 --> 00:09:00,560
No pasa nada porque no tengo ningún estilo.

112
00:09:00,900 --> 00:09:09,580
voy a mi punto C Ss y I a la derecha y luego el nombre de la clase completó llaves y ahora estilo.

113
00:09:09,650 --> 00:09:10,850
Así que ahora

114
00:09:11,050 --> 00:09:18,030
Así que voy a presentar algo nuevo aquí que se llama decoración de texto y la decoración de texto es

115
00:09:18,040 --> 00:09:19,920
una forma de agregar una línea.

116
00:09:20,080 --> 00:09:22,030
Pero hay algunas cosas que puedes hacer.

117
00:09:22,020 --> 00:09:28,710
Puede agregar un subrayado y puede agregar un subrayado ondulado Aparentemente no supe que haya

118
00:09:29,200 --> 00:09:35,800
una línea y una línea que sea como un subrayado, excepto en la parte superior.

119
00:09:35,800 --> 00:09:40,560
Así que vamos a utilizar line through y eso debería ser.

120
00:09:40,810 --> 00:09:42,060
Entonces si me actualizo

121
00:09:42,120 --> 00:09:44,420
Mantenga su ojo en estos dos primeros.

122
00:09:44,470 --> 00:09:46,400
Ahora hacemos una línea.

123
00:09:46,840 --> 00:09:49,680
Estupendo.

124
00:09:49,990 --> 00:09:56,340
Una nota rápida mientras estoy aquí es que si quiero que se marquen estas casillas de verificación cuando se carga la página.

125
00:09:56,500 --> 00:10:01,420
Así que en este momento no están marcados y tengo que verificarlos manualmente, pero si quiero que

126
00:10:02,470 --> 00:10:06,410
se revisen los dos superiores, puedo ir aquí y agregar un atributo llamado checked.

127
00:10:06,550 --> 00:10:10,370
Y esto funciona en las entradas de casilla de verificación.

128
00:10:10,380 --> 00:10:15,580
Así que haciendo eso si estuviera fresco. Ahora cuando la página se carga, se revisan.

129
00:10:15,750 --> 00:10:20,450
Así que realmente no veamos evaluar, pero es importante saber que puedes hacer eso.

130
00:10:20,830 --> 00:10:21,100
DE ACUERDO.

131
00:10:21,100 --> 00:10:24,140
Así que terminemos esto muy rápido.

132
00:10:24,250 --> 00:10:28,680
Tenemos el selector de elementos para seleccionar todo un elemento dado.

133
00:10:28,720 --> 00:10:31,780
Todos los ALWIS divs todos los párrafos.

134
00:10:32,120 --> 00:10:39,730
Tenemos el selector de identificación que seleccionará el elemento con la identificación correspondiente y siempre necesitamos usar una

135
00:10:39,730 --> 00:10:41,120
octava para eso.

136
00:10:41,240 --> 00:10:42,590
O un símbolo hash.

137
00:10:42,970 --> 00:10:48,300
Y luego tenemos el selector de clase que es muy similar al selector de ID excepto que seleccionamos basado en un

138
00:10:48,310 --> 00:10:54,010
nombre de clase y una clase puede ocurrir tantas veces como queramos en una página dada a diferencia de una ID que es

139
00:10:54,000 --> 00:10:54,790
solo una vez