Nesta lição vamos abordar duas novas propriedades de fundo que usamos para alterar a cor de
fundo ou a imagem de fundo de um elemento e uma borda.
Então, vamos começar com o fundo, como você pode ver, eu tenho um pequeno exemplo aqui.
Então, aqui está o resultado final.
Observe que temos um fundo cinza no corpo.
Vindo daqui e depois temos um fundo azul na div que vem daqui.
E também temos texto em branco no parágrafo.
Então, vamos em frente e tente isso usando a página About Me com a qual trabalhamos.
E vamos seguir em frente e mudar os meus passatempos para a frente e dar-lhe uma cor de fundo.
Vamos dar uma cor laranja.
Então, novamente, queremos selecionar essa idade de quatro, então escrevemos quatro anos.
E, em seguida, dentro dos aparelhos curly você vai dizer fundo e nós faremos um R G B e
nós faremos como uma cor alaranjada.
Então, eles serão muito vermelhos um pouco verdes e um pouco azul e vamos atualizar e nós
recebemos essa cor coral agradável.
um fundo que é algo que você vê frequentemente em um site onde o fundo inteiro é uma nova cor.
Então, em seguida, vamos dar o plano de fundo, vamos dar ao corpo
Então, vamos
fazer alguma coisa como fundo e vamos apenas dizer que ser rosa por enquanto e vamos todo
o fundo é rosa.
Então, essa é a propriedade de fundo usada para mudar a cor de algo.
Mas também podemos usar a propriedade de fundo para alterar o plano de fundo para ser uma imagem que mostra
também ver muito frequentemente.
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.
Assim, da forma como funciona, ainda especificamos o plano
Então, vamos encontrar um woodgrain, vamos encontrar uma imagem como essa aqui.
Então, apenas copie essa imagem.
Você joga, vamos definir isso como fundo.
Então, no nosso corpo, eu vou apenas dizer o que você conhece e, na verdade, você é o Ellett que acabei de copiar.
Então, isso funcionará com qualquer imagem.
E se nos refrescarmos, vejamos que o nosso plano de fundo foi definido, mas você notará uma coisa pequena, que é que nossa
imagem não é realmente grande o suficiente.
Se voltarmos para isso, não está perto de ser suficientemente grande para cobrir todo o nosso corpo aqui.
Então o que aconteceu é que está sendo apertado.
Você pode ver que você sabe que está sendo intitulado em mosaico horizontal e verticalmente.
Então, se não queremos isso e às vezes você faz, mas a maioria do tempo não parece muito bom.
Então, se não quisermos que haja outra propriedade que podemos configurar e que seja uma repetição em segundo plano.
E se configurarmos isso para não repetir e salvar.
Agora estabelecemos o fundo de seu corpo e não está repetindo.
Mas você também notará que não está se esticando para cobrir todo o corpo.
Então, se quiséssemos que ele esticasse em toda a tela ou em todo
o corpo, existe uma outra propriedade que podemos definir qual é o tamanho do fundo e podemos definir isso para cobrir.
Então, como você pode ver, agora ocupa todo o corpo.
Claro que não é a melhor imagem para isso, porque está um pouco desfocada, é um pouco
pixelado, mas quando você está fazendo uma imagem de fundo, geralmente quer ter certeza de que você tem algo
que é grande e de alta resolução ou algo que tenha uma imagem menor que pode ser repetido perfeitamente
ao contrário deste.
em ambos os eixos, então, se o repetimos, é muito claro que há divisões e azulejos acontecendo.
Você não sabe simétrico
ESTÁ BEM.
Então, esse é o plano de fundo e o uso de cor e plano de fundo para definir uma imagem de plano de fundo.
A próxima coisa que quero mostrar é como nós conseguimos uma fronteira.
Então, na verdade, vou chegar a isso porque é um pouco perturbador e vamos
voltar ao fundo como rosa
e vamos entrar e adicionar fronteiras a todos os h.
Então, uma borda e C S tem três partes diferentes.
Há a cor com o estilo.
Então, comecemos por dar uma cor de borda a cada um.
Parece apenas essa cor da borda e essa borda.
Vamos simplesmente com roxo e, se atualizarmos, na verdade não vemos nada e é porque atualmente
nossa borda não tem largura.
Então, a próxima coisa que precisamos fazer é dar isso.
Então, border with it apenas dê um número em pixels.
Vamos fazer cinco pixels cinco x atualizar e ainda estamos faltando uma coisa que é estilo.
Então você verá que nada disso funciona a menos que tenhamos todos os três configurados.
Então, o estilo de borda tem algumas opções diferentes.
Podemos dizer sólido.
Eu tracei uma borda pontilhada.
Há alguns outros.
A maior parte do tempo, o que você vê, é apenas sólido, tão sólido, de cinco pixels em roxo.
E nós conseguimos uma borda em torno de todos os H.
Há cortes e cortes legais que podemos usar.
Então, porque muitas vezes estabelecemos os três destes ao mesmo tempo, existe a sintaxe equivalente que se
chama fronteira.
E nós colo do lado direito nós damos com 5 pixels o estilo sólido e a cor roxa.
Então eu posso realmente comentar isso e você verá nada mudar.
É idêntico.
Então vamos jogar o jogo um pouco.
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
efeito de borda tracejada.
Então, você sabe, geralmente, não vi isso.
Eu não vi isso desde os sites de volta nos anos 90 usando isso todos os estilos diferentes do tempo.
Normalmente, tudo o que você vê é um bom limite fino de um ou dois pixels.
ESTÁ BEM.
Então, apenas para recapitular a fronteira, podemos definir propriedades individualmente ou podemos usar cortes
e impostos e definir o estilo com a cor.
Tudo de uma vez