1
00:00:00,350 --> 00:00:06,000
Nesta lição vamos abordar duas novas propriedades de fundo que usamos para alterar a cor de

2
00:00:06,000 --> 00:00:10,120
fundo ou a imagem de fundo de um elemento e uma borda.

3
00:00:10,260 --> 00:00:14,670
Então, vamos começar com o fundo, como você pode ver, eu tenho um pequeno exemplo aqui.

4
00:00:14,670 --> 00:00:16,260
Então, aqui está o resultado final.

5
00:00:16,440 --> 00:00:19,890
Observe que temos um fundo cinza no corpo.

6
00:00:20,010 --> 00:00:25,840
Vindo daqui e depois temos um fundo azul na div que vem daqui.

7
00:00:26,040 --> 00:00:29,490
E também temos texto em branco no parágrafo.

8
00:00:29,580 --> 00:00:35,040
Então, vamos em frente e tente isso usando a página About Me com a qual trabalhamos.

9
00:00:35,220 --> 00:00:40,140
E vamos seguir em frente e mudar os meus passatempos para a frente e dar-lhe uma cor de fundo.

10
00:00:40,560 --> 00:00:42,460
Vamos dar uma cor laranja.

11
00:00:42,900 --> 00:00:47,840
Então, novamente, queremos selecionar essa idade de quatro, então escrevemos quatro anos.

12
00:00:48,540 --> 00:00:54,990
E, em seguida, dentro dos aparelhos curly você vai dizer fundo e nós faremos um R G B e

13
00:00:54,990 --> 00:00:57,230
nós faremos como uma cor alaranjada.

14
00:00:57,260 --> 00:01:04,560
Então, eles serão muito vermelhos um pouco verdes e um pouco azul e vamos atualizar e nós

15
00:01:04,560 --> 00:01:06,670
recebemos essa cor coral agradável.

16
00:01:06,780 --> 00:01:11,760
um fundo que é algo que você vê frequentemente em um site onde o fundo inteiro é uma nova cor.

17
00:01:12,120 --> 00:01:15,490
Então, em seguida, vamos dar o plano de fundo, vamos dar ao corpo

18
00:01:15,780 --> 00:01:16,830
Então, vamos

19
00:01:19,430 --> 00:01:28,590
fazer alguma coisa como fundo e vamos apenas dizer que ser rosa por enquanto e vamos todo

20
00:01:28,860 --> 00:01:31,290
o fundo é rosa.

21
00:01:31,290 --> 00:01:36,870
Então, essa é a propriedade de fundo usada para mudar a cor de algo.

22
00:01:37,680 --> 00:01:43,650
Mas também podemos usar a propriedade de fundo para alterar o plano de fundo para ser uma imagem que mostra

23
00:01:43,650 --> 00:01:44,820
também ver muito frequentemente.

24
00:01:45,150 --> 00:01:52,680
de fundo, mas, em vez de uma cor, dizemos que você e, em parênteses, damos a você uma imagem onde a imagem está localizada.

25
00:01:52,950 --> 00:01:55,760
Assim, da forma como funciona, ainda especificamos o plano

26
00:01:56,190 --> 00:02:04,920
Então, vamos encontrar um woodgrain, vamos encontrar uma imagem como essa aqui.

27
00:02:05,350 --> 00:02:06,980
Então, apenas copie essa imagem.

28
00:02:07,200 --> 00:02:11,560
Você joga, vamos definir isso como fundo.

29
00:02:12,390 --> 00:02:21,900
Então, no nosso corpo, eu vou apenas dizer o que você conhece e, na verdade, você é o Ellett que acabei de copiar.

30
00:02:21,900 --> 00:02:23,770
Então, isso funcionará com qualquer imagem.

31
00:02:24,050 --> 00:02:32,460
E se nos refrescarmos, vejamos que o nosso plano de fundo foi definido, mas você notará uma coisa pequena, que é que nossa

32
00:02:32,460 --> 00:02:35,220
imagem não é realmente grande o suficiente.

33
00:02:35,220 --> 00:02:41,760
Se voltarmos para isso, não está perto de ser suficientemente grande para cobrir todo o nosso corpo aqui.

34
00:02:41,850 --> 00:02:44,100
Então o que aconteceu é que está sendo apertado.

35
00:02:44,280 --> 00:02:48,900
Você pode ver que você sabe que está sendo intitulado em mosaico horizontal e verticalmente.

36
00:02:49,320 --> 00:02:53,870
Então, se não queremos isso e às vezes você faz, mas a maioria do tempo não parece muito bom.

37
00:02:54,180 --> 00:03:03,220
Então, se não quisermos que haja outra propriedade que podemos configurar e que seja uma repetição em segundo plano.

38
00:03:04,380 --> 00:03:11,530
E se configurarmos isso para não repetir e salvar.

39
00:03:12,300 --> 00:03:15,720
Agora estabelecemos o fundo de seu corpo e não está repetindo.

40
00:03:16,260 --> 00:03:21,190
Mas você também notará que não está se esticando para cobrir todo o corpo.

41
00:03:21,240 --> 00:03:27,690
Então, se quiséssemos que ele esticasse em toda a tela ou em todo

42
00:03:27,720 --> 00:03:38,230
o corpo, existe uma outra propriedade que podemos definir qual é o tamanho do fundo e podemos definir isso para cobrir.

43
00:03:39,240 --> 00:03:42,890
Então, como você pode ver, agora ocupa todo o corpo.

44
00:03:43,430 --> 00:03:48,600
Claro que não é a melhor imagem para isso, porque está um pouco desfocada, é um pouco

45
00:03:48,630 --> 00:03:54,690
pixelado, mas quando você está fazendo uma imagem de fundo, geralmente quer ter certeza de que você tem algo

46
00:03:54,840 --> 00:04:00,840
que é grande e de alta resolução ou algo que tenha uma imagem menor que pode ser repetido perfeitamente

47
00:04:00,840 --> 00:04:01,680
ao contrário deste.

48
00:04:01,740 --> 00:04:07,430
em ambos os eixos, então, se o repetimos, é muito claro que há divisões e azulejos acontecendo.

49
00:04:07,470 --> 00:04:08,870
Você não sabe simétrico

50
00:04:09,300 --> 00:04:09,600
ESTÁ BEM.

51
00:04:09,600 --> 00:04:16,210
Então, esse é o plano de fundo e o uso de cor e plano de fundo para definir uma imagem de plano de fundo.

52
00:04:16,350 --> 00:04:19,460
A próxima coisa que quero mostrar é como nós conseguimos uma fronteira.

53
00:04:19,770 --> 00:04:24,660
Então, na verdade, vou chegar a isso porque é um pouco perturbador e vamos

54
00:04:25,320 --> 00:04:27,170
voltar ao fundo como rosa

55
00:04:30,400 --> 00:04:33,960
e vamos entrar e adicionar fronteiras a todos os h.

56
00:04:34,470 --> 00:04:38,560
Então, uma borda e C S tem três partes diferentes.

57
00:04:38,700 --> 00:04:43,630
Há a cor com o estilo.

58
00:04:45,090 --> 00:04:49,310
Então, comecemos por dar uma cor de borda a cada um.

59
00:04:49,320 --> 00:04:54,660
Parece apenas essa cor da borda e essa borda.

60
00:04:54,780 --> 00:05:01,140
Vamos simplesmente com roxo e, se atualizarmos, na verdade não vemos nada e é porque atualmente

61
00:05:01,140 --> 00:05:03,110
nossa borda não tem largura.

62
00:05:03,150 --> 00:05:05,780
Então, a próxima coisa que precisamos fazer é dar isso.

63
00:05:06,120 --> 00:05:10,020
Então, border with it apenas dê um número em pixels.

64
00:05:10,230 --> 00:05:20,270
Vamos fazer cinco pixels cinco x atualizar e ainda estamos faltando uma coisa que é estilo.

65
00:05:21,300 --> 00:05:25,920
Então você verá que nada disso funciona a menos que tenhamos todos os três configurados.

66
00:05:25,920 --> 00:05:29,060
Então, o estilo de borda tem algumas opções diferentes.

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

68
00:05:31,040 --> 00:05:33,160
Eu tracei uma borda pontilhada.

69
00:05:33,390 --> 00:05:34,470
Há alguns outros.

70
00:05:34,470 --> 00:05:41,600
A maior parte do tempo, o que você vê, é apenas sólido, tão sólido, de cinco pixels em roxo.

71
00:05:41,820 --> 00:05:46,490
E nós conseguimos uma borda em torno de todos os H.

72
00:05:47,100 --> 00:05:50,230
Há cortes e cortes legais que podemos usar.

73
00:05:50,250 --> 00:05:57,080
Então, porque muitas vezes estabelecemos os três destes ao mesmo tempo, existe a sintaxe equivalente que se

74
00:05:57,090 --> 00:05:57,940
chama fronteira.

75
00:05:58,560 --> 00:06:08,040
E nós colo do lado direito nós damos com 5 pixels o estilo sólido e a cor roxa.

76
00:06:08,040 --> 00:06:11,760
Então eu posso realmente comentar isso e você verá nada mudar.

77
00:06:11,760 --> 00:06:13,350
É idêntico.

78
00:06:13,350 --> 00:06:15,410
Então vamos jogar o jogo um pouco.

79
00:06:15,450 --> 00:06:30,110
Vamos com um Fash de dasht de 8 pixels que é apenas pegue a nossa R. G. B de baixo aqui e nós temos esse bom

80
00:06:30,120 --> 00:06:32,690
efeito de borda tracejada.

81
00:06:32,760 --> 00:06:35,050
Então, você sabe, geralmente, não vi isso.

82
00:06:35,310 --> 00:06:40,380
Eu não vi isso desde os sites de volta nos anos 90 usando isso todos os estilos diferentes do tempo.

83
00:06:40,380 --> 00:06:46,960
Normalmente, tudo o que você vê é um bom limite fino de um ou dois pixels.

84
00:06:47,530 --> 00:06:48,010
ESTÁ BEM.

85
00:06:48,120 --> 00:06:54,230
Então, apenas para recapitular a fronteira, podemos definir propriedades individualmente ou podemos usar cortes

86
00:06:54,240 --> 00:06:58,040
e impostos e definir o estilo com a cor.

87
00:06:58,110 --> 00:06:58,900
Tudo de uma vez