Welcome

Bem-vindos ao tutorial de CSS da Fickya(uma gnorbu nuvem), eu(chocolandya dona da Fi) fiz esse tuto em homenagem à ela e vou ensisar o CSS básico e avançado xP! Primeira mente você sabe o que é CSS? Não? Eu explico! CSS é nada mais nada menos que as sigras de: Cascading Style Sheets (em português: Folha de Estilos em Cascata). Obs: para que você entenda melhor o CSS é preciso que você saibe pelo menso o HTML básico!

Entendendo o código

Você usa o CSS assim <style type="text/css"> B</style>, no lugar de B você coloca os codigos que eu ja ja vou ensinar ok?!

Colocando background

Existem 2 formas fapa colocar um fundo(background) no seu layout ou no que você quiser. 1ª forma: body{background: url(URL do fundo)} background significa fundo e URL o lindo do fundo do layout, troque URL do fundo pelo URL do fundo do seu layout(existem varios tutoriais de codificação de lays que ensinam a "extrair" o fundo do lay).

Colocando fonte em negrito personalizado

Eu vou mostar o codigo e depois explicar! Codigo: b{color: #cor1;border-bottom:1px dashed #cor2;} onde tem cor1 como cola a cor da fonte e em cor2 a cor da linha que aparecerá embaixo, para isso visite a Tabela de cores. Entendendo o código: b significa bold(negrito em ingles), color significa cor e px significa pixel.

Colocando links personalizados

É uma forma bem divertida de colocar links! Eu explico mais primeiro coloque o codigo seguinte no neu CSS: A{color: #cor1; cursor: cursor;} A:hover{color: #cor2; times;text-decoration:none;} no lugar de cor1 você coloca a cor da fonte do link, em cor2 você coloca a cor da fonte quando o mouse passa na frente pra isso você vai precisar da Tabela de cores. Entendendo o codigo: a significa anchor(âncora em ingles), corlor significa cor, text-decoration significa decoração de texto e cursor significa cursor ora xP!

Colocando barra de rolagem personalizada

Usse este codigo: body {scrollbar-3dlight-color:cor; scrollbar-arrow-color:cor; scrollbar-base-color:cor; scrollbar-track-color:cor; scrollbar-darkshadow-color:cor; scrollbar-face-color:cor; scrollbar-highlight-color:cor; scrollbar-shadow-color:cor;}
Para se orientar use isso:

E tbm a Tabela de cores.

Colocando textarea personalizada

É muito facil deizar uma caixinha de texto do jeito que vc quiser! Use este codigo e depois eu esplico: textarea{background:#cor1;color:#cor2;font:7pt tahoma; border: 2px dotted #cor3;}Em cor1 comoque a cor do fundo da caixinha, em cor2 a cor da fonte dentro da caixinha e em cor3 a cor da borda, para isso vc vai precisar da Tabela de cores. Entendento o codigo: backgound significa fundo, font significa fonte e border significa borda!

Os tipos de borda(medio)

Os tipos de cursor

Passe o mouse em cima dos nomes! ^^
wait
crosshair
n-resize
se-resize
help
text
ne-resize
sw-resize
pointer
move
nw-resize
e-resize
default
w-resize
s-resize

Tabela de cores

Vai precisar dela!

PS: este tuturial ainda está sendo construido! Inalguração prevista para 31/01/09. Obrigada!

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2009.
® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions