GameZer Online


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 TUTORIAL COMPLETO: COMANDOS BÁSICOS DE CSS em Sex Mar 15, 2013 9:24 pm

gmtp

avatar

Vou explicar aqui cada comando do css. O css é a parte entre que comanda o gráfico e o design do theme. Os código ficam entre chaves {} e cada um tem uma função.

width: determina a largura de um objeto. {width: LARGURApx;}. {min-width: LARGURApx} serve para indicar a largura mínima do objeto. {max-width: LARGURApx} serve para indicar a largura máxima do objeto.

height: determina a altura de um objeto. {height: ALTURApx;}. {min-height: ALTURApx} serve para indicar a altura mínima do objeto. {max-height: ALTURApx} serve para indicar a altura máxima do objeto.

background: determina o fundo do seu objeto. Pode conter uma cor {background-color: #COR} ou uma url {background: url(‘URL_DA_IMAGEM’)}

Código:
background-repeat: determina se o background repete, ou não.  Pode ser {background-repeat: repeat;} para repetir e {background-repeat: no-repeat;} para não repetir, {background-repeat: repeat-x;} para repetir para os lados e {background-repeat: repeat-y;} para repetir para cima ou para baixo.

background-attachment: determina se o background é fixo, ou móvel.  Pode ser: {background-attachment: fixed;} para ficar fixo, ou {background-attachment: scroll;} para ficar móvel.

border: determina um contorno para o seu objeto. Pode ser atribuído apenas para o topo {border-top: TAMANHOpx solid #COR;}, para a base {border-bottom: TAMANHOpx solid #COR;} para o lado direito {border-right: TAMANHOpx solid #COR;} e para o lado esquerdo {border-left: TAMANHOpx solid #COR;}

Código:
solid: determina uma borda/contorno/linha sólida.

dashed: determina uma borda/contorno/linha tracejada.

dotted: determina uma borda/contorno/linha pontilhada.

border-radius: determina se as bordas são arredondadas ou não. Quanto maior o tamanho, mais arredondado fica. Pode ser {border-radius: SIZEpx;} para todas as bordas ficarem arredondadas, e o código para arredondar somente dois lados, ou um só, pode ser gerado nesse site.

color: determina a cor do texto {color: #COR;}

position: super importante, determina se o objeto vai ficar fixo ou móvel. Pode ser {position: fixed;} para ficar fixo, ou {position: absolute} para ficar móvel.

float: determina a posição do objeto. Pode ser {float: left} para a esquerda, ou {float: right;} para a direita, ou {float: center} para ficar no meio/centro.

margin: determina a distância entre o objeto e uma direção. Pode ser {margin-top: DISTÂNCIApx;} para indicar a distância entre o topo e o objeto, {margin-bottom: DISTÂNCIApx;} para indicar a distância entre a base inferior e o objeto, {margin-left: DISTÂNCIApx;} para indicar a distância entre a margem esquerda e o objeto, {margin-right: DISTÂNCIApx;} para indicar a distância entre a margem direita e o objeto.

font-family: determina a fonte usada no texto. {font-family: FONTE;}

Código:
text-align: determina o alinhamento do texto.  Pode ser {text-align: left;} para ficar a esquerda, ou {text-align: right;} para ficar a direita, ou {text-align: center;} para ficar no meio/centro.

font-size: determina o tamanho do texto.  {font-size: TAMANHOpx;}

padding: é a distância entre a borda e o conteúdo do objeto. Pode ser {padding: DISTÂNCIApx;} para a distância ser atribuída a todas as bordas, {padding-top: DISTÂNCIApx;} para a distância ser atribuída à margem do topo, {padding-bottom: DISTÂNCIApx;} para a distância ser atribuída à margem da base inferior, {padding-left: DISTÂNCIApx;} para a distância ser atribuída à margem da esquerda, ou {padding-right: DISTÂNCIApx;} para a distância ser atribuída à margem da direita. É esse código que faz o menu esticar quando passa o mouse, no menu hover.



Olá Convidado Antes De Tudo, Bem Vindo Ao [Você precisa estar registrado e conectado para ver este link.] !!

Convidado Você Esta No Fórum Deis de E Você Tem 0 Mensagens !
o Fórum Tem 10423 Mensagens Com 704 Membros Registrado. VAMO AJUDA A DIVULGA AE !

[Você precisa estar registrado e conectado para ver esta imagem.]

Admin

avatar

Obrigado por compartilhar. Já sei tudo que tem ai. Razz

rck

avatar

Eu uso o inspecionar elementos do Firefox para descobrir as classes da forumeiros. É um metodo muito eficiente.



Spoiler:
[Você precisa estar registrado e conectado para ver esta imagem.]


[Você precisa estar registrado e conectado para ver esta imagem.]

Por favor, leia as [Você precisa estar registrado e conectado para ver este link.], para mantermos uma organização cabulosa.

RafsEstevam

avatar
Programador
Programador
Mesmo eu não entendendo muito de CSS, eu sei isso. E isso nem se classifica como Básico, isso é aprendizado para amador que só quer saber um pouco sobre isso.

@Edit: Você usou o border-radius mas não citou que é necessário usar -webkit e -moz

-WEBKIT = Para GOOGLE CHROME E NAVEGADORES QUE USAM WEBKIT
-MOZ = USA-SE PARA NAVEGADORES MOZILLA.

Bom eu sempre uso WEBKIT e MOZ...



[Você precisa estar registrado e conectado para ver esta imagem.]

rck

avatar

O -moz não é mais necessario no Firefox em border-radius. O Firefox deixou de precisar desse prefixo na maior parte das declarações de CSS3.



Spoiler:
[Você precisa estar registrado e conectado para ver esta imagem.]


[Você precisa estar registrado e conectado para ver esta imagem.]

Por favor, leia as [Você precisa estar registrado e conectado para ver este link.], para mantermos uma organização cabulosa.

Jose Hamizaki

avatar
Essa parte que você colocou eu ja sabia, menos a do padding, Smile



[Você precisa estar registrado e conectado para ver esta imagem.]

RafsEstevam

avatar
Programador
Programador
rck escreveu:O -moz não é mais necessario no Firefox em border-radius. O Firefox deixou de precisar desse prefixo na maior parte das declarações de CSS3.
.

A mozilla não tem só o FIREFOX.



[Você precisa estar registrado e conectado para ver esta imagem.]

Admin

avatar

Olá, versões anteriores do FireFox, não lembro qual, era obrigatório utilizar -moz, mais com as atualizações, agora não precisa mais...

OBS: Sei disso, porque na minha escola é desatualizado, e o border-radius não funciona...

Nightmare

avatar
Eu sabia de quase tudo mas essa parte das largura desse jeito não,isso sempre me confundio mas agora aumentou minha nossão vlw pelo post Very Happy





[Você precisa estar registrado e conectado para ver esta imagem.]
Divine Art's
Outras Sign
Primeira modelada bem feita:
Spoiler:
[Você precisa estar registrado e conectado para ver esta imagem.]

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum