Lady's CSS

{ Apresentação }

Bem vindo ao tutorial comentado de CSS, criado para ajudar você na elaboração da sua página aqui no site neopets.com. O tutorial foi reformulado, para melhor entendimento. Caso tenha alguma dúvida ou contribuição sinta-se à vontade para enviar-me um neomail.

introdução básica

O que é CSS? A sigla CSS significa Cascading Style Sheets, em português, folhas de estilo em cascata. É um documento onde são definidos as regras de formatação ou de estilos dos elementos. Você pode mudar cores dos elementos, definir tamanho, posicionamento, etc.

Porque usá-lo / Qual sua finalidade? CSS permite que você retire da marcação HTML toda a formatação, diminuindo assim, o código. Deixa seu código mais organizado, simples e de fácil entendimento.

Como eu escrevo o código? seletor {propriedade: valor;}



Visite também os tutoriais complementares.

Regras

Cópias não autorizadas serão contatadas diretamente a TNT, por meio de uma denuncia. Favor não copiar o conteúdo, nem partes do conteúdo. Divirtam-se!

Importante

{ visualização do código }


Para iniciantes em CSS recomendo que escreva o código no Bloco de Notas ou em outro programa do mesmo gênero.



Básico

{ Unidades do CSS }

~ Unidades determinam o tamanho (de imagens, letras, etc.), as principais são:

px: unidade de pixels, usado no geral (definir o tamanho de divs, de imagens, etc.).
seletor {font-size:12px;}
pt: unidade de pontos, usada para letras.
seletor {font-size:12pt;}
%: unidade de porcentagens, usada no geral (tamanho de div, tabelas, etc.).
seletor {font-size:80%}
em: duas vezes a fonte, usada para letras.
seletor {font-size:1em;}

obs.: 1em equivale a 12pt, 2em equivale a 24pt e assim por diante.

{ Cores }

~ Usado para definir a cor das palavras, textos em geral. Há várias formas de mudar as cores, a mais usada é a hexadecimal (confira a baixo).
seletor {color: #000000;}
seletor {color: #000;}
seletor {color: black;}
seletor {color: rgb(0, 0, 0);}
Hex (hexadecimal): #000000; #000;
Nome: black;
RGB (red, green, blue): rgb(0, 0, 0);


Sites: Colors Cheme Designer 3 e Color Picker
Tabelas de cores: neopets (coloque em inglês), color chart, neocolors, bubbles colour chart.

{ Tamanho }

~ Respectivamente: altura e largura.
seletor {height:100px;}
seletor {width:100px;}
Exemplo: definir o tamanho de um div comum.
.div {height:600px; width:800px;}

{ mudando a fonte da página }

~ Para mudar a fonte toda de uma página coloque os seletores gerais usados na sua página (no exemplo, coloquei body, div e table por serem as mais comuns); Após isso determine o que você quer mudar (a fonte, o tamanho, a cor, etc.).
body, div, table {font: 12pt Arial; color:#000;}

glossário

body: em inglês significa corpo; ou seja o "corpo" da página, o todo.
div: determina os divs usados na página;
table: modificará as tabelas usadas na página.

igual, mas diferente:
~ Negrito em inglês é bold, por isso usamos b. Você pode mudar desde a cor até o estilo (veja o exemplo a seguir). Igual, mas diferente: strong (forte)
b {color:#000;}
strong {color:#000;}


~ Itálico em inglês é italic, por isso usamos i. Igual, mas diferente: em (enfatizado)
i {color:#000;}
em {color:#000;}


~ Sublinhado em inglês é underline, por isso usamos u. Igual, mas diferente: strike (riscado) * O sublinhado não está funcionando.
u {color:#000;}
strike {color:#000;}
.underline {color:#000;}


SOLUÇÃO TEMPORÁRIA
.underline {color:#000;}


Dica: algumas pessoas gostam de deixar o negrito, o itálico e o sublinhado com uma borda inferior.
b {color:#000; border-bottom:1px dotted #000;}
i {color:#000; border-bottom:1px dashed #000;}
u {color:#000; border-bottom:1px solid #000;}

~ Títulos são definidos por header, dessa maneira usamos, h.
h1 {color:#000;}
h2 {color:#000;}
h3 {color:#000;}
h4 {color:#000;}
h5 {color:#000;}
h6 {color:#000;}

Dica: fazendo um header personalizado, com fonte Georgia tamanho 17, cor preta, borda preta lateral (direita) e texto alinhado pra esquerda.
h1 {fonte:17pt Georgia; color:#000; border-right:15px solid #000;text-align:left;}

{ ID e Class }

~ ID é um identificador único, ou seja só pode ser usado esse id uma vez. Só será usado uma vez. Se quiser colocar em outro div, terá que fazer outro id.
#unico {font:10pt Arial;color:#000;}

Exemplo: na codificação do seu layout, se usar CSS, pode coloca assim:
#div {width:00px;height:00px;left:00px;top:00px;}


~
Class pode ser usado quantas vezes se quiser.
.class{font:10pt Arial;color:#000;}

Exemplo: imagine que você queira colocar muitas palavras vermelhas.
.class{color:#ff0000;}

Intermediario

{ Backgrounds }

~ Respectivamente: fundo em geral, cor do fundo e imagem do fundo.
seletor {background:#000 url('imagem.gif');}
seletor {background-color:#000;}
seletor {background:url('imagem.gif')

~
Repetir o background (respectivamente: não repete a imagem, repete horizontalmente e repete verticalmente)
seletor {background-repeat:no-repeat;}
seletor {background-repeat:repeat-x;}
seletor {background-repeat:repeat-y;}

~
Rolar a imagem (fixed: fundo não se move quando rola a página e scroll: fundo se move)
seletor {background-attachment:fixed;}
seletor {background-attachment:scroll;}

~
Posição (top é o topo, cima, superior; center é o centro; right é a direita; left é a esquerda; bottom é inferior, baixo;)
seletor {background-position: top center;}
seletor {background-position: top right;}
seletor {background-position: top left;}
seletor {background-position: center center;}
seletor {background-position: center right;}
seletor {background-position: center left;}
seletor {background-position: bottom center;}
seletor {background-position: bottom right;}
seletor {background-position: bottom left;}
Dica: você pode simplificar o código da seguinte maneira:
background: {#000 no-repeat fixed top left;}


{ Font Properties }

Font determina o tipo de fonte, o estilo, o tamanho, etc.

~ Font-Family muda o tipo de fonte (exemplos: aqui, aqui e aqui).
seletor {font-family: Times New Roman;}
seletor {font-family: Arial;}
seletor {font-family: Verdana;}
~ Fonte-size mudará o tamanho da fonte, pode ser com numeros ou não.
seletor {font-size: 10pt;}
seletor {font-size: 100%;}
seletor {font-size: smaller;}
seletor {font-size: xx-small;}
seletor {font-size: x-small;}
seletor {font-size: small;}
seletor {font-size: medium;}
seletor {font-size: large;}
seletor {font-size: x-large;}
seletor {font-size: xx-large;}

~ Fonte-style determina se é itálico ou normal
seletor {font-style: italic;}
seletor {font-style: oblique;}
seletor {font-style: normal;}

~ Font-weight determina se é bold/bolder ou normal
seletor {font-weight: bold;}
seletor {font-weight: bolder;}
seletor {font-weight: 700;}
seletor {font-weight: normal;}

~ Font-variant determina se é small-caps ou normal
seletor {font-variant: small-caps;}
seletor {font-variant: normal;}

{ Text Properties }

~ Text-decoration determina as linhas
seletor {text-decoration: none;}
seletor {text-decoration: underline;}
seletor {text-decoration: line-through;}
seletor {text-decoration: overline;}
seletor {text-decoration: blink;}

~ Text-transform determina se a letra é minuscula, maiuscula ou normal
seletor {text-transform: uppercase;}
seletor {text-transform: lowercase;}
seletor {text-transform: capitalize;}
seletor {text-transform: none;}

~
Text-indent determina o parágrafo da primeira linha do texto.
seletor {text-indent: 35px;}

~
Text-align determina o alinhamento do texto
seletor {text-align: center;}
seletor {text-align: right;}
seletor {text-align: left;}
seletor {text-align: justify;}
left

center

right


~
Letter-spacing determina o espaço entre as letras.
seletor {letter-spacing: -1pt;}
seletor {letter-spacing: 1pt;}

~
Vertical-align determina o alinhamento vertical das palavras.
seletor {vertical-align: sub;}
seletor {vertical-align: super;}
seletor {vertical-align: -3;}
seletor {vertical-align: 3;}
seletor {vertical-align: 15%;}
seletor {vertical-align: -15%;}

{ hyperlinks e Pseudo classes }

~ Hyperlinks são os links da página, são definidos por a, que significa anchor (em português, âncora).

Respectivamente: link normal, link ativo (ao clicá-lo), link visitado e ao passar o mouse.
a,a:link {color:#000;}
a:active {color:#000;}
a:visited {color:#000;}
a:hover {color:#000;}
~ Pseudo classes traduzindo seria, classes falsas. São muito usados em menus de navegação. Podem ser usados de três maneiras diferentes.

A primeira é por class separadas:
a.menu {color:#000;}
a.menu:active {color:#000;}
a.menu:visited {color:#000;}
a.menu:hover {color:#000;}

A segunda é por class juntas:
.menu a{color:#000;}
.menu a:active {color:#000;}
.menu a:visited {color:#000;}
.menu a:hover {color:#000;}

A terceira é por id:

#menu a{color:#000;}
#menu a:active {color:#000;}
#menu a:visited {color:#000;}
#menu a:hover {color:#000;}

{ Listas }

Para mudar o símbolo da lista, usamos list-style-type.

  • lista
  • lista
  • lista
  • seletor {list-style-type: disc;}
  • seletor {list-style-type: circle;}
  • seletor {list-style-type: square;}
  • seletor {list-style-type: decimal;}
  • seletor {list-style-type: upper-alpha;}
  • seletor {list-style-type: lower-alpha;}
  • seletor {list-style-type: lower-roman;}
  • seletor {list-style-type: upper-roman;}
  • Você também pode fazer o seu próprio símbolo, uma imagem de 15 x 15 pixels:
    seletor { list-style-image: url('image.gif'); }

    { Mouse }

    ~ Decoração do mouse.
    seletor {cursor:move;}
    cursor:move; cursor:default; cursor:progress; cursor:nw-resize;
    cursor:text; cursor:e-resize; cursor:ne-resize; cursor:col-resize;
    cursor:wait; cursor:w-resize; cursor:se-resize; cursor:sw-resize;
    cursor:help; cursor:s-resize; cursor:all-scroll; cursor:vertical-text;
    cursor:hand; cursor:n-resize; cursor:crosshair; cursor:row-resize;

    { Barra de Rolagem }


    body {
    scrollbar-arrow-color:#000;
    scrollbar-3dlight-color:#000;
    scrollbar-highlight-color:#000;
    scrollbar-face-color:#000;
    scrollbar-shadow-color:#000;
    scrollbar-darkshadow-color:#000;
    scrollbar-track-color:#000; }

    Avançado

    { Box }

    ~ Box significa caixa, onde demonstra como os elementos são dispostos (imagem).


    { Bordas }

    ~ Existe dois jeitos de fazer bordas com CSS, ensinarei o jeito mais fácil, tudo junto. Respectivamente: todas (border), em cima (top), em baixo (bottom), esquerda (left), direita (right). Primeiro escolha a propriedade da borda (em cima, em baixo, etc.), depois a espessura (1px, 10px, etc.), o estilo (solid, dashed, etc.) e por ultimo, a cor.
    seletor {border:1px solid #000;}
    seletor {border-top:1px solid #000;}
    seletor {border-bottom:1px solid #000;}
    seletor {border-left:1px solid #000;}
    seletor {border-right:1px solid #000;}
    Estilos de bordas: solid (solido, normal), dashed (tracejado), dotted (pontilhado) e double (dupla), groove, ridge, inset, outset, none (nenhuma).

    ~ Line-height é usado para definir o espaçamento entre as linhas ou bordas.
    seletor {line-height: 10px;}

    { Margens }

    ~ Margin determina a margem de cima, de baixo, da esquerda ou da direita.
    seletor {margin-top:0px;}
    seletor {margin-bottom:0px;}
    seletor {margin-left:0px;}
    seletor {margin-right:0px;}

    ~ Padding determina o espaçamento, normalmente, de imagens ou palavras.
    seletor {padding-top: 10px;}
    seletor {padding-bottom: 10px;}
    seletor {padding-left: 10px;}
    seletor {padding-right: 10px;}

    { Posição }

    ~ Position determina a posição dos objetos.
    seletor {position: absolute;}
    seletor {position: fixed;}
    seletor {position: relative;}
    Absolute: você específica exatamente onde o elemento deve ficar.
    Relative: elemento é posicionado na sua posição inicial/normal.
    Fixed: elemento fixo, independente da scrollbar. Não funciona no IE.
    Dica: como o neo bloqueia o position, use no style do div:

    { Display e Visibility }

    ~ Display é usado para manipular os elementos de uma página.
    seletor {display: inline;}
    seletor {display: block;}
    seletor {display: none;}
    Inline: não pula linha, os elementos ficam em horizontal. Exemplo: na criação de um menu horizontal, usamos display:inline;.
    Block: pula uma linha entre os elementos, que ficam dispostos na vertical. Exemplo: na criação de um menu vertical, usamos display:block;.
    None: não exibe os elementos. Exemplo: para tirar as partes do lookup, utilizamos display:none;, pois ele faz com que as partes sumam.

    ~ Visibility é usado para deixar visível ou não os elementos.
    seletor {visibility: hidden;}
    seletor {visibility: visible;}

    Hidden: deixa o elemento transparente.
    Visible: elemento visível, normal.

    display:none; x visibility:hidden;

    display:none: remove/desaparece da página.
    visibility:hidden: deixa o elemento transparente, mas ele continua lá.

    { Float }

    ~ Float significa flutuar, ou seja, delimita o lugar onde o elemento deve flutuar. Geralmente usado em imagens e layouts (divs). * Usado no lugar de align=left.

    seletor {float: left;}
    seletor {float: right;}
    seletor {float: none;}
    (center)(/center)


    { Pseudo-elements }

    ~ Pseudo-elements são usados para decoração de algumas partes.
    seletor:first-letter {color: #000;}
    seletor:first-line {color: #000;}

    disposição

    Eles podem ser dispostos dessas maneiras:

    ~ seletor:pseudo-element {propriedade:valor;}
    ~ seletor.class:pseudo-element {propriedade:valor;}


    { Opacidade }

    ~ Opacity, como o nome já diz, define a opacidade dos objetos. Cada navegador tem um jeito. * Não está funcionando.
    opacity: .4;filter:alpha(opacity=40);
    opacity: 0.4;filter:alpha(opacity=40);

    Tabela de Informações

    A tabela a seguir mostrará os valores e propriedades que podem ser mudados em uma página e a sua utilidade.

    Propriedade

    O que ele faz?

    background Cor de fundo, imagem, transparência.
    background-image Imagem de fundo.
    background-color Cor de fundo ou transparência.
    background-repeat Jeito da repetição da imagem de fundo.
    border Largura, estilo e cor de todas as 4 bordas.
    border-bottom Largura, estilo e cor da borda inferior.
    border-bottom-color Cor da borda de baixo.
    border-bottom-style Estilo da borda de baixo.
    border-bottom-width Largura da borda de baixo.
    border-color Cor das 4 bordas.
    border-left Largura, estilo e cor da borda esquerda.
    border-left-color Cor da borda.
    border-left-style Estilo da borda.
    border-left-width Largura da borda.
    border-right Largura, estilo ou cor da borda direita.
    border-right-color Cor da borda.
    border-right-style Estilo da borda.
    border-right-width Largura da borda.
    border-style Estilo de todas as 4 bordas.
    border-top Largura, estilo e cor da borda superior.
    border-top-color Cor da borda.
    border-top-style Estilo da borda.
    border-top-width Largura da borda.
    border-width Largura de todas as 4 bordas.
    cursor Tipo de ponteiro do mouse.
    font Estilo, variante, tamanho.
    font-family Tipo de fonte.
    font-size Tamanho da fonte.
    font-style Itálico.
    Fonte-variant Negrito.
    height Altura exibida ao elemento.
    letter-spacing Espaço entre as letras.
    line-height Espaço entre linhas de base.
    list-style Estilo, imagem e posição.
    list-style-image Marcador URL.
    list-style-type Tipo do marcador.
    margin Tamanho de todas as 4 margens.
    margin-left Tamanho da margem esquerda.
    margin-right Tamanho da margem direita.
    margin-bottom Tamanho da margem inferior.
    margin-top Tamanho da margem superior.
    overflow Exibição dos elementos.
    padding Espaço em torno.
    padding-bottom Espaço a partir da margem inferio.
    padding-left Espaço à esquerda.
    padding-right Espaço à direita.
    padding-top Espaço a partir da margem superior.
    position Posição.
    text-align Alinhamento do texto.
    text-decoration Sublinhado, sobrelinhado ou riscado.
    text-indent Recuo da primeira linha do parágrafo.
    text-transform Maiúsculas ou minúsculas.
    top Posição do topo.
    vertical-align Alinhamento vertical.
    width Largura.
    z-index Posição do elemento na pilha.
    Tabela retirada e editada a partir de um tutorial.

    Information


    Information

    16/05/10 - atualização geral.
    07/05/10 - novos buttons.
    07/05/10 - banner modificado.
    16/03/10 - nova parceria.
    16/03/10 - novos diretórios.
    12/03/10 - inauguração.
    01/03/10 - restauração da petpage.

    Link back












    Sitely

    { parceiros }

  • Tutoriais da Isalesma
  • Graphics da Bia
  • Tutorial de HTML
  • Glam
  • The Joker
  • Charming
  • Royalty


  • { reviews/awards }

  • Diamond Links,
  • Really Socores
  • Glam
  • Sweetness
  • Reviews Fanatics
  • Proportion
  • Mistery Eggs
  • Truth Reviews
  • Really Socores
  • Paper Boat
  • Lih's Reviews
  • Dan 'n' Juh
  • Marimari


  • { listado }

  • Compendium
  • Diomond Links
  • Bubbles
  • Candy Place
  • Guia Legal
  • Páginas Úteis
  • Links Úteis
  • Tutorial de HTML
  • Graphics da Bia
  • Link da Gatinha
  • PP da Mickey
  • OH!
  • Links Brilhantes
  • The Stadium
  • Insert
  • Elle's Help Guide

  • YOUR

    Recommended



    Credits

  • page: kah
  • resources: foomanshu
  • texture: swimchick
  • help: ric and htmldog





    27/03/10
  • Neopets.com | Política de Privacidade | Dicas de Segurança | Termos e Condições
    Conteúdo original por LadyMirtilla, © 2009 - 2011.
    Todos os direitos reservados.