Entrar
Cadastre-se
Início1
TUTORIAL COMPLETO: COMANDOS BÁSICOS DE CSS Sex Mar 15, 2013 9:24 pm
gmtp
Minis : 
:00
:00
:00
:00:00:00Mensagens : 46
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.
