Bem-vindos de volta, pessoal.
É hora de parar de aprender coisas novas e
colocar em prática as coisas que temos falado na última semana.
O que vamos fazer é adicionar alguns dos novos componentes que temos trabalhado.
Mas vamos fazer isso juntos enquanto programamos, então novamente eu vou enfatizar que eu
realmente espero que você pare, coloque o que quer que você esteja fazendo, bata seu laptop ou
o que você está programando, e
codifique comigo em vez de apenas assistir o que eu estou fazendo.
Da última vez que estávamos a codificar juntos,
espero que tenhas criado algo parecido com esta tela aqui.
Entramos e usamos largura e telas diferentes,
preenchimento e margem e estávamos fazendo nossa página um pouco melhor.
Hoje, vamos dar um passo adiante e adicionar alguns elementos diferentes,
como gradiente, em vez de ter três seções de largura igual, teremos algumas
seções ocupar metade da página, algumas ocupam a página inteira, pequenas coisas como esta.
E vamos utilizar esses novos seletores que temos estudado.
Então, vamos em frente e começar.
A primeira coisa que eu quero fazer é colocar nesse gradiente linear ou
aquela nova cor que vai tanto no cabeçalho quanto no rodapé.
Então, quando eu for para a minha folha de estilo, e eu vou subir aqui.
Uma das primeiras coisas que eu quero fazer é que eu quero colocar em que precisamos de um novo
plano de fundo para o cabeçalho e rodapé.
E eu vou começar por colocá-lo aqui.
Sei que trapaceei, copiei e colei.
Mas eu queria fazer isso, desculpe.
Eu queria fazer isso, porque eu continuava bagunçando quando eu estava digitando.
Então, o que eu coloquei aqui, é que eu comecei colocando em uma cor de fundo.
Você sempre quer fazer isso, porque se você não fizer isso, se por algum motivo
o navegador não pode lidar com gradiente linear, você deu um retorno.
Então, eu tive minha regra de gradiente linear em cada um dos diferentes webkits.
Então, uma vez que eu adicionei isso e eu apertei Salvar, nós podemos atualizar a página e
ver se nós temos esse tipo de cor cinza a azul que estávamos procurando.
Ei, ótimo, nós fizemos.
Agora, quando eu escrevi esta regra, você deve se lembrar que eu coloquei cabeçalho,
rodapé e isso significa que é suposto se aplicar a ambos os elementos.
Mas só se aplica ao cabeçalho.
Precisamos pensar por que isso aconteceu.
A razão é que se rolarmos para baixo, você pode ver que mais para baixo na página
que eu disse, eu quero o fundo do meu rodapé para ser esta cor particular.
Isto substitui quaisquer regras anteriores, por isso vou entrar aqui.
E eu vou deletar isso, e dizer, vamos nos livrar disso.
Refresque e ótimo.
Agora parece muito melhor.
Ok, então nós fizemos essa mudança, e espero que você esteja se acostumando com a idéia
de usar a vírgula para estilizar dois elementos ao mesmo tempo, você pode fazer ainda mais e
colocar esses prefixos web kit ou prefixos do navegador.
Se você se livrar dele, ele pode funcionar em seu navegador,
mas há uma boa chance de que ele não funcione no outro navegador.
Então, queremos praticar isso.
Certo, vamos dar uma olhada e ver o que temos.
Eu tenho o gradiente dentro.
A próxima coisa que eu quero abordar é estilizar esses links, e
novamente, eu não estou estilizando todos os links na página
, porque se você notar, este aqui em baixo ainda parece exatamente o mesmo.
Eu só quero estilizar os links que estão dentro da seção de navegação.
Então, eu vou para aqui e, eu estilizei o meu nav.
Parece bom.
Da próxima vez, eu vou dizer,
hey, vamos estilizar apenas aqueles links que estão dentro do navegador.
E fizemos algumas mudanças.
Se eu descer aqui, podemos ver.
Um que nós adicionamos algo que se parece com uma estrutura de caixa para ele.
Normalmente você não poderia fazer isso porque em elementos de linha não levam uma largura e
uma altura, mas, vamos em frente e brincar com ele.
Vamos em frente e começar, eu vou primeiro dizer que eu gostaria que a largura de cada um dos
meus links fosse de cerca de 22%, salve isso.
Refresque, não tive sorte.
Então novamente, lembre-se, uma das coisas que eu disse é que os links são inline e
você não pode dar-lhes largura ou altura.
Então, agora, se eu entrar e eu digo vamos mudar nossa exibição para
inline-block, nós devemos ter muito mais sorte.
Quase muita sorte, porque a tela não se encaixa nisso.
Tudo bem? Tudo bem.
Tão bom, é um passo mais perto.
Vamos adicionar essa cor de fundo diferente.
E acho que o deixei branco.
Mas você pode usar o que quiser.
Boom.
Definitivamente estamos nos aproximando.
Pequenos passos estão nos deixando muito, muito mais perto.
Então, a próxima coisa que eu quero abordar enquanto tentamos mudar nossa página
é essa idéia de que algumas das seções devem ocupar metade da tela,
enquanto algumas das seções devem ir em frente e ocupar toda a largura da tela.
E a maneira como vamos fazer isso é usando aulas.
Se você se lembra,
as classes são uma maneira de estilizar certos grupos de elementos de maneiras semelhantes.
Então vamos em frente e ver como vamos fazer isso.
A primeira coisa que eu preciso fazer é fazer uma nova aula, e esta classe vai dizer,
em vez de todas as seções ocupando 30%, eu quero apenas alguns deles,
eu vou chamá-los metade para ocupar cerca de, digamos, 45% da página.
Desta forma, ele só vai pegar algumas das seções, não todas elas.
Se eu atualizar, ele não vai funcionar ainda porque o problema é que eu me
livrei do meu estilo de seção e substituí-lo por esta classe e
em nenhum lugar no meu HTML eu me lembrei de fazer referência à classe.
Então, pela primeira vez, vamos agora para o nosso arquivo HTML e
começar a fazer algumas alterações.
Vou aqui, eu gostaria que este só ocupasse metade da tela,
então eu vou dizer classe = metade.
E eu gostaria que este ocupasse metade da tela.
Nós temos isso.
Nós não vamos mudar o outro, então
quando eu atualizar, você pode ver que dois deles agora estão próximos um do outro.
Então, quando eu tenho e refrescado parece um pouco mais perto, além de eu ter
algumas coisas estranhas acontecendo com algumas coisas azuis e diferentes.
Então isso é porque eu tenho usado float.
E se você se lembra, quando você está usando float às vezes faz com que as coisas que
estão próximas umas das outras estejam basicamente em posições que você não quer que elas estejam.
Então nossa seção inferior, aquela que sabíamos que não queríamos flutuar,
precisamos entrar e dizer hey, há certas seções que queremos ser inteiras.
Então vamos voltar à nossa folha de estilo.
E eu vou fazer um pouco de copiar e colar aqui.
E eu vou dizer, quer saber?
Esta seção, preciso que seja classe igual a todo.
Então volte para cá.
Classe de seção = todo o que significa que este deve ocupar toda a largura,
não tente flutuá-lo ao lado do outro.
E vamos em frente e atualizar.
Isso parece muito melhor.
Parece que queríamos que as coisas fossem no final.
E novamente, preste atenção.
Apenas os links de navegação são estilizados, não todos os links.
Nós colocamos o gradiente.
Se o gradiente não estiver funcionando,
talvez seja porque você não colocou os prefixos do navegador.
Nós realmente temos um monte de pequenas coisas acontecendo nesta página.
E de novo, não sou artista gráfico, então não faço as coisas mais bonitas.
Mas é divertido entrar e criar coisas diferentes e
ver como você pode estilizá-las você mesmo.
Então, continue e boa sorte e não se preocupe quando acertar os erros de digitação.
Todos nós fazemos.