Olá a todos, bem-vindos de volta.
Mais uma vez, vou pedir-te para parares de aprender e começares a programar e a praticar.
E vamos usar o mesmo exemplo que usamos na nossa primeira quebra de codificação.
Então eu queria mostrar a vocês qual era a nossa página antiga, bem aqui.
E veja como podemos transformá-lo em algo que se parece um pouco mais com
nossa nova página aqui,
onde temos implementado algumas de nossas margens, preenchimentos, larguras e alturas.
Tudo bem, então vamos em frente e começar.
A primeira coisa que quero fazer é usar exatamente a mesma folha de estilo que usei
na primeira. Não
há absolutamente nenhuma necessidade de recriar sua folha de estilo quando você pode simplesmente
usar esta e alterá-la, ou, se quiser, usar duas folhas de estilo.
Vou usar apenas um.
E a primeira coisa que eu vou corrigir é o fato de
que eu cometi o que você pode chamar de erro na minha versão anterior.
Eu tenho duas regras estilo h1.
Isso não é um problema.
O navegador aplicará todos esses estilos.
Mas o que eu realmente queria fazer era criar o estilo da etiqueta do corpo.
Então, vamos dar uma olhada no que parece agora.
E vamos voltar para a nossa versão atual.
E lá vamos nós.
Isso já parece um pouco melhor do que o que costumávamos ter.
Tudo bem, então agora que estou em um bom ponto de partida para quando eu começar,
vamos falar sobre as diferentes coisas que podemos estilizar em nossa página, certo?
Uma das primeiras coisas que quero fazer é adicionar um pouco de
margem à minha página.
Se você olhar para aqui, não há muito espaço entre a borda da página e
o navegador real.
Só quero acrescentar um pouco.
Você pode adicionar um pouco, você pode adicionar muito.
Na verdade, enquanto codificamos hoje, vou adicionar muito, só para que possam ver os efeitos.
Então, como você faz isso?
Como você adiciona esse espaço entre o elemento e seus vizinhos?
Você entra e nós vamos adicionar uma margem.
E, como eu disse, acho que vou torná-lo um pouco mais pronunciado do que
no código que mostrei bem ali.
Vou em frente e fazer 4%.
Então, quando fizermos isso, vou voltar para a página.
Vou recarregar.
E você pode ver que tudo está meio movido, certo?
Margin só adiciona um pouco de espaço e torna mais visualmente atraente para seus usuários,
certo?
Vamos pensar em outras coisas que queremos fazer.
Claramente eu provavelmente quero adicionar um pouco de espaço entre
meus links e a parte inferior do texto.
Então isso é um pouco diferente.
Não estou a dizer para separar os elementos,
estou a dizer que preciso de mais espaço entre a minha fronteira e o próprio elemento.
Então, nesse caso, o que queremos usar não é margem, queremos modificar o preenchimento.
Então vamos entrar e ver onde achamos que faríamos isso.
Tudo bem, então eu preciso adicionar preenchimento dentro de todo o cabeçalho.
Então vamos aqui e
eu vou mudá-lo para, preenchimento, novamente você pode escolher o que quiser.
Você pode usar pixels, você pode usar porcentagens.
Vou em frente neste caso, só vou colocar em pixels.
E eu vou dizer, por favor, adicione 15 pixels de espaço entre a borda e a parte inferior.
Então, atualize, oh, certifique-se que eu economize.
E atualizar, e
você pode ver que eu adicionei preenchimento todo o caminho em torno de toda a coisa.
Se eu realmente só queria estofamento para ser na parte inferior,
Eu poderia ter dito fundo preenchimento, ou preenchimento direito, ou preenchimento esquerda.
Tudo bem, vamos em frente e estilizar outra coisa.
Uma das grandes coisas que mudei foi que em vez de ter
um debaixo do outro, mudei estes para que ficassem um ao lado do outro.
Então lembre-se, por padrão, seções são blocos, eles são blocos de exibição,
o que significa que não deixe ninguém mais vir ao meu lado.
A fim de mudá-lo para que
eles estejam próximos um do outro, podemos usar inline ou inline-block.
Quase sempre quando dada esta escolha, você vai usar inline,
porque quando você usa inline, você pode incluir uma altura e uma largura.
Certo, volte para o meu arquivo CSS.
Não quero mudar o cabeçalho.
Acho que sou muito bom com H1.
O nav, o H2, oh, quer saber?
Eu não tenho nada que eu possa mudar aqui, então vamos
em frente e colocar uma nova etiqueta.
Seção, tudo bem, eu quero todas essas três seções próximas uma da outra.
Então o que eu poderia fazer é pegar talvez 400 pixels cada.
Bem, isso significaria que o navegador tem que ter pelo menos 1.200 pixels.
Eu poderia pegar 150 pixels cada.
Bem, isso significa que eles vão ficar muito magros mesmo que não precisem ser.
Então vamos usar porcentagens.
Eu vou usar 30%, não 33%, porque eu quero dar um pouco de espaço no cotovelo para
acolchoamentos, margens, fronteiras, etc
Tudo bem, vamos em frente e olhar para ele agora, eu quero ver como ele se parece.
Você pode ver que eu fiz 30%, mas eles ainda não estão ao lado um do outro.
Isso é porque eles ainda estão bloqueados.
Vamos alterá-los para inline-block, Display.
E esperemos pelo melhor.
Lá vamos nós.
Tenho as três coisas próximas uma da outra.
Ainda não está exatamente do jeito que queremos, mas é passo a passo.
Está a fazer este pequeno progresso de cada vez.
Vou em frente e corrigir o fato de que eles não estão todos alinhados no topo.
E eu vou dizer flutuar: esquerda; atualizar e estamos chegando mais perto,
estamos chegando mais perto, mas ainda há algo um pouco errado aqui.
Primeiro, eles são esmagados.
Eu não gosto de todos eles esmagados juntos.
Então, como você separa diferentes elementos um do outro?
Como você adiciona um pouco de espaço entre os elementos?
Tudo bem, se estivéssemos na aula, eu teria um aluno que é como ooh, ooh, ooh,
eu sei, sim, é margem, certo?
Margem, eu só vou colocar uma margem de um lado, digamos margin-direita.
E eu vou fazer algo pequeno como 2%.
Muito bem, estamos a aproximar-nos.
Estamos chegando mais perto.
Ainda não é bem o que queríamos, mas é assim que funciona.
Você adiciona um pouco.
Você se ajusta.
Você adiciona um pouco.
Então, um dos grandes problemas aqui é que quando você flutua as coisas para a esquerda, ou
quando você flutua coisas,
uma vez que você termina flutuando quando você não quer que os próximos elementos flutuem.
Você realmente tem que entrar e dizer, oh, mas eu não quero flutuar esta parte.
Assim que terminarmos com essas três seções,
não queremos que o rodapé seja também tê-los ao lado deles.
Então vamos entrar e ajustar o código do rodapé.
Aqui em baixo.
Tudo bem, se você se lembra, se você não quer que as coisas flutuem ao seu lado,
nós vamos usar os dois, o
que significa que não deixe nada flutuar em ambos os lados de mim.
Oh, muito melhor, certo?
Parece muito, muito melhor.
E além do fato de eu ter cores estranhas,
estamos muito perto de aqui.
Na verdade, eu meio que gosto do cinza no cabeçalho e no rodapé, então
eu vou deixá-lo.
Mas o que eu quero fazer é que eu quero fazer essa foto menor.
Este pequeno ícone aqui, vamos fazer com que pareça um pouco mais com isso.
E isso é muito simples para a abordagem que vamos usar agora.
Vamos em frente.
Vou adicionar uma imagem.
E eu vou em frente e apenas codificá-lo agora mesmo.
Então, eu vou fazer 75 pixels.
Ops, vou ter que dizer largura:75px.
Vamos dar uma olhada em como nos saímos.
Sim, isso parece bem.
Se eu não gostasse e quisesse brincar com ele, não entraria aqui e
tentaria 100 e depois 80 e depois 52.
O que eu faria é entrar aqui e fazer o Inspect Element novamente.
E eu, oh, tornaria isso muito maior porque caso contrário, tudo parece realmente louco.
E eu iria para a imagem e
eu diria, ok como é se em vez disso eu fizer 150 pixels?
Isso parece melhor?
Ou oops, não quero fazer isso.
Ou se eu fizer 125 pixels?
Eu gosto disso?
Escolha um valor que você gosta e,
quando encontrar algo que pareça bom para você, copie esse valor para a folha de estilos.
Porque se eu atualizá-lo agora, meus valores de elemento de inspeção desaparecem.
Tudo bem, vamos entrar aqui, consertar, salvar e atualizar.
Tudo bem, então isso é ótimo,
esses são os tipos de coisas que quero que você faça nesta aula.
Quero que pegue um arquivo HTML e diga ooh, posso mudar isso por aí?
O que posso fazer para torná-lo diferente?
Claramente, esta página que criamos aqui não é um produto acabado.
Não é exatamente como você gostaria que fosse na internet.
Então vamos continuar aprendendo coisas novas e
vamos continuar estilizando as coisas de maneiras diferentes.
E enquanto você continua praticando, você está confiante e
sua habilidade realmente vai crescer.
E é isso que eu quero.
Eu quero que sua confiança seja muito,
muito alta até o final da quarta semana de que você pode fazer isso.
Então boa sorte.