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.




    Heads Up! You're about to leave Neopia!

    You've clicked on a link that will take you outside of
    Neopets.com. We do not control your destination's website,
    so its rules, regulations, and Meepit defense systems will be
    different! Are you sure you'd like to continue?



    It is a journey
    I must face...alone.
    *dramatic music*
    I want to stay on Neopets,
    where the dangers of
    Meepit invasion
    are taken seriously.
    Heads Up! You're about to leave Neopia!

    You've clicked on a link that will take you outside of
    Neopets.com. We do not control your destination's website,
    so its rules, regulations, and Meepit defense systems will be
    different! Are you sure you'd like to continue?



    It is a journey
    I must face...alone.
    *dramatic music*
    I want to stay on Neopets,
    where the dangers of
    Meepit invasion
    are taken seriously.
    Heads Up! You're about to leave Neopia!

    You've clicked on a link that will take you outside of
    Neopets.com. We do not control your destination's website,
    so its rules, regulations, and Meepit defense systems will be
    different! Are you sure you'd like to continue?



    It is a journey
    I must face...alone.
    *dramatic music*
    I want to stay on Neopets,
    where the dangers of
    Meepit invasion
    are taken seriously.
    /help/bumper/headers/log-in-to-facebook

    NEOPETS, characters, logos, names and all related indicia
    are trademarks of Neopets, Inc., © 1999-2014.
    ® 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