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

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

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

<a href="/~ladymirtilla"><img src="http://i.imgur.com/vnBb5.gif" border="0" title="Lady's CSS"></a>	<a href="/~ladymirtilla"><img src="http://i.imgur.com/pFVVW.gif" border="0" title="Lady's CSS"></a>
<a href="/~ladymirtilla"><img src="http://imgur.com/mrS2t.gif" border="0" title="Lady's CSS"></a>	<a href="/~ladymirtilla"><img src="http://i.imgur.com/GdNPo.gif" border="0" title="Lady's CSS"></a>
<a href="/~ladymirtilla"><img src="http://i1206.photobucket.com/albums/bb453/ceehdaikirai/haze/buttonladyy.gif" border="0" title="Lady's CSS"></a>	<a href="/~ladymirtilla"><img src="http://i1206.photobucket.com/albums/bb453/ceehdaikirai/haze/buttonladyy2.gif" border="0" title="Lady's CSS"></a>
<a href="/~ladymirtilla"><img src="http://i.imgur.com/Oj8os.gif" border="0" title="Lady's CSS"></a>	<a href="/~ladymirtilla"><img src="http://i54.tinypic.com/jzv7r8.gif" title="Lady's CSS" border="0"></a>
<a href="/~ladymirtilla"><img src="http://i931.photobucket.com/albums/ad159/_alacarte_/Ladys.gif" title="Lady's CSS" border="0"></a>	<a href="/~ladymirtilla"><img src="http://i.imgur.com/pFVVW.gif" border="0" title="Lady's CSS"></a>