Hey all~
Agora, nessa aula iremos ver sobre os códigos, não relacionado com as imagens, do modelo.
Caso não tenha visto a aula anterior pode clicar Aqui você irá para a aula sobre as imagens e seus códigos.
Primeiramente gostaria de dizer que entre as aulas eu editei minha imagem do FundoDegrade, a diferença é que foi disso:
Para isso:
Eu só adicionei as duas imagens nas extremidades.
Mas e com você tudo pronto? Prossigamos~
Se você seguiu todos os passos da última aula você deve ter algo parecido com isso : (releve as imagens)
Explicando de modo rápido, os comandos com “color” na frente indicam a cor da fonte, a cor da letra. Os comandos com “background-color” ou só “background” indicam o fundo de onde as letras estão. Os comando com “border” indicam a borda dos boxes.
Desta vez vamos começar com “ Estilos que pertencem ao Conteúdo do Site “
Vamos até “.boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td {“ essa parte corresponde as partes seguinte nesse verde chamativo.
Para alterar a cor do fundo vamos a
.boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td {
background-color: #FAF7F5;
color: #5D5D5D;
border:1px solid #EEE8E1;
}
especificamente a parte background-color: #FAF7F5;
background-color indica que é o fundo, # indica que o que vem a seguir é uma cor, FAF7F5 é a cor ( como já explicado na aula anterior sobre como conseguir os códigos das cores) e o ; indica que aquele comando tem o final ali, que ele só vai até ali.
Então substituímos o FAF7F5 pela cor de nossa preferência, no meu caso foi 85a8b9
Veja como é antes e depois no modelo e na preview:
Agora vamos para color: #5D5D5D;
No mesmo sentido do anterior, color indica que é a cor da letra, 5D5D5D a cor e etc…
Então substituímos 5D5D5D, por a outra cor.
(Nas próximas imagens eu acabei me confundindo e as letras ainda estavam com o código da cor antiga, mas você por favor substitua a cor por uma nova, não cometam o mesmo erro que eu, mais para a frente eu fui ver o erro e arrumei, mas por enquanto ignorem a cor errada da letra no modelo)
Vamos a border:1px solid #779eb1; explicando de modo rápido, 1px indica a espessura da borda, solid é o estilo ( o tipo da linha) e # 779eb1, de novo, é a cor.
Não é preciso mudar o estilo da linha nem a espessura, mas caso queira, fique a vontade, eu irei apenas alterar a cor.
E quando eu disse que o “solid” é o estilo da linha, vou dar um exemplo para melhor compreensão, como vc pode ver a borda é uma linha mas se você trocar o solid por algum outro comando, como dotted, o tipo da linha muda, em vez de uma linha agora são bolinhas
Até agora você entendeu tudo? Por que o resto é basicamente o mesmo.
Então vamos para “.boxConteudo .textoBg2, .boxConteudo tr.textoBg2 td {“ (logo abaixo de onde estávamos editando) , ele corresponde a parte verde na imagem:
Agora que você já sabe o que color, background e border significam e como funcionam, edite-os como nos passos anteriores.
(a partir dai eu reparei no código errado e já arrumei, como dito anteriormente)
O meu ficou assim:
Agora o “.boxConteudo .baixo {“ , logo abaixo de onde estamos, são as partes destacadas nas imagem:
E com os mesmo comando personalizamos essas partes.
Ficando:
Tudo okay?
Vamos a “.boxConteudo .baixo a {“ nessa parte há o comando font-size: 13px; ele indica o tamanho da fonte, ou seja o tamanho da letra.
Como você pode ver, acabamos de editar o .boxConteudo .baixo { , e o comando font-size está no .boxConteudo .baixo a { mostrando que o tamanho da fonte que ele está alterando é apenas a fonte do .boxConteudo .baixo {.
Para editar-lo deve se alterar o 13 por outro número de sua preferência, ou pode simplesmente deixá-lo como está. Em meu style eu deixarei como ele está.
Vou parar essa aula por aqui, o resto dos códigos estarão na próxima aula, não se preocupem~
Qualquer dúvida coloquem nos comentários que eu tento te ajudar com o que eu conseguir.
Até a próxima aula, byee~
Nenhum comentário:
Postar um comentário