1
00:00:00,350 --> 00:00:06,000
En esta lección vamos a cubrir dos nuevas propiedades de fondo que usamos para cambiar el color

2
00:00:06,000 --> 00:00:10,120
de fondo o la imagen de fondo de un elemento y borde.

3
00:00:10,260 --> 00:00:14,670
Así que vamos a comenzar con el fondo, como pueden ver. Tengo un pequeño ejemplo aquí.

4
00:00:14,670 --> 00:00:16,260
Así que aquí está su resultado final.

5
00:00:16,440 --> 00:00:19,890
Tenga en cuenta que tenemos un fondo gris en el cuerpo.

6
00:00:20,010 --> 00:00:25,840
Viniendo de aquí y luego tenemos un fondo azul en el div que viene de aquí.

7
00:00:26,040 --> 00:00:29,490
Y luego también tenemos texto blanco en el párrafo.

8
00:00:29,580 --> 00:00:35,040
Así que vamos a intentarlo usando la página Acerca de mí con la que hemos estado trabajando.

9
00:00:35,220 --> 00:00:40,140
Y sigamos adelante y cambie mis hobbies h adelante y déle un color de fondo.

10
00:00:40,560 --> 00:00:42,460
Vamos a darle un color naranja.

11
00:00:42,900 --> 00:00:47,840
Así que de nuevo queremos seleccionar esta edad de cuatro años, así que escribimos la edad cuatro.

12
00:00:48,540 --> 00:00:54,990
Y luego, dentro de las llaves, vas a decir fondo y haremos un RG B y

13
00:00:54,990 --> 00:00:57,230
lo haremos como un color naranja.

14
00:00:57,260 --> 00:01:04,560
Así que serán un montón de rojo, un poco verde y un poco azul, y vamos a refrescarnos y

15
00:01:04,560 --> 00:01:06,670
obtendremos este bonito color coral.

16
00:01:06,780 --> 00:01:11,760
algo que ve a menudo en un sitio web donde todo el fondo es de un nuevo color.

17
00:01:12,120 --> 00:01:15,490
Entonces, déjenos dar el trasfondo, démosle al cuerpo un fondo que es

18
00:01:15,780 --> 00:01:16,830
Así que

19
00:01:19,430 --> 00:01:28,590
vamos a hacer algo como fondo y digamos que para ser rosado por ahora y luego vamos

20
00:01:28,860 --> 00:01:31,290
todo el fondo es rosado.

21
00:01:31,290 --> 00:01:36,870
Entonces esa es la propiedad de fondo que se usa para cambiar el color de algo.

22
00:01:37,680 --> 00:01:43,650
Pero también podemos usar la propiedad de fondo para cambiar el fondo para que sea una imagen que también se

23
00:01:43,650 --> 00:01:44,820
vea con bastante frecuencia.

24
00:01:45,150 --> 00:01:52,680
el fondo, pero en lugar de un color, decimos Arel y luego entre paréntesis, le damos un lugar donde se ubica la imagen.

25
00:01:52,950 --> 00:01:55,760
Entonces, de la manera en que funciona, todavía especificamos

26
00:01:56,190 --> 00:02:04,920
Así que vamos a buscar algunos granos de madera, vamos a encontrar una imagen como esta aquí.

27
00:02:05,350 --> 00:02:06,980
Así que copiemos esta imagen.

28
00:02:07,200 --> 00:02:11,560
Si lo lanzas, lo estableceremos como fondo.

29
00:02:12,390 --> 00:02:21,900
Entonces en nuestro cuerpo solo voy a decir que eres Earl y en eso eres Ellett. Acabo de copiar.

30
00:02:21,900 --> 00:02:23,770
Entonces esto funcionará con cualquier imagen.

31
00:02:24,050 --> 00:02:32,460
Y si actualizamos bien, vemos que nuestro fondo se ha configurado, pero notará una pequeña cosa que es que nuestra

32
00:02:32,460 --> 00:02:35,220
imagen no es lo suficientemente grande.

33
00:02:35,220 --> 00:02:41,760
Si volvemos a eso, no está cerca de ser lo suficientemente grande como para cubrir todo nuestro cuerpo aquí.

34
00:02:41,850 --> 00:02:44,100
Entonces, lo que sucedió es que está siendo apretado.

35
00:02:44,280 --> 00:02:48,900
Puedes ver que sabes que está titulándose en mosaico horizontal y verticalmente.

36
00:02:49,320 --> 00:02:53,870
Entonces, si no queremos eso ya veces lo haces, pero la mayoría del tiempo no se ve muy bien.

37
00:02:54,180 --> 00:03:03,220
Entonces, si no queremos que haya otra propiedad que podamos establecer y que sea fondo, repita.

38
00:03:04,380 --> 00:03:11,530
Y si establecemos que no se repita y guarde.

39
00:03:12,300 --> 00:03:15,720
Ahora hemos establecido el fondo de su cuerpo y no se repite.

40
00:03:16,260 --> 00:03:21,190
Pero también notarás que no se extiende para cubrir todo el cuerpo.

41
00:03:21,240 --> 00:03:27,690
Entonces, si queríamos que se extendiera por toda la pantalla o por todo

42
00:03:27,720 --> 00:03:38,230
el cuerpo, hay otra propiedad que podemos establecer, que es el tamaño de fondo, y podemos configurarlo para que cubra.

43
00:03:39,240 --> 00:03:42,890
Entonces, como pueden ver, ahora ocupa todo el cuerpo.

44
00:03:43,430 --> 00:03:48,600
Por supuesto, no es la mejor imagen para esto porque está un poco borrosa, está un

45
00:03:48,630 --> 00:03:54,690
poco pixelada, pero cuando estás haciendo una imagen de fondo, normalmente quieres asegurarte de tener algo de gran y

46
00:03:54,840 --> 00:04:00,840
alta resolución o algo que tenga una imagen más pequeña que se puede repetir a la perfección a diferencia

47
00:04:00,840 --> 00:04:01,680
de este.

48
00:04:01,740 --> 00:04:07,430
es simétrico en ambos ejes, así que si lo repetimos está muy claro que hay divisiones y mosaicos.

49
00:04:07,470 --> 00:04:08,870
No es que sepas que

50
00:04:09,300 --> 00:04:09,600
DE ACUERDO.

51
00:04:09,600 --> 00:04:16,210
Así que ese es el fondo y el uso de fondo de color y fondo para establecer una imagen de fondo.

52
00:04:16,350 --> 00:04:19,460
Lo siguiente que quiero mostrar es cómo obtenemos un borde.

53
00:04:19,770 --> 00:04:24,660
Así que en realidad voy a hablar de esto porque es un poco molesto

54
00:04:25,320 --> 00:04:27,170
y volvamos al fondo como

55
00:04:30,400 --> 00:04:33,960
rosa y vamos a agregar bordes a todos los h.

56
00:04:34,470 --> 00:04:38,560
Entonces un borde y C S tiene tres partes diferentes.

57
00:04:38,700 --> 00:04:43,630
Está el con el color y el estilo.

58
00:04:45,090 --> 00:04:49,310
Empecemos por darle un color de borde a cada uno.

59
00:04:49,320 --> 00:04:54,660
Simplemente se ve como este color de borde y ese borde.

60
00:04:54,780 --> 00:05:01,140
Vámonos con morado y si refrescamos no vemos nada y es porque actualmente nuestro

61
00:05:01,140 --> 00:05:03,110
borde no tiene ancho.

62
00:05:03,150 --> 00:05:05,780
Entonces, lo siguiente que tenemos que hacer es regalarlo.

63
00:05:06,120 --> 00:05:10,020
Entonces, bordearlo le dará un número en píxeles.

64
00:05:10,230 --> 00:05:20,270
Hagamos cinco píxeles cinco veces y todavía nos falta algo que sea estilo.

65
00:05:21,300 --> 00:05:25,920
Entonces verán que nada de esto funciona a menos que tengamos los tres establecidos.

66
00:05:25,920 --> 00:05:29,060
Entonces, el estilo de borde tiene algunas opciones diferentes.

67
00:05:29,100 --> 00:05:30,810
Podemos decir sólido.

68
00:05:31,040 --> 00:05:33,160
Corrí un borde punteado.

69
00:05:33,390 --> 00:05:34,470
Hay algunos otros.

70
00:05:34,470 --> 00:05:41,600
La mayoría del tiempo lo que ves es sólido, tan sólido, borde cinco píxeles púrpura.

71
00:05:41,820 --> 00:05:46,490
Y tenemos un borde alrededor de todos los H.

72
00:05:47,100 --> 00:05:50,230
Hay unos buenos atajos e impuestos que podemos usar.

73
00:05:50,250 --> 00:05:57,080
Entonces, como a menudo establecemos los tres a la vez, existe la sintaxis equivalente que simplemente se

74
00:05:57,090 --> 00:05:57,940
llama frontera.

75
00:05:58,560 --> 00:06:08,040
Y tenemos dos puntos, el color sólido y el color púrpura.

76
00:06:08,040 --> 00:06:11,760
Entonces, puedo comentarlos y no verán cambios.

77
00:06:11,760 --> 00:06:13,350
Es idéntico

78
00:06:13,350 --> 00:06:15,410
Así que juguemos un poco la jugada.

79
00:06:15,450 --> 00:06:30,110
Vamos con un Forder de 8 pixel dasht que es solo tomemos nuestra R. GRAMO. B desde abajo y tenemos este bonito

80
00:06:30,120 --> 00:06:32,690
efecto de borde discontinuo.

81
00:06:32,760 --> 00:06:35,050
Entonces, por lo general, no he visto esto.

82
00:06:35,310 --> 00:06:40,380
No he visto esto desde los sitios web en los años 90 usando este todo el tiempo diferentes estilos.

83
00:06:40,380 --> 00:06:46,960
Por lo general, todo lo que ves es un lindo borde delgado de uno o dos píxeles.

84
00:06:47,530 --> 00:06:48,010
DE ACUERDO.

85
00:06:48,120 --> 00:06:54,230
Solo para recapitular en el borde podemos establecer las propiedades individualmente o podemos usar los

86
00:06:54,240 --> 00:06:58,040
atajos e impuestos y establecer el estilo y el color.

87
00:06:58,110 --> 00:06:58,900
Todo en uno ir