1
00:00:00,200 --> 00:00:02,540
Está bien, así que es hora de otro ejercicio aquí.

2
00:00:02,820 --> 00:00:08,430
Así que este ejercicio cubrirá todo lo que hemos hablado en lo que respecta a los selectores de SS.

3
00:00:08,520 --> 00:00:14,700
Por lo tanto, no vamos a construir ningún tipo de sitio web cohesivo completo que venga a continuación.

4
00:00:14,700 --> 00:00:17,930
Vamos a hacer un pequeño blog en el próximo ejercicio.

5
00:00:17,970 --> 00:00:23,460
Este es más un ejercicio tradicional con un montón de problemas muy cortos.

6
00:00:23,460 --> 00:00:28,150
Básicamente, les estoy dando un montón de HMO, se ve así.

7
00:00:28,200 --> 00:00:29,900
Realmente no significa nada.

8
00:00:29,910 --> 00:00:33,640
De hecho, todo el texto aquí es de un sitio web llamado hipster ipsum.

9
00:00:33,650 --> 00:00:41,280
Es como un dormitorio ipsum, excepto que está usando palabras hipster como farm to table

10
00:00:41,280 --> 00:00:44,170
y locavore y Portland y Williamsburg.

11
00:00:44,340 --> 00:00:45,940
Entonces es solo un montón de palabras.

12
00:00:46,260 --> 00:00:51,500
Entonces, el punto es que no importa lo que hay aquí, lo que sí importa es este archivo.

13
00:00:51,570 --> 00:00:54,700
El archivo CSSA que también te di y está vacío.

14
00:00:54,810 --> 00:01:00,250
Además de un montón de comentarios, estos comentarios te dan instrucciones para lo que debes hacer.

15
00:01:00,360 --> 00:01:06,030
Así que arriba es el estilo de línea más importante, los elementos HTML de edad de acuerdo con las

16
00:01:06,240 --> 00:01:09,250
siguientes instrucciones no alteran el HVM existente para hacerlo bien.

17
00:01:09,270 --> 00:01:11,020
Solo CSI s.

18
00:01:11,130 --> 00:01:14,120
Entonces eso significa que no toques este archivo.

19
00:01:14,190 --> 00:01:16,430
Esto es aquí solo como código de inicio para ti.

20
00:01:16,440 --> 00:01:17,690
Este es el HVM.

21
00:01:17,970 --> 00:01:24,450
Vas a hacer todo en C SS. Así que no puedes entrar aquí y agregar nuevas ideas o agregar nuevas clases o

22
00:01:24,750 --> 00:01:25,710
agregar nuevos elementos.

23
00:01:25,710 --> 00:01:28,350
Solo mantenlo exactamente como es.

24
00:01:28,580 --> 00:01:32,120
Entonces, la forma en que funciona allí son problemas diferentes.

25
00:01:32,190 --> 00:01:37,310
Entonces, el primero le da al elemento del cuerpo un fondo de este color.

26
00:01:37,440 --> 00:01:45,210
Simplemente escribiremos el código para seleccionar el cuerpo y luego le daremos un color como este.

27
00:01:45,210 --> 00:01:48,690
Así que te daré esa gratis.

28
00:01:49,050 --> 00:01:51,200
Estoy seguro de que la mayoría de ustedes podría haber hecho eso.

29
00:01:51,300 --> 00:01:57,720
Lo mismo ocurre con todos estos, por lo tanto, haga que todos los h hagan que todos los años hagan algo para que todos los elementos aliados tengan

30
00:01:57,720 --> 00:01:58,350
una sola nota.

31
00:01:58,350 --> 00:02:04,020
Algunos de estos le pedirán que use una propiedad que todavía no hemos cubierto y que es deliberada.

32
00:02:04,590 --> 00:02:08,760
algo de experiencia en algunas propiedades de las que todavía no hemos hablado explícitamente en los videos.

33
00:02:08,760 --> 00:02:09,750
Solo quiero que tengas

34
00:02:10,080 --> 00:02:11,960
Entonces en ese caso aquí hay uno.

35
00:02:12,030 --> 00:02:18,600
Haga que todos los párrafos que están anidados dentro de div dividan 25 píxeles y luego entre paréntesis, le doy

36
00:02:18,600 --> 00:02:22,700
el código que necesita para el tamaño de la fuente 25 x.

37
00:02:23,070 --> 00:02:24,490
Entonces hay algunos más de esos.

38
00:02:24,720 --> 00:02:32,160
Aquí hay una y aquí hay otra más: haga que todas las casillas marcadas tengan un margen izquierdo de 50 píxeles, por lo

39
00:02:32,160 --> 00:02:37,650
que necesita usar un margen de 50 píxeles y está bien que no sepa exactamente qué hace

40
00:02:37,650 --> 00:02:39,330
eso en los próximos videos.

41
00:02:39,450 --> 00:02:40,900
Entonces, otra nota aquí.

42
00:02:41,040 --> 00:02:44,080
Estos se vuelven un poco más difíciles a medida que avanzan.

43
00:02:44,190 --> 00:02:52,020
Así que arriba empiezan con un selector de elementos y luego hablamos de clases e ideas y luego comenzamos a hablar

44
00:02:52,020 --> 00:02:56,270
sobre algunos de los otros selectores que mencionamos en el último video.

45
00:02:56,430 --> 00:03:03,960
Así que haga que todos los párrafos que están anidados dentro de los divs solo hagan entradas con texto tipo.

46
00:03:03,960 --> 00:03:11,910
Tener un gran fondo y luego cosas como dar el segundo párrafo dentro del tercer borde div

47
00:03:11,910 --> 00:03:13,160
5 pixel blanco.

48
00:03:13,710 --> 00:03:20,040
buena noticia es que todos los selectores que necesita usar aquí se pueden encontrar en los selectores de CSSA de los años 30.

49
00:03:20,090 --> 00:03:20,640
Entonces, la

50
00:03:20,640 --> 00:03:25,890
Debe memorizar el artículo y puede encontrarlo fácilmente en línea y hemos cubierto la mayoría de ellos.

51
00:03:26,130 --> 00:03:31,620
Aunque hay algunos que no cubrimos en el último video y están en la sección de

52
00:03:31,620 --> 00:03:32,410
desafíos adicionales.

53
00:03:32,580 --> 00:03:39,870
Eso incluye cosas como hacer que todas las casillas marcadas tengan un margen izquierdo, por lo que hay

54
00:03:39,990 --> 00:03:42,780
una forma de seleccionar las casillas marcadas.

55
00:03:42,780 --> 00:03:44,050
O aquí hay otro.

56
00:03:44,110 --> 00:03:49,750
Haga la primera letra del elemento con un tamaño especial de letra verde y de 100 píxeles.

57
00:03:49,950 --> 00:03:54,100
Entonces hay una manera de seleccionar solo la primera letra.

58
00:03:54,570 --> 00:04:00,150
Haga que el color de los elementos H-1 cambie a azul cuando se coloca sobre ellos y haga que los elementos de una etiqueta que se

59
00:04:00,150 --> 00:04:01,340
han visitado se vuelvan grises.

60
00:04:01,350 --> 00:04:05,070
Así que recuerda que una etiqueta es un enlace y probablemente ya has visto esto antes.

61
00:04:05,190 --> 00:04:09,420
Puede cambiar o los sitios cambiarán el color de un enlace al que ha estado en comparación con un enlace en

62
00:04:09,420 --> 00:04:10,730
el que no haya estado antes.

63
00:04:11,100 --> 00:04:14,120
Entonces hay una forma de escribir que vería evaluar.

64
00:04:14,310 --> 00:04:17,450
Entonces, como siempre, en el próximo video vamos a repasar una solución.

65
00:04:17,460 --> 00:04:23,880
Puede ir poco a poco, pero le recomiendo que pruebe esto hasta donde pueda probar todas estas bonificaciones.

66
00:04:24,660 --> 00:04:28,430
Una cosa que no mencioné aquí, esta es ligeramente diferente.

67
00:04:28,500 --> 00:04:34,970
Convierta todos los elementos de la etiqueta en mayúsculas sin cambiar el h t m l, de modo que el selector

68
00:04:35,340 --> 00:04:41,430
aquí es realmente simple. Solo estamos seleccionando todos los elementos de la etiqueta, pero la propiedad es un poco desafiante.

69
00:04:41,430 --> 00:04:47,250
Hay una manera de usar C Ss para hacer algo en mayúsculas sin cambiar el texto en el

70
00:04:47,450 --> 00:04:47,870
HTML.

71
00:04:47,880 --> 00:04:51,720
Puede hacerlo a través de C S igual que cambiaría el color o el borde.

72
00:04:51,720 --> 00:04:55,320
Puede cambiar una propiedad que la convertirá en mayúscula o minúscula.

73
00:04:55,560 --> 00:04:56,690
Muy bien, así que mira en el siguiente video