27 fevereiro 2016

Entendendo o Básico do CSS - Para os Iniciantes!

| |
Créditos enorme na imagem = sem chance de plágio huehue :v

Oi amorekitos <3 Nossa, nunca amei tanto finais de semana, não consigo fazer merda nenhuma na semana a não ser ir pra escola, voltar e dormir, e isso é totalmente chato. Mas pelo menos, eu sou uma pessoa ~muito criativa e.e~ e tem posts ~muitos, muitos~ programados. "Mas post programado não tem sentimento", tem sim, claro que tem, você acha que eu vim do futuro fazer essa intro? Eu digito isso no dia que vai ser postado :3 ~porque eu gosto de intro u-u~

Bem, o quê mais dizer? Até agora não vi nada para arrumar no layout ~nossa mi, para de falar dessa coisa~, não, não paro, porque eu sou meio perfeccionista, então odeio qualquer mínimo errinho, e acaba sendo bem chato ser assim ~acreditem, ficar reparando em cada misero detalhe incomoda~ Bem, CSS é bem fácil de entender, coisas como personalização de links, blockquotes, seleção de texto colorida e etc... Fica tudo lá!

Hoje vamos aprender onde adiciona mais CSS e o CSS básico que você com certeza usará!

Onde adiciono mais CSS?

Opção 1

1 - Entre no seu blog, vá em MODELO

2 - Clique em PERSONALIZAR

3 - Vá em AVANÇADO

4 - Clique no último da lista chamado ADICIONAR CSS

Opção 2 

1 - Entre no seu blog, vá em MODELO

2 - Clique em EDITAR HTML

3 - Aperte CTRL+F e pesquise por ]]></b:skin>

4 - Acima disso, ponha seus CSS

CSS básico 

background

Tem dois tipos de backgrounds. um só de cor e outro de imagem.

background: url("") no-repeat; 
background: #cor

Pode trocar no-repeat para repeat para a imagem se repetir.

font-size

Defini tamanho de qualquer fonte

font-size: 15px;

width e weight

defini altura e largura de cabeçalhos

no html :

width: 200px;
weight: 200px;

em gadget :
width:"200" weight:"200"

text-align

Alinhar texto, pode ser left, right, center ou justify( na ordem, esquerda, direita, centralizado ou justificado )

text-align: center;

text-shadow

Sombra em texto, um exemplo é o blog, títulos de gadgets e posts tem sombra no texto

text-shadow: 3px 2px 1px #333;

border

Defini uma borda, pode ser gadgets, área de posts, imagens e etc...

border: 2px solid #fff;

hover

Um efeito ao passar ao mouse em algo, links em fade é um bom exemplo

a:link a:hover {
font-size : 19px;

É isso pessoal!

Super básico mesmo para quem tá começando!

Kissus! *^*

2 comentários

  1. Hello!!!
    Eu não gosto de programar postas porque se não fica meio desatualizado no meu olhar.Mas eu já fiz isso e não rolou.
    CSS,sempre foi um mistério pra mim mas acho que agora já deu pra entender um pouquinho mais!!!Obrigada!!!


    http://s-oap.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. hello Ana!
      As vezes não rola, que pena não ter dado certo~o jeito é postar na hora mesmo~ opa, que bom ter ajudado <3 Nada amoreko, que bom poder ajudar ti :3 Kissu!

      Excluir

Olá serumaninho! Que bom que veio comentar, weeeeee! Bem, nem tudo e purpurina e alegria, temos algumas regrinhas, trate de seguí-las, uh?

✿ Respeite a opinião alheia;
✿ Não comente somente por auto-divulgação, eu excluo mesmo;
✿ Vagas de afiliação estão fechadas, atualmente;
✿ Deixe o link do teu blog ao fim do comment pra eu ir lá brotar;
✿ Copie teu comment, o Blogger pode acabar cortando-o.

Layout feito por Mi-chan | Créditos à CDH CH e WHH