No tópico 1.8 foi visto uma base sobre cores, agora vamos ver um pouco sobre background e bordas. Quem acompanhou o chat passado sobre introdução ao CSS já deve ter uma noção do que vai ser visto neste tópico mas como tem gente que acompanha só os tópicos e não acompanha muito os vídeos, vou repetir o assunto aqui.
Mas pra quem ficou curioso sobre o chat, o vídeo foi este aqui
Vamos criar um novo index.html e adicionar o seguinte template a ele:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tópico 1.9</title>
</head>
<style>
</style>
<body>
<h1>Tópico 1.9</h1>
</body>
</html>
Se eu salvar o arquivo e abri-lo, teremos:
Até aqui nada de novo sob o sol. Vamos mudar a cor de fundo de todo o body usando a propriedade background-color, usando uma tom de verde com numeração hexadecimal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tópico 1.9</title>
</head>
<style>
body {
background-color: #7edb67;
}
</style>
<body>
<h1>Tópico 1.9</h1>
</body>
</html>
E agora nossa página ficou assim:
Vou apagar a mudança de cor de fundo do body e criar algumas divs dentro do HTML, com um parágrafo com texto aleatório:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tópico 1.9</title>
</head>
<style></style>
<body>
<div class="div-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus
laudantium laborum ea sed nobis aspernatur deleniti doloremque nihil
architecto aliquam? Nulla fugiat facilis temporibus assumenda tenetur,
molestias expedita. Consequatur, maiores?
</p>
</div>
<div class="div-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus
laudantium laborum ea sed nobis aspernatur deleniti doloremque nihil
architecto aliquam? Nulla fugiat facilis temporibus assumenda tenetur,
molestias expedita. Consequatur, maiores?
</p>
</div>
<div class="div-3">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus
laudantium laborum ea sed nobis aspernatur deleniti doloremque nihil
architecto aliquam? Nulla fugiat facilis temporibus assumenda tenetur,
molestias expedita. Consequatur, maiores?
</p>
</div>
<div class="div-4">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus
laudantium laborum ea sed nobis aspernatur deleniti doloremque nihil
architecto aliquam? Nulla fugiat facilis temporibus assumenda tenetur,
molestias expedita. Consequatur, maiores?
</p>
</div>
</body>
</html>
Agora nossa página está assim:
Vamos mudar o background-color de cada div dessas:
<style>
.div-1 {
background-color: #13a8ce;
}
.div-2 {
background-color: #e4639f;
}
.div-3 {
background-color: #cf3a15;
}
.div-4 {
background-color: #19bb41;
}
</style>
O resultado será este:
Aqui vou adiantar um pouco de um assunto que irei tratar no próximo tópico que é essa questão de existir espaços entre cada parágrafo. Se vocês estiverem usando o Google Chrome, que é o browser que eu recomendo pra usar nos estudos de web, clicando ctrl + shift + I na página você irá abrir o Chrome Dev Tools. Abaixo, dou uma pequena demonstração de como inspecionar uma página web usando o Chrome Dev Tools:
Observem que quando eu marquei o elemento <p> o retângulo inferior mostrou algumas propriedades desse elemento parágrafo, como margin, border, padding, e podemos ver que cada parágrafo tem 16 alguma coisa de margem superior e inferior. Esse número representa uma unidade em pixels, então cada parágrafo tem 16 pixels de margem superior e inferior, e é esta margem que empurra cada bloco colorido, cada div, para cima ou para baixo, mantendo esse espaço em branco entre cada div.
Se quisermos colar uma div em outra basta zerar todas as margens e todos os paddings da nossa página usando o seletor universal * (asterisco):
<style>
* {
margin: 0;
padding: 0;
}
.div-1 {
background-color: #13a8ce;
}
.div-2 {
background-color: #e4639f;
}
.div-3 {
background-color: #cf3a15;
}
.div-4 {
background-color: #19bb41;
}
</style>
Nossa página agora fica assim:
Agora se eu quiser "setar" uma margem entre algum elemento, tenho que adicionar manualmente. Vamos criar uma margem inferior (margin-bottom) para a div 2, o que irá separar as divs 2 e 3:
<style>
* {
margin: 0;
padding: 0;
}
.div-1 {
background-color: #13a8ce;
}
.div-2 {
background-color: #e4639f;
margin-bottom: 40px;
}
.div-3 {
background-color: #cf3a15;
}
.div-4 {
background-color: #19bb41;
}
</style>
A página agora fica assim:
Mas já estou falando de box-model, margens, etc, e isso é assunto pro próximo tópico.
Voltando às nossas divs, já vimos como alterar o background pela cor, mas também podemos mudar o background adicionando uma imagem.
Vou usar esta imagem como papel de parede de nossa página:
E vou zerar as cores de fundo de cada div. A tag style vai ficar assim:
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url('background.jpg') no-repeat center fixed;
background-size: cover;
}
</style>
Por meio da propriedade background, eu informo que o fundo vai ser uma imagem, usando a função url() com o path para a imagem na nossa raiz. Os valores no-repeat, center e fixed são para manter a imagem centralizada e fixa na nossa página. Se eu não adicionar o valor no-repeat, a imagem irá ficar se repetindo se não estiver centralizada.
Por exemplo, se minha imagem tiver 400 pixels de largura mas minha página web tiver, no meu dispositivo, ocupando uma largura de 800 pixels, a imagem irá se repetir duas vezes, uma ao lado da outra, e teremos um efeito mais ou menos assim:
Já a propriedade background-size tendo como valor "cover" me permite fazer a imagem ocupar todo o espaço da tela. O resultado final será este:
Recomendo quem estiver acompanhando testar a retirada de cada valor acima, como no-repeat, o center, etc, e ver como a imagem se comporta. Mostrar todos esses testes e fazer print de todos é inviável.
A letra preta e o fundo escuro não facilitaram nada, mas a ideia aqui era só mostrar essa possibilidade.
Eu poderia aumentar a transparência da imagem de fundo e continuar o tópico com ele mais transparente mas vou ter que falar de coisas que não quero falar agora, então vou tirar a imagem de fundo e voltar com o fundo branco mesmo.
Vou adicionar uma borda a cada div, de formatos diferentes. Para adicionar borda, usamos a propriedade border e passamos como valores o tamanho, o estilo e a cor da borda. Vou retirar o reset de margin e padding e adicionar uma margem superior e inferior de 20px para cada div para podermos ver melhor a diferença entre cada borda:
<style>
div {
margin: 20px 0;
}
.div-1 {
border: 5px solid red;
}
.div-2 {
border: 5px dotted blue;
}
.div-3 {
border: 10px dashed green;
}
.div-4 {
border: 10px double orange;
}
</style>
A página fica assim:
Também posso mudar as bordas para formatos mais arredondados usando a propriedade border-radius:
<style>
div {
margin: 20px 0;
}
.div-1 {
border: 5px solid red;
border-radius: 10px;
}
.div-2 {
border: 5px dotted blue;
border-radius: 20px;
}
.div-3 {
border: 10px dashed green;
border-radius: 30px;
}
.div-4 {
border: 10px double orange;
border-radius: 50px;
}
</style>
O resultado será este:
Ainda tenho mais a falar de bordas mas complementamos esse tópico no próximo.
