21/07/2012

8

Aprenda a usar o CSS!

359037_large
Piko-kun, seu sexy! Ninguém te ama mas eu sim ;d
Yoo minna-san!
Hehe, como diz o título, começarei um mini-curso de CSS hoje pra vocês. Bem básico, porque não sou nenhuma especialista, não XD
Pra quem não sabe, CSS significa "Cascading Style Sheets", ou seja, os códigos que definem os estilos. Sabe aquele código que você sempre coloca acima de ]]></b:skin>? E que sempre terminam com uma chave (})?
Nós então vamos hoje aprender a editar os seus estilos com CSS. Lembrando que, esse tutorial terá 3 partes, cada uma focada em coisas diferentes. 
Vamos ter como exemplo de uso os títulos dos gadgets. Clique em leia mais!

Vamos usar diversos estilos CSS para editar, como exemplo, os títulos dos gadgets.
Vá no seu HTML e cole acima de ]]></b:skin> o estilo base que vamos lhe dar.
.sidebar h2{
text-align:center;
background: #FFB6C1;font-size: 21px;
color: #000;
width: 300px;
height: 35px;
}
 Vamos conhecer os códigos:
text-align: Define a posição do texto.
Variáveis:

  • left (esquerda)
  • center (centro)
  • right (direita)
background: Define a cor/imagem de fundo.
Variáveis:

  • background: url(Aqui uma url de imagem para o fundo)
  • background: #código-da-cor
Aqui uma tabela de cores pra te ajudar.

font-size: Basicamente o tamanho da fonte em pixels.

color: A cor da fonte (Não confunda com background!). Altere apenas o código da cor.

width: A largura do objeto (nesse caso o fundo) em pixels.

heightA altura do objeto em pixels.


Use essas instruções para editar do jeito que quiser. 
Lembre-se sempre que:Um estilo sempre começa com: .nome {
e termina com: }
Se você não fechar ou abrir as chaves eles não começarão.
A mesma coisa com as linhas: Sempre terminam com um ponto-e-vírgula (;).

Mas o CSS não se limita só a isso! No próximo tutorial desse, mostrarei como usar e quais são os tipos de linhas de borda!Também vamos aprender como usar o hover, border-radius e elementos no texto. Isso se vocês aprovarem...!
Desculpem pelo tutorial ser tão curto, mas é que hoje saí e fiquei meio sem tempo (além de que estou sem mouse e odeio mortalmente esse mouse-pad).
Bem, é isso minna-san! Comentem!
Beijinhos!

8 comentários:

  1. Olá! Adorei o RC é super lindo e você manda muito bem com o design e o HTML do seu blog, você é uma blogueira que tem potencial e capacidade para o sucesso! ;)Eu aprendi muito com esse post, e, com toda a certeza ele vai me ajudar. Eu não sou boa em Design...nem em HTML, ou seja: prefiro deixar para pessoas que sabem, como você, hahahaha. Adorei aqui, seu blog é bem útil. Beijocas, Ana Clara, Descomplicando.
    http://d-escomplicando.blogspot.com.br/

    ResponderExcluir
  2. Olá, tudo bem? Adorei o post, super útil!<3 Estou passando aqui pra dizer que seu blog é super interessante e eu adorei. E se não for muito incômodo, poderia passar no meu? Saiba que estou te esperando lá. Beijos, happy-charllote.tk

    ResponderExcluir
  3. Ah, me ajudou muito. Eu sinceramente tava um tanto confusa sobre CSS e o escambau ASUHSAHU

    Beijos! ♥
    Pós Florescer (agora com domínio próprio!)

    ResponderExcluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. me ajudo, eu não sei quase nada sobre css, obrigada ;)
    s2hay.blogspot.com

    ResponderExcluir
  6. Yoo, Laurinha! Adorei o post. É bem útil. ~//w//~ Eu não sei quase nada de CSS. xD
    Kissus e mais kissus!

    http://anonlypossibility.blogspot.com.br/

    ResponderExcluir
  7. Yoo Gêmea-Chan! Kk Eu consegui Wi fi e coloquei vc já lá no blog *-* E quem disse que eu não gosto do Piko-kun? Ele é o maior gato #run Kisu da Lua-chan!
    Http://blog-onceuponasky.blogspot.com

    ResponderExcluir
  8. Muito bom seu tuto! Ajuda muito a entender de verdade os códigos do blog. ^^
    Kissus

    Cherry Bomb - Com novo design || Fanpage

    ResponderExcluir